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

Post on:2010年6月4日

border radius

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

CSS

<textarea name="code" class="css" cols="60" rows="5">
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
</textarea>

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

</textarea>

角丸を使用したサイト

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

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

text shadow

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

CSS

<textarea name="code" class="css" cols="60" rows="5">
text-shadow: 2px 2px 4px #000;
</textarea>

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

</textarea>

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

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

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

box shadow

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

CSS

<textarea name="code" class="css" cols="60" rows="5">
box-shadow: 2px 2px 4px black;
-moz-box-shadow: 2px 2px 4px black; 
-webkit-box-shadow: 2px 2px 4px black; 
</textarea>

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

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

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

</textarea>

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

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

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

rgba

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

CSS

<textarea name="code" class="css" cols="60" rows="5">
background: rgba(150, 25, 150, 0.5);
</textarea>

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

</textarea>

RGBAを使用したサイト

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

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

opacity

不透明度を変更します。

CSS

<textarea name="code" class="css" cols="60" rows="5">
opacity: 0.5;
</textarea>

opacity: 0.5;

</textarea>

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

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

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

gradient

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

CSS

<textarea name="code" class="css" cols="60" rows="5">
background: -moz-linear-gradient(100% 100% 90deg, #1a1a1a, #808080)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a1a), to(#808080));
</textarea>