[CSS] CSS Sprites with Inline Images – インライン要素として使うCSS Sprite
主にメニューなどに使われるCSS Spriteですが、こちらでは「インライン要素として使うのもイイYO！」という内容で紹介されてます。デモページはこちらから見る事ができますが、あぁなるほどなという印象。サイト内で多く出てくる、いわゆる使い回す機会の多い画像についてはこうするのもイイなぁと思いました。ソースについてもデモページ内で解説されてます。
Tag Archives: CSS
[CSS 3] Create a Letterpress Effect with CSS Text-Shadow – CSS3のtext-shadowを使ってプレス文字を再現する
CSS 3から使えるようになる新しいプロパティ、text-shadowを使って表現するプレス文字。text-shadowってまぁようするにテキストに対してドロップシャドウの効果を与えるプロパティなんですが、これの数値を工夫する事でプレス文字っぽく見せるというものです。作例では“text-shadow: 0px 2px 3px #555;”と指定されていて、この数値は左から順にシャドウのX軸の距離、Y軸の距離、ボカシ範囲、色を表しています。X軸の距離を0にするのがポイントみたい。Safariではかなり以前から先行実装されていたプロパティなので、CSS 3の新しい機能としては見る機会の多い表現ですね。
[CSS] 複数のボックス要素をまとめてセンタリングする方法
ひとつのDIVボックス内に複数のボックス要素があり、それらをまとめてセンタリングしたい時ってありますよね。実は今までやり方知らなくて、外側のDIVボックスにmargin-left付けたりして力業で対応してたんですが、方法を探してみたところちゃんとしたやり方があるようです。2つの方法を見つけたのですが、その内の1つを実際にソースを書く機会があったので、せっかくなのでダウンロードできるようにしておきました。そんなに面倒なプロセスでもないですが、よければ使ってください。
[CSS] Mastering CSS, Part 2: Advanced Techniques and Tools – CSSマスターへの道
CSSのテクニックが多数紹介された記事。この記事なかなか素晴らしい感じです。カレンダーやリスト、テーブルの装飾について。iPhone向けのCSSデザイン、フォームの装飾や機能拡張、グラフなどの視覚化、CSS3を使った新しいテクニック、CSS関連ツール、リソースといった内容が紹介されてます。ちなみにPart2というだけあって、Part1はこちらにあります。コーディング業務に携わる人にオススメ。
[CSS 3] 5 CSS3 Design Enhancements That You Can Use Today – 今日から使えるCSS3
今日から使えるCSS3。「You CSS 3で書いちゃいなYO！」みたいなノリでサクっと使えそうです。まぁ対応ブラウザの普及率とかソレ系の小難しい話は別としてｗ アルファ、角丸表現、テキストシャドウ、ボックスシャドウ、背景の複数適用、オブジェクトのロテイションといったCSS 3で使えるようになる代表的な表現について書かれてます。回転できるんスね。これ地味だけど色々使えそう。早く当たり前に使って大丈夫な規格になってほしいもんです。
[CSS] 50+ Nice Clean CSS Tab-Based Navigation Scripts – CSSベースのナビゲーションまとめ
CSSベースのナビゲーションメニューが50個集められた記事。各サムネールクリックで配布先に行けます。JSを使ったドロップダウンメニューや、タブ表現などがメイン。タブ表現はページ内における表示コンテンツの切り替えに最適です。リンク先でソースをもらってきて、そこから改変するというのも手ですね。
[CSS] Sticky (Fixed) SideNav Layout with CSS – CSSを使ってフレームのような表現を
CSSを使って、メニューバー固定のフレームのような表現をするというTips記事。昔よくありましたよね、サイドメニューが固定でコンテンツエリアだけがスクローラブルなサイト。今それをやると「えぇっ！？」って話になっちゃいますが、機能面を見ればあれはあれで使いやすいインターフェースだと思います。スクロールするとJSで追従してくるというUIもよく見かけるし。んでこの記事では、CSSだけを使ってサイドメニューを固定してます。デモはこちらから。スクロールすると右側のコンテンツエリアだけが動いて、左側のメニューバーは固定されてます。JSを使った表現のように動きこそありませんが、実用的で手堅い見せ方ですね。特に縦方向にページが長くなりがちなサイトに有効のような気がします。
[CSS 3] Push Your Web Design Into The Future With CSS3 – CSS 3でできること
CSS 3でできるようになる、新しい表現についてまとめた記事。この手の話題に敏感な人ならすでにご存じかとは思いますが、まぁおさらいという事で。角丸DIVの描画、ボーダー部にイメージを適用、DIVボックスやテキストへのドロップシャドウ、RGBにアルファ（A）を足した表現、カスタムフォントの適用などの方法とTipsが紹介されてます。CSS3で表現の幅が広がるのは嬉しい事なんだけど、いつになったら安心して常用できるようになるんでしょうね。きっとまたIEが足を引っ張るんだろうけど。