jQueryとCSSで作るドロップダウンメニューが25例まとめられた記事。出現プロセスや階層化の有無、並び方やトランジションなど、ドロップダウンにも色々あるのが分かります。これだけの数が揃ってると、だいたいどんな作例でも見つかりそうです。ベースとするスクリプトを探す際に便利な記事。
25 Beautiful Examples of jQuery and CSS Drop-down Menu Tutorials
CSS3だけで描画するボタン。いわゆるPure CSSボタンです。まずHTML書いて、それから少しずつCSSを記述していく過程を、スクリーンショットを交えて紹介している点が興味深い。ある行を記述すると絵的にどう変わるのか、そのあたりがよく分かります。iPhoneやiPadなどのiOS端末や、Andoroid端末を対象にしたサイトではすでに実用的な技術なので、ぼちぼち覚えていきたいところ。
CSS3で表現できるボックス要素の角丸化だけど、画像に適用したところ思ったような効果が出せなくて、CSS TrickとjQueryを使って解決したYO！という内容の記事。記事を見ると、画像の四隅を角丸化したけど、ブラウザによっては角が丸くならなかったりボーダーが消えたりしたからそれを修正。その後jQueryを使ってドロップシャドウを加える手順とデモが紹介されてます。いずれ使う事があるかも、と思ったので備忘録。
PureCSSなイメージギャラリー。スライドやClick to view largeなどのリッチな表現が、JSなしで実装できる方法を紹介してます。PC環境ではなかなか環境が整ってませんが、スマートフォン市場じゃほとんどの端末がWebkitベースのブラウザを搭載しているので、HTML5やCSS3といった次世代のコーディングは、意外とモバイル環境から浸透していくのかもしれません。
ウェブにおけるナビゲーションというと、機能的にもデザイン的にも様々な手法がありますが、この記事では色々な作例とそのチュートリアルがまとめられています。ドロップダウンメニューやタブ、オンマウスによるフェード表現など、機能面やデザイン面、またはその両方において凝った作りのナビゲーション類がまとめられているので、メニュー制作のヒントになりそうです。
CSS3でできる事と、すでに実装済みのサイト例を紹介した記事。デモサイトでは、新しく可能になる表現が色々とまとめられてます。記事下部にあるサンプルサイト紹介はなかなかホットです。すでにCSS3は現行の技術なんですね。「使うか使わないかの議論はあるけど、もうブラウザの対応を待ってる時じゃないYO！」みたいな内容で、実際俺も最近じゃ仕事でちょこちょこ使います。もちろん非対応ブラウザでクリティカルな差異が出ないような場所に限ってですが。
このサイト素晴らしい。CSS3を使ったトランジションやトランスフォーム、アニメーションに関しての解説とチュートリアルをまとめたサイト。CSS3の新機能ごとに作例とチュートリアルが用意されているので、とても分かりやすいです。例えば変形に関しては、元がテキストデータであるため、テキスト情報を失わずに変形させられる点がイイですね。左のサムネールのキューブも、ちゃんとテキスト情報を残したままでグリグリできます。あと今までJavascriptを使って表現していたフェードやスライドなどのアニメーションも、CSS3だけで描画できるようになります。
CSS3を使ったクールなテクニックと、そのデモを紹介したサイトをまとめた記事。単純に装飾面での新しい手法を見せるだけでなく、動きを使った表現が多く紹介されてます。どれもJavascriptなどは使わずに作られたPure CSSな作例です。Solar Systemなどを見ると、今までFlashを使って表現していたような事の多くが、いずれCSS3だけで行える事が分かります。とは言っても結局はユーザーのブラウザ環境に依存するので、これらの技術が本当の意味で実用的になるのはいつになるんでしょうね。
