Как сделать градиент с помощью CSS
Последнюю неделю я очень много работал над дизайном своего блога и решил поделиться с людьми, которые хотят знать, как сделать градиент с помощью CSS.
Большинство веб-мастеров перестали делать что-то в графических редакторах и переключились на коды стилей, чтобы у них сайты открывались не по 5 часов, а быстро. Например я когда-то делал скрипт для сайта аэропорта. И форма, где заказывался авиабилет не была правильной из-за того, что css не совсем верным был. Потом я все исправил и покупать авиабилеты стало просто.
К сожалению, градиент с помощью css работает не во всех браузерах, поэтому нужно быть к этому готовым и купить авиабилет или забить болт на этот факт, или найти выход. Я ничего искать не стал, вроде все работает и ладно.
Итак, как сделать градиент с помощью CSS:
Для браузеров Safari, Chrome, FF нужно вставить этот код:
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
Это создаст линейный градиент от верхней точки к основанию.
Если вы хотите, чтобы в IE у вас тоже был градиент CSS, то для этого браузера подойдет вот такой вот код:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
В огненной лисе почему-то заработал у меня только такой:
background: -moz-linear-gradient(top,
#ccc,
#000);
Но я не верстальщик и я доволен тем, что он у меня вообще заработал. Боялся, что не будет градиент с
css
работать у меня.
Теперь самое интересно. Нужно совместить все эти коды в один, чтобы
css
градиент работал во всех вышеперечисленных браузерах, кроме оперы.
Совмещаем и получаем следующее:
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 и тогда градиент с помощью css будет работать на фоне вашего сайта.
Удачи в осуществлении.
Свежие комментарии