DN*BLOG

2011.4.1

CSS3でbackgroundにグラデーションと背景を表示させるときに注意すること。

gradient

ここ最近、見るようになってきた「CSS3」の記述。
なかでも、グラデーションや角丸はとても便利なコードの一つだとおもいます。

そこで、backgroundに背景とグラデーションを表示させるときの注意を。
とても細かい事です。。。

グラデーションのみの記述

.hogehoge a {
background:-webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#333));
}

上記みたいな感じになると思います。
これに背景(アイコン的な)も表示させたい場合は。

グラデーション+背景の記述

.hogehoge a {
background:url(../img/ico_sample.png) no-repeat 0 0,
-webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#333));
}

上記のような書き順で書きます。
表示させたい画像を指定し、コンマで区切り、グラデーションのコードを記述します。

画像の読み込みとグラデーションの記述が逆になると画像は表示されません。
マルチバックグラウンドと同様に書いた順から表示されていくようです。

サンプル

※SafariもしくはChromeで見てください。

CSS Love!!

こんな事ができます。
CSS3便利ですね!

FavoriteLoadingAdd to favorites

Category : CSS

関連する記事