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

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

サイトのキャプチャ

Examples of CSS3 in the Wild

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

border radius

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

CSS

角丸を使用したサイト

サイトのキャプチャ

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

サイトのキャプチャ

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

text shadow

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

CSS

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

サイトのキャプチャ

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

サイトのキャプチャ

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

box shadow

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

CSS

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

サイトのキャプチャ

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

サイトのキャプチャ

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

rgba

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

CSS

RGBAを使用したサイト

サイトのキャプチャ

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

サイトのキャプチャ

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

opacity

不透明度を変更します。

CSS

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

サイトのキャプチャ

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

サイトのキャプチャ

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

gradient

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

CSS

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

サイトのキャプチャ

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

sponsors

top of page

©2018 coliss