0

Как сделать градиент с помощью CSS

Опубликовано: 30.12.2010 | Рубрика: Разное

Как сделать градиент с помощью CSS

Последние два дня на блоге велись небольшие работы по редизайну. Так что прошу извинения за временные неудобства – я думаю оно того стоило.

После проделанной работы я решил поделиться с Вами информацией, которую изучил за это время. А если быть точнее – как сделать градиент с помощью CSS. Он будет поддерживаться браузерами Chrome, Firefox (начиная с версии 3.6), Safari, IE. К сожалению Opera 10 еще не поддерживает CSS3 Gradient. Вот из-за этой гребанной Оперы я не сделал себе фон с помощью кода – пришлось все делать в Photoshop.

Для браузеров Safari, Google Chrome и других webkit-браузеров используем код, который создаст линейный градиент. Он будет направлен от верхней точки (top) #ccc к основанию (botton):

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Для Internet Explorer подойдет этот код:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 

Для Firefox (версия 3.6 и больше) будет работать только этот код:

background: -moz-linear-gradient(top,  #ccc,  #000); 

 

Теперь сделаем так, чтобы градиент отображался во всех вышеперечисленных браузерах, а для Оперы (и других браузерах, которые не поддерживают CSS 3) выводился нужный нам цвет.

background: #999; <em>/* for non-css3 browsers */</em>

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); <em>/* for IE */</em>
 background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); <em>/* for webkit browsers */</em>
 background: -moz-linear-gradient(top,  #ccc,  #000); <em>/* for firefox 3.6+ */</em>

css gradient

Как видите я не использовал у себя на блоге этот код по одной простой причине – я хочу чтобы мой блог корректно отображался как в новых так и в старых браузерах. Это скорее всего последний мой пост в 2010 году.

P.S. Люблю критику — поэтому решил поучаствовать в одной акции для молодых блогов. Посмотрим что мне скажут 🙂

Постовой:Как быстро проиндексировать сайт на WordPress

Предыдущая
«
Следующая
»