[B! css3][tips] suzuki107のブックマーク

[CSS]画像を使用しないでイメージを作成するスタイルシートのテクニック集

コンテンツ生成用に画像をなるべく使用せずに、より多くのブラウザ対応を考慮した、画像を使用しないでイメージを作成するスタイルシートを紹介します。 CSS Generated Content [ad#ad-2] 小さい三角キャラクターアロートリッキーシャドウ下記の対応ブラウザは、IE8+, Fx3+, Chrome4+, Safari4+ です。各コードは主要箇所のみの抜粋です。小さい三角「New」の右上に添えてある小さい三角をCSSで実装します。

suzuki107 2011/03/08

リンク

CSSのみでスライドして画像を切り替えるギャラリーを作る

ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransf ormプロパティ)の組み合わせは色々できて楽しい。 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