Как сделать градиент с помощью 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>
Как видите я не использовал у себя на блоге этот код по одной простой причине – я хочу чтобы мой блог корректно отображался как в новых так и в старых браузерах. Это скорее всего последний мой пост в 2010 году.
P.S. Люблю критику — поэтому решил поучаствовать в одной акции для молодых блогов. Посмотрим что мне скажут 🙂
Постовой:Как быстро проиндексировать сайт на WordPress