[CSS]実例から学ぶCSS3の効果的な使い方
Post on:2010年6月4日
sponsors
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
下記は各ポイントを意訳したものです。
元記事では他にも実例が紹介されています。
border radius
ボックスの角を丸くします。
CSS
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; </textarea> |
角丸を使用したサイト
Twitter
各ボックスのコーナーに角丸を適用しています。
ZURB
ナビゲーションのコーナーに角丸を適用しています。
text shadow
テキストにシャドウを与えます。
CSS
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> text-shadow: 2px 2px 4px #000; </textarea> |
テキストシャドウを使用したサイト
A Different Design
テキストにクールなエンボスのエフェクトを適用しています。
Time2Project
マウスホバーでテキストシャドウを使用し、ハイライト効果をつけています。
box shadow
ボックスにシャドウを与えます。
CSS
|
1 2 3 4 5 |
<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> |
ボックスシャドウを使用したサイト
camen design
常に同じ位置に表示させるフッタがコンテンツエリアに対してスライドしている錯覚をボックスシャドウで与えています。
CSS-Tricks
ボックスにマウスホバーすると、シャドウで強調します。
rgba
RGBでカラーを指定し、不透明度（A）を変更します。
CSS
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> background: rgba(150, 25, 150, 0.5); </textarea> |
RGBAを使用したサイト
IGCP
ゴリラにRGBAを使用して半透明になっています。右の動画のボックスにも効果的に使用されています。
24 ways
サイト全体に半透明のエフェクトが使用され、透明感のある素敵なデザインです。
opacity
不透明度を変更します。
CSS
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> opacity: 0.5; </textarea> |
不透明度を使用したサイト
Bunton
不透明度を指定することでポートフォリオのコメントを表示しています。
31Three
マウスホバーで不透明度を使用して、各画像をライトアップさせています。
gradient
カラーにグラデーションを使用します。
CSS
|
1 2 3 4 |
<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> |
グラデーションを使用したサイト
Philadelphia FIRST
最も実用的な例です。グラデーションを画像ではなくCSS3にすることで、色の変更が簡単になり、トラフィックの現象も期待できます。
sponsors
