CSS3について （2）
前回の記事の続き。CSS3で作ったモノの中身の詳細のメモ
作ったもの
>>demo
※Safari/Winのみ対応
用意した画像
HTMLファイル
<div id="namecard"> <img class="reflect" src="image/logo.gif" width="97" height="73" /> <div class="txtarea"> <h1>19790209.com</h1> <h2>Graphic/Web Design</h2> <h3>Site Contents</h3> <ul> <li>[About] : Concept, Profile</li> <li>[Works] : Archive</li> <li>[Blog] : Output (Powered by Movable Type) </li> <li>[Contac] : M@il Form</li> </ul> <p class="label"><span>Portfolio<br />Site</span></p> </div> <br class="clear" /> </div>
CSSファイル
#namecard {
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.1, #FFF), to(#d9e2e8));
-webkit-border-radius: 10px;
-webkit-box-shadow: #999 0px 2px 4px;
}
.reflect {
-webkit-border-radius: 4px;
-webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(#FFF));
}
.label {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.label span {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-transform: rotate(30deg);
}
余計な記述は省いてます。
▼グラデーション
通常は画像を使うが、CSS3では「 -webkit-gradient() 」を使って表現。
自由度も高く、線形なら縦・横・斜めに表現できるほか、円形もOK。
└ 縦形：-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色), color-stop(追加位置, 色));
└ 円形：-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), to(終了色));
▼リフレクション（反射）
これも通常は画像を使っていましたが、「-webkit-box-reflect」を使うことで表現できます。
また、前述の「 -webkit-gradient() 」と組み合わせることでグラデーションマスクの効果が得られます。
└ -webkit-box-reflect:below 1px -webkit-gradient(linear, 開始位置, 終了位置, from(transparent), color-stop(追加位置, transparent), to(終了色));
└ 反転方向：上(above)・下(below)・左(left)・右(right)
▼ボックスシャドウ
ブロック要素の外側にぼかしを加えるドロップシャドウ効果です。
└ -webkit-box-shadow: 横方向のオフセット 縦方向のオフセット ぼかしの半径 影の色;
▼角丸
ボーダーの角を丸くします。個別に四隅の値を設定することもできます。
└ 四隅：-webkit-border-radius: 角丸の半径;
└ 左上：-webkit-border-top-left-radius: 角丸の半径;
└ 右上：-webkit-border-top-right-radius: 角丸の半径;
└ 左下：-webkit-border-bottom-left-radius: 角丸の半径;
└ 右下：-webkit-border-bottom-right-radius: 角丸の半径;
▼文字の回転
文字を変形させます。回転させる場合は「rotate(deg)」で数値を指定します。
└ -webkit-transform: rotate(回転させる数値deg);
まとめ
今回はWebkit系ブラウザ（Safari・Google Chrome等）での表記です。策定中なので今後変更になる可能性もあります。
やはりとても便利と言わざるを得ませんが、自分はデザイナーなので見た目重視の時があるため、細かい微調整といった最終的な「詰め」の部分をコード上でやるのは若干つらいかもしれないし、また画像のほうが制作上早い場合もあると思います。