Сегодня я расскажу о том, как сделать css градиент. Как сделать градиент background традиционным способом и используя только CSS 3. Также, в этой статье мы рассмотрим замечательный сайт www.colorzilla.com а точнее два его сервиса. Эта статья будет особенно полезна веб дизайнерам, которые устали от стандартных решений и ищут новые возможности, чтобы реализовать амбициозные проекты. Прочитав эту статью, Вы научитесь узнавать точное значение цвета на любом сайте, а также создавать градиент через CSS 3 в три клика, и создавать градиент традиционным методом с помощью 1px рисунка.

Зачастую, если в макете используется градиент, он линейный и идет строго горизонтально или вертикально, для того, чтобы при верстке страницы не возникало трудностей. В основном, градиент background не реализуется через возможности CSS 3, потому что это достаточно неудобно и сложно. Но после прочтения этой статьи, градиент background с помощью CSS 3 можно будет делать в три клика мышкой.

Как сделать градиент background (фон) с помощью 1px рисунка

Как делается градиент background, традиционным способом:

У нас есть слой, которому мы присвоили класс «gradient»

Топ коментаторов

который к примеру будет шапкой блока с коментариями. Нашему класу в стиле мы указываем высоту и ширину.

 .gradient height:50px; width:300px;}

Для того, чтобы в нем сделать градиент background в слое «gradient», нужно вырезать полоску. Назовем ее, например, bg1.jpg.  Ширину  принято задавать 1px. За клонирование (размножение) по осям отвечают параметры repeat-y и repeat-х. Ленивый новичок в web дизайне сразу спросит: » -Не легче ли вырезать  jpg нужного размера, например, 300px на 50px и задать background одним рисунком ?» Легче,  но так делать не правильно, потому что всегда нужно помнить про оптимизацию графики на сайте.

Остаеться в стиле класса  «gradient»  дописать следующее:

.gradient {height:50px; width:300px; background:url(../images/bg1.jpg) repeat-x;}

Вот что у нас получиться :

гадиеннтній background

Теперь я расскажу вам про colorzilla.com, который понадобится нам для следующего примера. Сайт на английском, но обладая минимальными познаниями, вы сможете легко воспользоваться его услугами. Что приятно отметить, сервис и плагин абсолютно бесплатны, а сам сайт лишен надоедливой рекламы. Плагин устанавливается на Firefox и представляет собой всем знакомый инструмент из фотошопа — «пипетка». Кроме определения цвета, плагин имеет еще ряд функций, но на этом останавливаться не будем. Это на самом деле очень удобно, серфя нет в поисках вдохновения, вам может понравиться какой-то цвет, его можно узнать через цсс, а если это рисунок, то заскринить и определить в фотошопе, плагин дает нам возможность узнать цвет через секунду после двух кликов мышкой.

градиентный background с помощью только CSS 3

 Теперь второй пример. Скопируем слой «gradient» переименуем в ее в слой  «gradient2» и сделаем у него градиентный background с помощью CSS 3.

Топ коментаторов

 Заходим colorzilla.com/gradient-editor/ создаем нужный нам градиент, также, что важно, можна сделать его под углом 45 градусов. Сверху нам предлагают готовые градиенты, среди которых есть немало красивых.

градиентный background с помощью CSS 3

11

Итак, закончив со всеми настройками, копируем гору  кода,  который автоматически генерируется в окошке слева, и вставляем в свой стиль.

 .gradient {
height:50px; width:300px;
background: #6cdb2b; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:
 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNmNkYjJiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjglIiBzdG9wLWNvbG9yPSIjMDc5NjMwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjklIiBzdG9wLWNvbG9yPSIjNmZiZjYzIiBzdG9wLW9
wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDElIiBzdG9wLWNvbG9yPSIjNmZiZjYzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTclIiBzdG9wLWNvbG9yPSIjMWJhYTk1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wI
G9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjMWJhYTk1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMjBjY2JkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xv
cj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, #6cdb2b 0%, #079630 28%, #6fbf63 29%, #6fbf63 41%, #1baa95 57%, #1baa95 69%, #20ccbd 70%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#6cdb2b), color-stop(28%,#079630), color-stop(29%,#6fbf63), color-stop(41%,#6fbf63), color-stop(57%,#1baa95), color-stop(69%,#1baa95), color-stop(70%,#20ccbd), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #6cdb2b 0%,#079630 28%,#6fbf63 29%,#6fbf63 41%,#1baa95 57%,#1baa95 69%,#20ccbd 70%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #6cdb2b 0%,#079630 28%,#6fbf63 29%,#6fbf63 41%,#1baa95 57%,#1baa95 69%,#20ccbd 70%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #6cdb2b 0%,#079630 28%,#6fbf63 29%,#6fbf63 41%,#1baa95 57%,#1baa95 69%,#20ccbd 70%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(-45deg, #6cdb2b 0%,#079630 28%,#6fbf63 29%,#6fbf63 41%,#1baa95 57%,#1baa95 69%,#20ccbd 70%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cdb2b', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

у нас получился градиентный background с помощью CSS 3

градиент с помощью css3

Про минусы этого способа, думаю, большинство читателей уже догадались, и минус этот называется IE (internet explorer). Не смотря на галочку IE9 под окошком с кодом, этот код работает криво в новых эксплорерах, и не работает вовсе в старых. Пора уже запретить использование IE каким-то законом, а еще лучше, чтобы добрый гений программист написал вирус, который уничтожит все internet explorer во всем мире, потому что именно этот браузер тормозит развитие веб дизайна, использование CSS 3 и HTML 5.

Итак, благодаря этой статье Вы познакомились с замечательным сервисом colorzilla.com/gradient-editor, полезным плагином «пипеткой» и узнали как сделать градиентный background через CSS 3 и как сделать градиентный background клонировав однопиксельный рисунок. Пробуйте и пользуйтесь с удовольствием!