エンジニアブログ

RSS

CSS3グラデーション

tweets master

こんにちは、コーディング工房です。
本日はCSS3によるグラデーションについて、ごく簡単ながら述べていきたいと思います。


このグラデーション機能が対応するエレメントは background と background-image です。
また、ブラウザによって記述が異なります。なので、moz系(Firefox)、webkit系(Safari、google chrome)の二つに分けて記述する必要があります。

グラデーションの配色指定は様々ありますが、私が実際によく使う配色指定を下記に記述します。

example.

 background: -moz-linear-gradient(top, #024b9e, #1a6ac0); /* Firefox */

 background: -webkit-gradient(linear, left top, right bottom, from(#f1c7a3), to(#f39648)); /* Safari,google chrome */

 

その他、グラデーションの比率や、方向を指定したりできるようです。
この機能を知るまでは、フォトショップなどで画像を切り出していましたが、今後多用される機会が増えると思います。

より詳しいCSS3グラデーションのリファレンスは

 http://www.css-lecture.com/log/css3/css3-gradient.html