CSS3のtext-shadowプロパティを使って美しくデザインされたサイトのまとめ記事。Safariではかなり以前のバージョンからすでに実装されていたので、CSS3の新しい機能の中ではわりとおなじみの機能ですね。このプロパティを使えば、ドロップシャドウの他にもエンボスっぽい演出もできるので、画像に頼る機会が減りそうです。MetalabとかMark Jardineあたり特に好き。

30 Examples Of CSS Text Shadows Out In The Wild

デザイナーなら知っておくべきCSSテクニック50、という記事。最近流行りのCSS3がらみではなく、CSS2.1ベースで実現できる各種Tipsといった内容です。紹介されている量や質は悪くないんですが、なんかサムネールの縦横比が変ですねこの記事。と思って画像単体で表示してみたら、HTML側で引き延ばしてました。見た目はアレですが、内容としては確かにデザイナーが知っておいて損はないものでした。

50+ CSS Techniques Designers Should Know

CSS3を使ってこんな事ができるよ、というよりは、このサイトのココはCSS3で表現されているよ、という形での紹介記事。例えばエンボス加工のように見えるテキストエフェクト、ボックスの角を丸くしてドロップシャドウを付ける、DVD盤が回りながら出てくる、サイト内の動きをCSS3で描画している、テキストシャドウなど、CSS3を使った様々な表現とその作例を見る事ができます。また記事下部では、どんな時にCSS3を使うべきなのかについての解説もあります。時期的になかなかホットです。

CSS3 Examples and Best Practices

印刷用のCSS記述においてやっておくとイイよ、という内容の記事。ナビゲーションメニューを消す、コンテンツエリアを広げる、背景色やテキストカラーをなくす、フォントの種類や大きさに注意する、ブログであればコメント表示を消す、プリントアウトした時にだけ表示されるメッセージを追加するといった内容が紹介されてます。プリントアウトする際、多くのユーザーはそのサイト内の情報だけを求めているので、ナビゲーションをなくしてコンテンツエリアを広くするというのは親切ですね。

10 Tips for Better Print Style Sheets

CSS関連の便利なウェブアプリケーションが紹介された記事。いわゆるCSS補助ツールですね。classやIDの抽出、外部CSSをインライン化するツール、CSS Spriteジェネレーター、カラーピッカー、CSSファイルのコンバインツール、グリッドシステム、斜めや円形のグリッド作成ツールなどがその内容。CSSの上級テクニックを簡単に実現するためのツールが多い印象。オンラインツールを使って効率的に作業をしたい場合にナイスな記事。

12 really useful CSS tools

クールでいまどきな感じの、CSSナビゲーションが30例紹介された記事。ところでCutting Edgeって最先端って意味なんですね。最先端って言うだけあって、モダンな印象のデザインが多いです。最近はただ単にデザインに凝るだけではなく、JSを組み合わせてドロップダウンしたり、オンマウスでポップアップを出現させて簡単な説明を表示したりして、機能面で工夫されたナビゲーションを多く見ます。ようするに装飾と同じくらい機能美が求められるんでしょうね。ナビゲーションデザインする際のネタ帳になります。

30 Cutting Edge Examples Of CSS Navigation

jQueryとCSSを使って行うクールな表現がまとめられた記事。CSSで装飾するのはコレ系のテクニックでは当然のことなので、いわゆるクールなjQueryプラグイン、みたいな内容です。スライダー、CSSスイッチャー、アコーディオン、動きのあるホバー表現、フェードを使ったホバー表現、ポップアップ、CSS Sprite、ドロップダウンなどが紹介されてます。サイト内でJSを使ってリッチな表現を行いたい場合にナイスな記事。

14 jquery and CSS demos I wish I knew much before

今年はCSS3関係で結構な盛り上がりが期待されるところではありますが、制作者にとったら「まーた新しい事覚えなきゃなんないのか・・・」みたいな部分もあるにはあります。まぁウェブで食ってく事をチョイスした時点で、こればっかりは逃れられませんが、そこが楽しいところでもあります。というわけでCSS3を学ぶ際に有効な、ベストチュートリアルがまとめられた記事がこちら。CSS3を使った新しい表現の紹介から、過去の記述を簡略化する方法、チートシートなど色々あります。HTML5と併せて、今年からまた過渡期に入っていくような感じなので、ウェブに携わる人間として気にしていきたいところです。

10 Best Tutorials To Learn CSS3

CSSとJavascript。以前はHTMLさえ書ければウェブデザイナーと言われましたが、最近じゃこのあたりも含めて理解できないとウェブデザイナーとは言えないそうです。というわけでCSSとJSを使った、使えるテクニックをまとめた記事。オンマウス時のアクションをJSで工夫したものや、ひとつの画像をウマく使い回すためのTips、動きを使って表現するJSなど、リッチな表現を目指す際に有効なテクニックが色々紹介されてます。各リンク先では細かな実装方法などの解説もあり勉強になります。

45 Powerful CSS/JavaScript-Techniques

テキストに影を付けるtext-shadowプロパティですが、少し前まではSafariのみが対応していて、マックオタのサイトオーナー以外にはあまり使われる事はありませんでした。けどFirefox 3.5とOpera 9.5がCSS3での表現に一部対応したことで最近じゃチラホラ見るようになり、テキストで表現するタイポグラフィーのツールとしても使われる機会が多くなったような機がします。というわけでText-Shadowプロパティを使った、CSS3による指定方法を個人的にまとめてみました。

(continue reading…)

CSSだけで描くアニメーション。デモページにはJSへのリンクがありますが、ここでアニメーションさせているのはCSSだけ。こんな事できるんですね。原理は簡単で、黒い四角を描画した上で、その上を透過PNGを使ってマスクをかけてます。んでマスクの方を回転させてるという仕組み。ただしこの記述でアニメーションできるのはWebkit環境のみ。GeckoとかIE環境で再現できないという点では、アニメーションの手段として現実的でないのは確か。けどCSS記述の内容とかを見ると、なんだかオラわくわくすっぞ、的なものを感じません？　ちなみにこの記事の導入部分、なかなかオモろいです。作者の8年前の「CSS？　なにそれおいしいの？」という時代の話について語られてます。テーブルレイアウトからこの時期にCSSレイアウトへと切り替えた世代にとっては懐かしい話です。

CSS Animations

ロゴや広告、写真やウェブなど、あらゆるデザイン物のギャラリーサイトであるCreatticaのCSSタブ内より、クールにデザインされたサイトだけを集めた記事。言ってみればただのギャラリーサイト抽出モノなんですが、ここで紹介されているサイトはどれもクオリティが高いです。よく練られたレイアウト、細部まで気配りの行き届いたデザイン。見ているだけで「それ今度やってみよう！」って思える内容がいくつか。最近のサイトらしく、JSがの出現度も高い印象です。

35 CSS-based Layouts that Look Awesome