2011年05月13日
CSS3で背景とグラデーションを同時に設定する
CSS3で背景とグラデーションを同時に設定するときは、
background:背景,グラデーション
のように指定する。
以下の指定で、Firefox,Chrome,IE6-8確認。
.radiusBtn a{
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* CSS3 */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-moz-linear-gradient(top, #80C4AA, #008955); /* Firefox */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-webkit-gradient(linear, left top, left bottom, from(#80C4AA), to(#008955)); /* Safari,Chrome */
-pie-background: url("../images/common/whitearrow.gif") no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* IE678 */
behavior: url("/PIE.htc"); /* CSS3 PIE */
}
リンク要素でhoverのときに動きをつけたい場合
(グラデーションをベタに):
.radiusBtn a:active, .radiusBtn a:hover {
background: #008955 url(../images/common/whitearrow.gif) no-repeat 7px 0;
-pie-background: #008955 url("../images/common/whitearrow.gif") no-repeat 7px 0;
}
IE6では別途リンク時の設定が必要。
* html .radiusBtn a:link, .radiusBtn a:visited {
color: #FFF;
text-decoration: none;
}
* html .radiusBtn a:active, .radiusBtn a:hover {
color: #FFF;
text-decoration: none;
}
background:背景,グラデーション
のように指定する。
以下の指定で、Firefox,Chrome,IE6-8確認。
.radiusBtn a{
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* CSS3 */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-moz-linear-gradient(top, #80C4AA, #008955); /* Firefox */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-webkit-gradient(linear, left top, left bottom, from(#80C4AA), to(#008955)); /* Safari,Chrome */
-pie-background: url("../images/common/whitearrow.gif") no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* IE678 */
behavior: url("/PIE.htc"); /* CSS3 PIE */
}
リンク要素でhoverのときに動きをつけたい場合
(グラデーションをベタに):
.radiusBtn a:active, .radiusBtn a:hover {
background: #008955 url(../images/common/whitearrow.gif) no-repeat 7px 0;
-pie-background: #008955 url("../images/common/whitearrow.gif") no-repeat 7px 0;
}
IE6では別途リンク時の設定が必要。
* html .radiusBtn a:link, .radiusBtn a:visited {
color: #FFF;
text-decoration: none;
}
* html .radiusBtn a:active, .radiusBtn a:hover {
color: #FFF;
text-decoration: none;
}
Posted by スポンジボブ at 13:08│Comments(0)│html
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
コメントフォーム