on:2012年8月28日sponsorsパネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。Notificationダーク系のカラースキームが美しいGrowl風の通知パネル。Boxホバーで画像がスライドし、アニメーションで背景が変更します。CSS3アニメーションで切り替わるタブコンテンツ。CSS3チェックボックス・ラジオボタンを使ったアコーディオン。Versionアニメーションで開閉する垂直型のアコーディオン。Popoverアニメーションでふんわり表示されるツールチップ。Tagsホバーでカウンターがスライドするタグ。CSS3CSS3のダイナミックなエフェクトを伴ったスライド。Pseudo-Elementsアニメーションで動く写真を重ねたエフェクト。effectホバー時にサムネイル画像をキラっとさせるエフェクト。stylesOL要素のスタイル例。Treeホバーで子がハイライトするツリー。Tableホバーで拡大する価格表。コメントのスタイルタイムライン風スタイルのコメント。Badges通知バッジ付きのメニュー。Menuアニメーションで開閉するドロップダウン型のメニュー。Menuアニメーションでハイライトが移動するLavaLamp風メニュー。BreadcrumbsCSS3でスタイルするパンくず。Navigation明るいブルーを基調にしたインセット型のメニュー。CSS3ダイナミックなアニメーションで切り替わるシングルページ用エフェクト。webpageiPhoneページの打ち出しのダイナミックなスライド。CSS3ホバー時に天地からスライドするボタン。Gradientsホバー時にCSS3グラデーションがアニメーションするボタン。ButtonsホバーでポップアップするYouTube風のボタン。Buttonsアイコンフォントを使った3Dの円形のボタン。Buttonsメタルの質感が美しいボタン。umbrUIinput要素を画像も余分なHTMLも無しで美しくスタイル。Form変わった配置のボタンを備えたログインフォーム。Popoverホバーエフェクトを伴ったiOSスタイルのチェックボックス。FormApple風のメタリックなログインフォーム。Posts関連記事が見つかりませんでした。