上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 バックグランドで画像を使えば、表現の幅は、無限に広がります。
(バックグランドのスタイルシートの復習は…「スタイルシートでのデザイン(バックグランド編)」から)

 今回はGIFアニメーション画像を使った面白い表現に挑戦したいと思います。
 画像の背景と、文字のアンダーライン、リンク文字を、GIFアニメーションで表現すると?

使用するGIFアニメーション



赤ストライプ・GIFアニメ ←用意するのは、こんな感じの小さなGIFアニメです。

 アニメーションの大きさが小さいほど応用が効きます。
 

GIFアニメで文字のアンダーライン

 鍵になるのは「background」と「repeat-x」ポジションの「bottom」です。
 背景画像を水平方向にリピート表示 + 下寄せ で、面白いアンダーラインが出来上がります。

<span style="
background : url('http://画像のURL.gif') left bottom repeat-y ;
padding-bottom : 4px ;

">
任意の言葉
</span>
(*分かりやすくするために、改行が入っています)

 表示結果
任意の言葉


 こんな感じで、言葉をより強調するときなどに使えそうです。


画像の背景にGIFアニメを使ってみる

 画像に背景をつけても、どちらにせよ画像が背景を隠してしまうので、通常は見えません。
 しかし、「padding」で空けた空間は、背景画像が来ると言う決まりごとがありました。画像タグにももちろん「padding」は当てられます。それを利用して、画像周りに背景画像を表示させるテクニックです。

<img src="http://画像のURL.jpg" style="
background : url('http://背景画像のURL.gif') repeat ;
padding : 2px ;

" />


 表示結果


 ちょっと不思議な感じ。


応用

 例えば、背景画像全体がアニメーションをすると、すこし煩い感じのブログになってしまいますが、例えばこう言ったテクニックをリンクにマウスカーソルが乗ったとき(a : hover { ~ })の時などに利用すると、結構おしゃれな感じを演出することができます。


おまけ・GIFアニメの参考リンク




■次のステップへはコチラから。
divボックスの作り方

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Wed.04.21.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。