Pages Navigation Menu

Seo, заработок в интернете, wordpress, блогосфера и личные мысли

Как сделать градиент с помощью 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 будет работать на фоне вашего сайта.

Удачи в осуществлении.