« Loading...の「...」をアニメーションさせるjQueryのプラグイン | トップページ | jQueryでページネーションを実現するプラグイン »

2010年11月22日 (月)

CSS3で作る 下からスライドしてくるボックス

今回はカーソルを合わせると下から中身が上がってくるボックスのご紹介です。
デモページ

このままファイルを使うのであれば、h5タグの中には最初から表示したい文章を
divタグの中にスライドアップしてくる内容を入力し、nth-childの中の数字を調整すればOKです

それほど複雑な内容ではないので、考え方を見ることで応用していきたいと思います
CSSファイルは基本設定のみなので、index.htmlを見ていきます
このファイルには、sectionタグが使用されていますので、
HTML5非対応ブラウザだと見た目がかなり残念なことになってしまいますのでご注意ください


Slide01
.slide-up-boxes a { height: 65px; overflow: hidden; }
.slide-up-boxes a:hover h5 { margin-top: -65px; }

ボックスの大きさ分上にスライドさせ、はみ出した部分をoverflowで隠すことで、
ボックスの中だけがスライドしているように見えます
その際に、上に消える部分は透明度を変化させ消えるように
下から出てくる部分は徐々に現れるようにすることで、箱の中をスコンと上がってくるように見えます

旧ブラウザにも表示だけは対応させようと思う場合には、divタグをaタグで囲うといった構文はできませんので、
spanタグとdisplayを駆使することで同じ見た目を作ることは可能です

構文が複雑になるので、擬似クラスnth-child()やsectionタグが優れているなと感じます
CSS3が一般的になるのはもう少し先でしょうが、早いうちに慣れて行きたいですね

|

« Loading...の「...」をアニメーションさせるjQueryのプラグイン | トップページ | jQueryでページネーションを実現するプラグイン »

css」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/37783192

この記事へのトラックバック一覧です: CSS3で作る 下からスライドしてくるボックス:

« Loading...の「...」をアニメーションさせるjQueryのプラグイン | トップページ | jQueryでページネーションを実現するプラグイン »