8.css3 ナビメニューのグラデーション Chap 5-4
学習書の「sample_a」(Chap5_1-4)を表示しソースコードを見て下さい。
ナビメニューのグラデーション
CSSの指定だけでグラデーションが作成出来る。
グラデーションのcss記述
1 2 3 4 5 6 7 8 9 10 11 12 13 |
nav ul {font-size: 0.75em; margin-top: 0; margin-bottom: 10px; margin-left: 0; padding-left: 0; height: 30px; background-color: #333333; border-radius: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), color-stop(50%,#444444), color-stop(50%,#333333), to(#555555)); background: -webkit-linear-gradient(#cccccc 0%, #444444 50%, #333333 51%, #555555 100%); background: -moz-linear-gradient(#cccccc 0%, #444444 50%, #333333 51%, #555555 100%); background: -o-linear-gradient(#cccccc 0%, #444444 50%, #333333 51%, #555555 100%); background: -ms-linear-gradient(#cccccc 0%, #444444 50%, #333333 51%, #555555 100%);} |
補足
9行目:一世代前のWebKit系ブラウザ対応
10~13行目:主要ブラウザ対応
10~13行目:主要ブラウザ対応
Internet Explorer 9 以下に対応
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--[if lt IE 10]> <style> nav ul {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777', endColorstr='#333333'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777', endColorstr='#333333')"} article section {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#dfdfdf')"} </style> <![endif]--> |