Linear-gradient
Как то в одной из работ встала задача сделать фон страницы градиентом, вот в таком духе:
Задача – сделать это на CSS3.
HTML:
<div class=“wrapper clearfix”>
<div id=“container”>
…
</div>
</div>
</body>
Firefox
background-image:
url(“../img/top.png”),
-moz-linear-gradient(bottom, #EB8800, #FFE400 50%);
}
Помимо градиентов из возможностей CSS3 я еще использовал здесь множественные бекграунды, подробнее об этом в другой раз, суть в том что можно писать значения через запятую, в данном случае сначала картинка для шапки, потом сам градиент.
Немного подробнее о синтаксисе:
bottom – определение начальной точки градиента, работает также как позиционирование в background image, может быть left, center и так далее. Можно определять в углах, например 90deg, это будет идентично bottom, -90deg – top и так далее.
#EB8800 – начальный цвет
#FFE400 50% – второй цвет и точка остановки, то есть второй цвет на середине страницы по вертикали остановится.
Цветов может быть больше двух.
Webkit
background-image: url(“../img/top.png”),
-webkit-gradient(linear, 0% 50%, 0% 100%, from(#FFE400), to(#EB8800));
}
linear – определение типа градиента, может быть еще и radial.
0% 50%, 0% 100% – направление градиента, в данном случае – центр и нижняя точка. Этими двумя точками мы “рисуем” направляющую градиента. Может быть задано в ключевых словах – left, top … В webkit нет возможности задать угол поэтому наклонный градиент нужно задавать смещая точки направляющей. Например – 50% 50%, 0% 100%. На мой взгляд как то муторно и неочевидно, проще написать угол как в варианте Firefox.
from(#FFE400), to(#EB8800) – задание цветов. В моем случае первый цвет, желтый, начинается от центра страницы, соотвественно выше, от верха до центра, он же. Есть еще другой способ задать цвета – при помощи color-stop(0.5, цвет). В моем случае это будет – color-stop(0.0, #FFE400), color-stop(1.0, #EB8800). Первое значение у color-stop 0.0 потому что я уже определил что у меня первый цвет начнется из центра. Вообщем вариант webkit имеет больше возможностей чем мозилловский, но уж больно ядрено закручено.
IE
Самое интересное, как же теперь эти чудеса привить старым добрым импотентам ) Натолкнулся недавно на такую вот таблетку для IE – PIE, скрипт который делает возможным использование некоторых прелестей CSS3.
Итак, что нужно для IE:
-pie-background:
url(“img/top.png”) left top repeat-x,
linear-gradient(bottom, #EB8800, #FFE400 50%);
behavior: url(css/pie.htc);
}
Свойство -pie-background обрабатывается скриптом PIE со значением идентичным значению для firefox. Обратите внимание что нельзя использовать -pie-background-image, допустимо только короткая запись, подробно – в документации PIE.
Для PIE желательно указывать позиционирование, relative или absolute.
-pie-background можно использовать не только для градиентов но и для фоновых изображений, цвета. В случае с фоновыми картинками PIE хорош тем что понимает PNG32.
Если вы назначили элементу градиент при помощи pie а потом, например на ховер, пытаетесь перекрасить его просто цветом (background-color) то у вас ничего не выйдет. Надо использовать опять -pie-background:
-pie-background: #FFF;
behavior: url(“css/pie.htc”);
}
Другой минус скрипта PIE в том что он может тормозить и неслабо. У меня случались баги когда с элементом одновременно имеет дело PIE и джаваскрипт. Короче говоря с IE полного счастья быть не может.
Еще одно наблюдение – PIE не работает если вы применяли к элементу какие либо фильтры, типа filter: progid:DXImageTransform.Microsoft.gradient…
Результирующий CSS
background-image:
url(“../img/top.png”),
-moz-linear-gradient(bottom, #EB8800, #FFE400 50%);
background-image:
url(“../img/top.png”),
-webkit-gradient(linear, 0% 50%, 0% 100%, color-stop(0.0, #FFE400),
color-stop(1.0, #EB8800));
-pie-background:
url(“img/top.png”) left top repeat-x,
linear-gradient(bottom, #EB8800, #FFE400 50%);
background-repeat: repeat-x;
min-height: 100%;
behavior: url(css/pie.htc);
}
Было бы корректнее применить эти стили к body но к сожалению PIE не работает в этом случае.
По теме:
Ultimate CSS Gradient Generator
PIE: Supported CSS3 Features
Подправь pie.htc ручками как тебе надо