[CSS]実例から学ぶCSS3の効果的な使い方

CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。

Examples of CSS3 in the Wild

下記は各ポイントを意訳したものです。
元記事では他にも実例が紹介されています。

• border radius
• text shadow
• box shadow
• rgba
• opacity
• gradient

border radius

ボックスの角を丸くします。

CSS

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

角丸を使用したサイト

Twitter
各ボックスのコーナーに角丸を適用しています。

ZURB
ナビゲーションのコーナーに角丸を適用しています。

text shadow

テキストにシャドウを与えます。

CSS

text-shadow: 2px 2px 4px #000;

テキストシャドウを使用したサイト

A Different Design
テキストにクールなエンボスのエフェクトを適用しています。

Time2Project
マウスホバーでテキストシャドウを使用し、ハイライト効果をつけています。

box shadow

ボックスにシャドウを与えます。

CSS

box-shadow: 2px 2px 4px black;
-moz-box-shadow: 2px 2px 4px black;
-webkit-box-shadow: 2px 2px 4px black;

ボックスシャドウを使用したサイト

camen design
常に同じ位置に表示させるフッタがコンテンツエリアに対してスライドしている錯覚をボックスシャドウで与えています。

CSS-Tricks
ボックスにマウスホバーすると、シャドウで強調します。

rgba

RGBでカラーを指定し、不透明度（A）を変更します。

CSS

background: rgba(150, 25, 150, 0.5);

RGBAを使用したサイト

IGCP
ゴリラにRGBAを使用して半透明になっています。右の動画のボックスにも効果的に使用されています。

24 ways
サイト全体に半透明のエフェクトが使用され、透明感のある素敵なデザインです。

opacity

不透明度を変更します。

CSS

opacity: 0.5;

不透明度を使用したサイト

Bunton
不透明度を指定することでポートフォリオのコメントを表示しています。

31Three
マウスホバーで不透明度を使用して、各画像をライトアップさせています。

gradient

カラーにグラデーションを使用します。

CSS

background: -moz-linear-gradient(100% 100% 90deg, #1a1a1a, #808080)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a1a), to(#808080));

グラデーションを使用したサイト

Philadelphia FIRST
最も実用的な例です。グラデーションを画像ではなくCSS3にすることで、色の変更が簡単になり、トラフィックの現象も期待できます。