以前、このブログでもWebフォントについて書いていましたが、色々なところでHTML5とCSS3についての記事を見かけることが多くなりました。
様々なリファレンスがありますが、とりあえずこのブログでは手っ取り早く簡単に使えるCSS3の機能を実際に使ってみました。
CSS3を利用して簡単にボックスを装飾
CSS3の角丸、ボックスシャドウ・グラデーションプロパティを使ったボックスデザイン。CSS3非対応ブラウザ(IEなど)で見ると、ただの四角い枠にしか見えません。
スタイルシートでの実装方法は…
[css] /* ▼角丸を指定 */border-radius: 8px;
-webkit-border-radius: 8px; /* Safari, Chrome対応 */
-moz-border-radius: 8px; /* Firefox対応 */
/* ▼ボックスシャドウ */
box-shadow: #666 0px 2px 4px;
-webkit-box-shadow: #666 0px 2px 4px; /* Safari, Chrome対応 */
-moz-box-shadow: #666 0px 2px 4px; /* Firefox対応 */
/* ▼背景グラデーション */
background: #FFFFFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00AEEF), to(#5ED3F0)); /* Safari, Chrome対応 */
background: -moz-linear-gradient(#00AEEF, #5ED3F0); /* Firefox対応 */
[/css]
FirefoxやApple Safari、Google Chromeにおいては上記の方法で実装可能ですが、今のところIE(Internet Explorer)ではCSS3非対応のため、このままでは上のボックスのような表現は不可能です。
これらのCSS3プロパティをIEに対応させるには？
基本的にIEではCSS3は非対応なのですが、colissさんでも紹介されているCSS3 PIEを使えば、たった一行のコードを追加するだけでIEをCSS3対応にさせることができます。※対応ヴァージョンはIE6/7/8のみ
» CSS3 PIE: CSS3 decorations for IE
CSS3 PIE適応前のスタイルシート
[css] #myElement {background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}[/css]
CSS3 PIEを適応させるには…
[css] #myElement {…
behavior: url(PIE.htc);
}[/css]
CSS3 PIE適応前のスタイルシートの最後に、behaviorスクリプトとしてPIE.htcを指定します。
» PIE.htcのダウンロードはこちら
下記がCSS3 PIEがサポートしているCSS3プロパティで、現在他のプロパティへの対応も開発中らしいです。
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
今回はCSS3の中でも簡単なものから使ってみましたが、他にも実用的だと思ったものは、このブログや自分のサイトでも積極的・実験的に利用していきたいです。
コメントを残す