CSS3を使ったクールなテクニックと、そのデモを紹介したサイトをまとめた記事。単純に装飾面での新しい手法を見せるだけでなく、動きを使った表現が多く紹介されてます。どれもJavascriptなどは使わずに作られたPure CSSな作例です。Solar Systemなどを見ると、今までFlashを使って表現していたような事の多くが、いずれCSS3だけで行える事が分かります。とは言っても結局はユーザーのブラウザ環境に依存するので、これらの技術が本当の意味で実用的になるのはいつになるんでしょうね。
HTML5とCSS3でコーディングされたウェブサイト。新しいコーディング手法にぼちぼちシフトしている人もいるんじゃないでしょうか。自分も今やってる案件で、部分的にCSS3による装飾を導入してます。とは言ってもデザイン的にマストな項目にはやっぱり適用できず、Webkit & Mozilla環境に向けた無害な部分にのみ限定的に適用。対応ブラウザで見た時の「おおっ」って感じはなかなか楽しいんですが、本格的に導入しようとなると、やっぱり当分の間IEがいつものように足を引っ張ってくれるんでしょう。6フィート下に誰か埋めてください。
今までJavascriptを使って行ってきた表現を、CSSだけで行うという30の作例が紹介された記事。マウスオーバーによる拡大やドロップダウンメニュー、イメージマップ、Lightbox代替、コンテンツスライダー、Tooltip、アコーディオン、グラフ生成、アニメーション、タブ切り替えと、様々な表現が紹介されてます。こうして見るとCSSだけでも色々できちゃうんですね。とは言ってもIE6は未サポートだったり、ものによってはデメリットもあったりします。導入が簡単な代わりに使いどころが限定されるかもしれません。
CSS3だけで描画するグラフィカルなボタン。各色ともにa:link、a:hover、a:activeそれぞれが設定されています。CSSだけで描けるということは、つまり画像ファイルが1つも必要ないということ。ウェブ制作における生産性が大きく高まります。今日も仕事中に同僚とその話をしてたんだけど、結局のところその可能性を妨げてるのはIEで、IE早くなくなれとかそういう結論に至りました。世界共通のウェブ屋独特のアレですな。ちなみにデモサイトはこちらです。
HTML5とCSS3でコーディングされたテンプレートを集めた記事。次世代コーディングを行う上での素体として機能するフレームワークとも言える内容。CSS3に関しては装飾に関する拡充なので、今までの知識に上積みする事ができるとはいえ、HTML5に関してはちょっとしたワークフローの転換が必要かもしれません。何も知識がない状態からいきなり始めるよりは、こうしたフレームワークを土台にして勉強した方が案外近道かもしれませんね。
Webkit (Safari, Chrome)、Mozzira (Firefox)、IEで使えるCSSグラデーションの描き方。CSS3にてサポートされるグラデーションの描画機能は、今までみたくいちいちグラデ用の画像ファイルを用意しなくても済む点が便利。CSS3のサポートが遅れているIE環境への対策もできている点で、汎用的だと言えます。こちらのデモサイトから各ブラウザでちゃんと表示できるかどうか確認できます。
テキストの上にマウスを持ってくる事で、モリっと伸びてくるテキスト。CSS3のtext-shadowとtransformを使った新しい表現。シャドウのかけかたも、いわゆる通常よく見るドロップシャドウとは違ってて、なんていうか古くて新しい感じ。80年代のJudas Priestっぽいというか、いやこの例えは分かりづらいかｗ リンク部分のちょっとした装飾にイイですねこれ。
HTML5やCSS3に関するオンラインジェネレーターや、オンラインリソースをまとめた記事。CSS3に関するものでは、角丸ボックス、グラデーション、ナビゲーション、レイアウト、チートシート、ブラウザごとの対応表、カラーピッカーなどがあり、HTML5に関するものはギャラリーやチートシートなどがあります。CSS3で描くグラデーションとか、わりと記述がめんどくさいので、こうしたオンラインツールがあると便利ですね。
