HTML5 – CSS3 mag

「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);

情報元：Designer Depot

この記事を共有 :

Related posts:

• FLASHをHTML5+JavaScriptで再構築するライブラリSmokescreen