[CSS] 100 Great CSS Menu Tutorials – CSSで記述するメニューのチュートリアルと作例 Pocket Tweet CSSで作られたメニューの作例と、そのチュートリアル。100もの作例が紹介されてます。ボタン、タブ形式、ドロップダウン、JSを組み合わせて動きで魅せるもの、アコーディオンなど、様々な形のメニューが紹介されてます。よくこれだけ集めたなぁという感じ。リンク先ではソースコードがDLできる場合も多いので、コーディングやデザイニングの参考になりそうです。 100 Great CSS Menu Tutorials

The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di

一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ

実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。

[CSS3] Layer Styles – フォトショップのレイヤースタイル風にCSS生成が行えるサイト Pocket Tweet これはスゴい。フォトショップのレイヤースタイルパネル風にCSS指定ができるウェブアプリケーション。フォトショ野郎には馴染みの深いパネルレイアウトで、説明などなくてもサクっと使えそうです。指定できるのはドロップシャドウ、インナーシャドウ、背景、ボーダー、角丸の5項目。背景の項目ではボックス要素内のグラデーションの指定もできます。指定した内容はリアルタイムに反映され、完成後はページ下部の「CSS Code」からCSSのコードをコピーできます。その際色指定に関して、HEX or RGBAの指定もできます。多機能かつ使いやすい内容なので、ソッコーでブックマークしました。ナイスです。 Layer Styles

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></