Сегодня мы поговорим о такой очень нужной вещи как градиент на CSS3. Думаю, в последнее время им пользуется всякий верстальщик и дизайнер. Начнем с азов, что такое градиент? А градиент это один из видов заливки, в котором задаётся плавный переход от одного цвета к другому при выставлении нескольких цветов или прозрачности. Градиенты так же бывают двух видов – линейные и радиальные. Давайте теперь посмотрим на каждый из них поподробнее.
Линейный градиент CSS3.
И так, в линейном градиенте осуществляется переход от одного цвета к другому по прямой линии. То есть на примере это будет выглядеть вот так (код пишем сразу со всем префиксами):
div {/*-префикс-linear-gradient(стартовый цвет,финишный цвет);*/
background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}
Используя этот код, давайте изменим направление градиента CSS3. Для этого нам нужно выбрать два из пяти значений направления градиента: top, bottom, left, right и center. То есть первое значение показывает, откуда начинается градиент, а второе, куда именно он продолжается. Но помните, что если вы не указали одно из значений, то оно по умолчанию будет center.
ex1 { background: linear-gradient(left, #FFF, #000); }
ex2 { background: linear-gradient(right, #FFF, #000); }
ex3 { background: linear-gradient(225deg, #FFF, #000); }
Но это градиенты только из двух цветов, а теперь попробуем добавить стоп-цвет в наш градиент CSS3.
div {background: linear-gradient(left,#000,#FFF,#000);}
В этом примере сначала градиент начнется с черного цвета, перейдёт в белый, и потом опять в черный. Для наглядности покажем это в четырех примерах.
ex1 {background: linear-gradient(left,#000,#FFF,#000);}
ex2 {background: linear-gradient(left,#000,#FFF 75%,#000);}
ex3 {background: linear-gradient(bottom,#000,#FFF 20px,#000);}
ex4 {background: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);}
Радиальный градиент CSS3.
Этот градиент немножко сложнее, но тем интереснее с ним работать. Хотя если честно его редко когда удается засунуть в дизайн. В этом виде градиента цвет распространяется от центра по окружности.
E { background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
); }
Как вы видите синтаксис почти ничем не отличается, ну только кроме того что добавилась форма и размер. Формы бывают двух видов, круг и эллипс. А вот размер бывает шести видов:
closest-side
- – Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
closest-corner
- – Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
farthest-side
- – Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
farthest-corner
- – Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
contain
- – Аналогично closest-side.
cover
- – Аналогично farthest-corner.
ex1 { background: radial-gradient(circle farthest-side, #000, #FFF); }
ex2 { background: radial-gradient(left,circle farthest-side,#000,#FFF); }
ex3 { background: radial-gradient(right top,circle cover,#FFF,#000); }
ex4 { background: radial-gradient(80% 50%,circle closest-side,#FFF,#000); }
Как и в линейном градиенте, здесь тоже можно добавлять стоп цвет и получать очень даже интересные эффекты, вот например:
ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); }
ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); }
ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); }
ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }
Думаю собственно на этом всё. А если Вам стало лень разбираться в теме градиент CSS3, ТО можете воспользоваться готовыми онлайн генераторами градиента на CSS3.
Источник