CSS3で描画するOperaロゴ。これなかなか興味深いです。CSS3の新要素として、角丸ボーダー、グラデーション、ボックスシャドウの3つを使って描画に挑戦。出来上がったソースを各種ブラウザで表示してみるとこうなるYO、という一覧付きです。ちなみにSafariのWebkit環境では問題なく表示できました。けどOperaは微妙ですね。IEについては何も言うまい、といったところでしょうかｗ

Opera Logo with CSS

CSS3を使って表現する、各種ソーシャルメディアのアイコン。興味深いのが、これらのアイコンがCSS記述だけで表現されている点で、画像は1点も使ってません。デモサイトはこちら。ただしどのモダンブラウザでもオッケーというわけではなく、Safariでは角丸の表現が欠けており、またFirefox3.5ではグラデーションがうまく表示されませんでした。Firefox3.6環境で初めて作例のように表示されます。CSS3を思いっきり使った表現が、まだまだ実用的でない事が分かる作例です。けどFlickrやDeliciousのアイコンとかなかなか気合いが入ってます。

Create Social Media Icons in Pure CSS

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…)