наверх





Для создания простого градиента на CSS необходимо будет написать довольно таки много строк. Но что остается делать? Правильно, изучить все свойства и их значения, а если не получается, то использовать сервисы-генераторы!


Очень часто бывает такие случаи, когда нужно создать градиентовый фон сайту. Выглядеть будет красиво да и фон не будет одноцветным. Поэтому в этом примере я покажу, как создать обычный градиентовый фон посредством CSS3. Есть еще один способ, через использование градиентового изображения. Пока что рассмотрим, как создать через CSS3.

Градиент задается через свойство background. Но, так как существуют различные браузеры, то были созданы своих значения под определенные браузеры:

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


Значение свойства для Safari и Chrome. Схема написания значения следующая:

background: -webkit-gradient(ТипГрадиента, X Y начало, X Y конец, from(ЦветНачало), to(ЦветКонец));


Значение свойства для Firefox 3.6+. Схема написания следующая:

background: -moz-linear-gradient(top,  #ffffff,  black);

background: -moz-ТипГрадиента(Начало,  1ыйЦвет,  2ойЦвет);


Значение свойства для IE. Схема написания значения следующая:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='ЦветНачало', endColorstr='ЦветКонец');


IE поддерживает лишь один тип градиента: линейный, то есть либо сверху вниз, либо снизу вверх.

Так же еще одна особенность. Градиент не будет работать в браузерах Opera, поэтому нужно задать цвет фона, который будет вместо градиента, если пользователь будет просматривать ваш сайт, например, с Opera или других браузеров не поддерживающих CSS3 градиент. А если вы хотите создать градиентовый фон для Opera, то используйте градиентное изображение.

Итак, изучив все три значения, я думаю вы поняли, что вручную это все делать будет муторно и сложно. Поэтому существует сервис, который автоматически сегенерирует вам градиентовый фон! Называется сервис Ultimate CSS Gradient Generator, сервис от ColorZilla.




Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.