基本的なCSS3。
CSSの基本的機能を紹介していきます。
角丸
Twitterなどで利用されている角丸のCSSです。
全体を同じ大きさの角丸の場合(例：20px)
-moz-border-radius: 20px; /* Firefox */ -webkit-border-radius: 20px; /* Safari */ border-radius: 20px;
左右変える場合(上左右20px / 下左右10px)
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;
ボックス・テキストの影
ボックスの影
***box-shadouw: 横へのオフセット 縦へのオフセット ぼかしの大きさ
がプロパティです。
-webkit-box-shadow: 10px 10px 25px #ddd; /* safari */ -moz-box-shadow: 10px 10px 25px #ddd; /* firefox */ box-shadow: 10px 10px 25px #ddd; /* CSS3 */
テキストの影
テキストの場合も同じプロパティです。
text-shadow: 2px 2px 2px #fff;
RGBAによる不透明効果
CSS3のCSS Color Level 3ではRGBAが定義されていてレッド・グリーン・ブルー・透明度が指定できるようになった。
従来CSSで透明度を指定するには、
opacity: 0.9
ですが、文字にも透明度が掛かるなどの問題があります。
RGBAでは背景も加えてボーダーの透明度も指定できるようになりました。
background-color: rgba(255, 255, 255, 0.6); border: 5px solid rgba(211, 211, 211, 0.8);
因みに rgba(RGB色指定, 透明度) (＊透明度は0.8の場合は80%)
IEでは非対応で、ボックスの背景が無くなって基の背景が表示されてしまうので、
border: 5px solid #d3d3d3; background: #fff
と加えれば背景が白で表示されてボーダーが#d3d3d3です。
Webフォント
見る人のパソコンに作成者が使いたいフォントが入っていなくても表示ができます。
(サンプルではBrushedというフォントを使用しました。)
@font-face { font-family: Brushed; src: url(BRUSHED.TTF) format("truetype"); } body { font-family: Brushed; }
注意したいこと
まだ標準化されていないので、きちんと表示されないブラウザ等での対処をしないといけませんね。
テキストシャドウなどは非対応ブラウザで無害ですが、RGBAの半透明指定では背景が無くなる等見難くなってしまう物があるので中が必要ですね。
参考：Push Your Web Design Into The Future With CSS3
