CSS3プロパティ

テキストの装飾

text-shadow

テキストに影をつける

text-shadow:x方向の距離  Ｙ方向の距離  ぼかし幅  影色; 

1 ドロップシャドウ

text-shadow: 2px 2px 3px #999;

2 グロー（光彩）

color: #FFF;
text-shadow: 2px 2px 3px #999;

3 べベル（浮き出し）

color: #CCC;
text-shadow: -1px -1px 0 #FFF,1px 1px 0 #AAA;

4 エンボス（彫り込み）

text-shadow: -1px -1px 0 #AAA,1px 1px 0 #FFF;

5 ストローク（袋文字）

text-shadow: 1px 1px 0 #999,
-1px  1px 0 #999,
 1px -1px 0 #999,
-1px -1px 0 #999;

6 ネオン

text-shadow: 0 0 5px #FFF,
0 0 13px #F03,
0 0 13px #F03,
0 0 13px #F03,
0 0 13px #F03;

rgba

要素の背景色だけを半透明にする

rgba(R,G,B,透明度)
 

background: rgba(255,255,255,0.2);

opacityプロパティでも同様のことができるが、opacityでは半透明にした上に文字が乗ると、その文字も半透明になることが異なる。

ボックスの装飾

border-radius

要素を角丸にする

border-radius:角丸の半径;
 

border: solid 6px #FFF;
border-radius: 20px;

画像の正方形の枠に50％指定で正円にできる。

背景画像の表示指定

background-size

背景画像の表示サイズを指定

background-size:contain | cover | 横  縦;

background-size:contain;

画像の比率を変えないで、画像が最大の大きさになるように全体が要素の中に表示される。

background-size:cover;

画像の比率を変えないで、画像は縦または横の大きさを100%ととして表示される。

background-size:100% 100%;

縦横100%指定の場合は、画像の比率を変えて縦横ともに要素の大きさに合わせて表示される。

background-size:450px 300px;

ピクセル指定では、指定したサイズに拡大・縮小して固定サイズで表示される。