CSS3を使った実用的なスタイルシートのテクニックのまとめ

パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。
※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。

デモのキャプチャ

Growl Notification
ダーク系のカラースキームが美しいGrowl風の通知パネル。

デモのキャプチャ

Slide In Image Box
ホバーで画像がスライドし、アニメーションで背景が変更します。

デモのキャプチャ

Animated Content Tabs with CSS3
アニメーションで切り替わるタブコンテンツ。

デモのキャプチャ

Accordion with CSS3
チェックボックス・ラジオボタンを使ったアコーディオン。

デモのキャプチャ

Orman Clark’s Vertical Navigation Menu: The CSS3 Version
アニメーションで開閉する垂直型のアコーディオン。

デモのキャプチャ

Animated Profile Popover
アニメーションでふんわり表示されるツールチップ。

デモのキャプチャ

Sliding Tags
ホバーでカウンターがスライドするタグ。

デモのキャプチャ

Making an Impressive Product Showcase with CSS3
CSS3のダイナミックなエフェクトを伴ったスライド。

デモのキャプチャ

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
アニメーションで動く写真を重ねたエフェクト。

デモのキャプチャ

a CSS3 animated hover effect
ホバー時にサムネイル画像をキラっとさせるエフェクト。

デモのキャプチャ

CSS3 ordered list styles
OL要素のスタイル例。

デモのキャプチャ

CSS3 Family Tree
ホバーで子がハイライトするツリー。

デモのキャプチャ

CSS3 Pricing Table
ホバーで拡大する価格表。

デモのキャプチャ

コメントのスタイル
タイムライン風スタイルのコメント。

デモのキャプチャ

Menu with Notification Badges
通知バッジ付きのメニュー。

デモのキャプチャ

CSS3 Dropdown Menu
アニメーションで開閉するドロップダウン型のメニュー。

デモのキャプチャ

Pure CSS3 LavaLamp Menu
アニメーションでハイライトが移動するLavaLamp風メニュー。

デモのキャプチャ

CSS3 Breadcrumbs
CSS3でスタイルするパンくず。

デモのキャプチャ

Inset Side Navigation
明るいブルーを基調にしたインセット型のメニュー。

デモのキャプチャ

CSS-Only Responsive Layout with Smooth Transitions
CSSだけで実装したスムースにスクロールするレスポンシブ レイアウト。

デモのキャプチャ

Page Transitions with CSS3
ダイナミックなアニメーションで切り替わるシングルページ用エフェクト。

デモのキャプチャ

An explanation of the CSS animation on Apple's iPhone 4S webpage
iPhoneページの打ち出しのダイナミックなスライド。

デモのキャプチャ

Animated Download Button With CSS3
ホバー時に天地からスライドするボタン。

デモのキャプチャ

Animating CSS3 Gradients
ホバー時にCSS3グラデーションがアニメーションするボタン。

デモのキャプチャ

YouTube Popup Buttons
ホバーでポップアップするYouTube風のボタン。

デモのキャプチャ

Circular 3D Buttons
アイコンフォントを使った3Dの円形のボタン。

デモのキャプチャ

CSS3 Brushed-Metal Buttons
メタルの質感が美しいボタン。

デモのキャプチャ

umbrUI
input要素を画像も余分なHTMLも無しで美しくスタイル。

デモのキャプチャ

Dark Login Form
変わった配置のボタンを備えたログインフォーム。

デモのキャプチャ

iOS Style Popover
ホバーエフェクトを伴ったiOSスタイルのチェックボックス。

デモのキャプチャ

Apple Like Login Form
Apple風のメタリックなログインフォーム。

top of page

©2017 coliss