[CSS]簡単にCSS3の新しいプロパティを楽しめるチュートリアル

CSS3の新しいプロパティで、Firefox, Safari, Chromeなど現在のブラウザで実装を実現できるスタイルシートのチュートリアルをWeb Designer Depotから紹介します。

デモのキャプチャ

5 CSS3 Design Enhancements That You Can Use Today

オリジナルは下記のように実装されており、これにスタイルを適用します。

デモのキャプチャ

スタイルを適用しないオリジナル

1. カラーを透過

背景、ボーダー、テキストなどのカラーの不透明をコントロールします。

デモのキャプチャ
対応ブラウザ
Safari4, Fx3.0.5, Chrome1

IEでは、filterで実装できます。

2. ボックスを角丸

ボックスを角丸にします。

デモのキャプチャ
対応ブラウザ
Safari3, Fx1, Chrome1

3. テキストにシャドウ

テキストにシャドウをつけます。

デモのキャプチャ
対応ブラウザ
Safari3, Fx3.0.5, Chrome1

4. ボックスにシャドウ

ボックスにシャドウをつけます。

デモのキャプチャ
対応ブラウザ
Safari4, Fx3, Chrome1

5. 背景をマルチプル

背景に複数の画像を配置します。

デモのキャプチャ
対応ブラウザ
Safari1.3, Chrome1

SPECIAL BONUS: 画像を回転

画像を回転させます。

デモのキャプチャ
対応ブラウザ
Safari4, Fx3.5, Chrome1

sponsors

top of page

©2018 coliss