グラフィックデザイン/Webデザイン・ポートフォリオ

前回の記事の続き。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等）での表記です。策定中なので今後変更になる可能性もあります。
やはりとても便利と言わざるを得ませんが、自分はデザイナーなので見た目重視の時があるため、細かい微調整といった最終的な「詰め」の部分をコード上でやるのは若干つらいかもしれないし、また画像のほうが制作上早い場合もあると思います。