Категория:
Опубликовано:
Кроссбраузерный градиент на CSS
Фон в виде градиента основанный на CSS ранее был мечтой любого веб-дизайнера. К счастью прогресс не стоит на месте, и уже сейчас, все современные браузеры работают с CSS3, в котором это вполне осуществимо с помощью свойств background - linear-gradient или radial-gradient. Но есть друзья, которые по тем или иным причинам пользуются WEB-динозаврами. Специально для таких решаем эту задачу кроссплатформено.
Рассмотрим на примере линейного градиента:
background: linear-gradient(to top, #bf0a07, #e27a7a)HTML:
<div class="block">
<p>Градиент</p>
</div>
CSS блока (для наглядности):
.block{
margin: 50px;
width: 150px;
height: 50px;
text-align: center;
border: 1px solid #ccc;
color: #fff;
}
CSS (градиент):
background: #e27a7a; /* Для старых браузеров - без градиента */
background: -moz-linear-gradient(top, #e27a7a 0%, #bf0a07 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e27a7a), color-stop(100%,#bf0a07)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e27a7a 0%,#bf0a07 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e27a7a 0%,#bf0a07 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e27a7a 0%,#bf0a07 100%); /* IE10+ */
background: linear-gradient(to bottom, #e27a7a 0%,#bf0a07 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e27a7a', endColorstr='#bf0a07',GradientType=0 ); /* IE6-9 */
Пример:
Для быстрой генерации градиентов есть специальные сервисы:
Вот и все. Никаких тебе вырезаний картинок. © Love Is Gone. Just Sex.
Комментарии
Эх, только мечтаю про времена, когда все будет по W3C
О да +++
Боюсь не дожить до этого ((
Прорвемся!