CSSのみでスライドして画像を切り替えるギャラリーを作る
ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。 Demo: CSS Sliding Image Gallery ギャラリー全体のマークアップは以下のような単純なもの。 <ul id="gallery"> <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li> <li class="image" id="second"><a href="#third"><img src="161-2.png"></a
CSSの:target擬似クラスによるクリックで開くフッター - os0x.blog
予備知識として、target擬似クラスと、そのメニューへの応用についてはCSS 3のセレクタ解説：:root、:not、:empty、:target - builderとCSS 3のセレクタ「:target」でタブメニューをつくる - builderが良記事だと思うのでそちらを。 で、今回の場合はさらに応用を利かせて、クリックしたら開いて、もう一度クリックしたら閉じるようにしてみました。まあ、要はコントローラー部分をtargetの中に入れて、targetの状態によって、表示されるアンカーが変わるようにしただけです。(↓↓の「カレンダー、最近の記事、コメント、トラックバックを見る」というアンカーをクリックしてみてください。(アンカーテキストが冗長過ぎる感じだけど、スペース余ってるしわかりやすいからこれでいいや。)) #blogfooter{ position:fixed; bottom:0p
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lllcolor.com
