「Designer Depot」からCSS3のチュートリアルをご紹介します。
何もスタイルを適用させていないオリジナルに次々とスタイルを適用させていきます。
■背景、ボーダー、テキストカラーを透過する
対応ブラウザ:Safari4, Fx3.0.5, Chrome1
サンプルコード
.topbox { color: rgb(235,235,235); color: rgba(255,255,255,0.75); background-color: rgb(153,153,153); background-color: rgba(0,0,0,0.5); border-color: rgb(235,235,235); border-color: rgba(255,255,255,0.65); }
IEにはfilterで実装
<!--[if IE]> <style type="text/css"> .pretty-box{ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0000050,endColorstr=#0000050); zoom:1; } </styel> <![endif]-->
■ボックスを角丸にする
対応ブラウザ:Safari3, Fx1, Chrome1
サンプルコード
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
■テキストにシャドウをつける
対応ブラウザ:Safari3, Fx3.0.5, Chrome1
サンプルコード
text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);
■ボックスにシャドウをつける
対応ブラウザ:Safari4, Fx3, Chrome1
サンプルコード
-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75); -moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75); box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
■背景に複数の画像を配置する
対応ブラウザ:Safari1.3, Chrome1
サンプルコード
background-image: url(astro-127531.png); background-image: url(astro-127531.png),url(Hubble-112993.png); background-repeat: no-repeat; background-position: bottom left; background-position: bottom left, top right;
■ボックスを回転する
対応ブラウザ:Safari4, Fx3.5, Chrome1
サンプルコード
-webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg);