[CSS]簡単にCSS3の新しいプロパティを楽しめるチュートリアル
Post on:2009年9月18日
sponsors
CSS3の新しいプロパティで、Firefox, Safari, Chromeなど現在のブラウザで実装を実現できるスタイルシートのチュートリアルをWeb Designer Depotから紹介します。
5 CSS3 Design Enhancements That You Can Use Today
オリジナルは下記のように実装されており、これにスタイルを適用します。
スタイルを適用しないオリジナル
1. カラーを透過
背景、ボーダー、テキストなどのカラーの不透明をコントロールします。
- 対応ブラウザ
- Safari4, Fx3.0.5, Chrome1
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> .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); } </textarea> |
IEでは、filterで実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> <!--[if IE]> <style type="text/css"> .pretty-box{ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0000050,endColorstr=#0000050); zoom:1; } </styel> <![endif]--> </textarea> |
2. ボックスを角丸
ボックスを角丸にします。
- 対応ブラウザ
- Safari3, Fx1, Chrome1
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; </textarea> |
3. テキストにシャドウ
テキストにシャドウをつけます。
- 対応ブラウザ
- Safari3, Fx3.0.5, Chrome1
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> text-shadow: -2px 2px 10px rgba(0,0,0,.5); </textarea> |
4. ボックスにシャドウ
ボックスにシャドウをつけます。
- 対応ブラウザ
- Safari4, Fx3, Chrome1
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> -webkit-box-shadow: 0 0 10px rgb(0,0,0); -moz-box-shadow: 0 0 10px rgb(0,0,0); box-shadow: 0 0 10px rgb(0,0,0); </textarea> |
5. 背景をマルチプル
背景に複数の画像を配置します。
- 対応ブラウザ
- Safari1.3, Chrome1
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> 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; </textarea> |
SPECIAL BONUS: 画像を回転
画像を回転させます。
- 対応ブラウザ
- Safari4, Fx3.5, Chrome1
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); </textarea> |
sponsors
