Вы отказываетесь использовать CSS-градиенты в своих проектах просто потому что не понимаете их, или же вас не устраивает текущая поддержка браузерами? Друзья мои, пришла пора избавиться от изображений, шириной в 1 пиксель. Если вам интересно узнать о том как использовать CSS-градиенты, эта статья для вас. Мы разберем основы синтаксиса, а затем перейдем к сложным эффектам с большим количеством советов и примеров. Изучение CSS-градиентов очень важно, поскольку их поддержка браузерами улучшается день ото дня, а мобильные браузеры изначально хорошо поддерживают CSS3.
Итак, давайте начнем.
Основной синтаксис
Первое о чем вам следует знать – это поддержка браузерами CSS-градиентов. К сожалению, на данный момент придется использовать вендорные префиксы и пользовательский фильтр для IE. Итого, мы имеем пять возможных префиксов, каждый из которых содержит свои характерные особенности, а также множественные различия между версиями браузеров: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), и IE (Trident), содержащий два различных способа выполнения градиентов.
Для начала мы рассмотрим “стандартные” правила браузеров (не принимая во внимание старые правила from() to() ), а ближе к концу будет глава, посвященная IE-совместимости, поскольку его фильтры не оказывают влияния на основной код.
Основной синтаксис CSS-градиентов, выглядит следующим образом:
[css]
#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );
/*** реальный пример **/
background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );
background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );
background: -o-linear-gradient( top left, red, #c10000, #ae0000 );
background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );
background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );
background: linear-gradient( top left, red, #c10000, #ae0000 );
}
[/css]
Приведенный код даст следующий результат:
Рассмотрим подробнее каждый из параметров:
- Background: градиент указывается в качестве фона элемента через свойство background, точно так же, как картинка или сплошной цвет.
- vendor –: указываем “-o” для оперы, “-moz” для Firefox, “-webkit” для safari и chrome, “-khtml” для Konqueror и “-ms” для IE.
- type: здесь задается тип градиента, может содержать одно из двух значений “linear” или “radial”.
- start / position: это X/Y-координаты, которые либо задают браузеру направление градиента (в этом случае top – означает сверху вниз, а left – слева направо), либо указывают точные координаты начала градиента (например заданные координаты 600px 300px, инвертируют приведенный выше пример, поскольку точка начала градиента будет расположена в правом нижнем углу блока).
- shape: при использовании радиального градиента можно указать “circle” для круглого градиента, или оставить свойство пустым, в этом случае градиент останется в форме эллипса.
- size: определяет размер градиента. Давайте рассмотрим его подробнее.
Свойство size может принимать одно из шести значений: closest-side, closest-corner, farthest-side, farthest-corner, contain и cover. Рассмотрим каждое из этих свойств на примере простого радиального градиента.
Closest-side
Края градиента подогнаны к ближайшей стороне контейнера.
Сlosest-corner
Края градиента подогнаны к ближайшему углу контейнера, в этом случае, градиент частично скрывается за границами контейнера.
Farthest-side
Края градиента подогнаны к дальней стороне контейнера.
Farthest-corner
Края градиента подогнаны к дальнему углу контейнера, опять же градиент частично скрыт границами. Разница со значением farthest-side почти незаметна, но все же есть.
Contain
Градиент целиком размещается внутри контейнера, является аналогом свойства closest-side.
Cover
Градиент полностью покрывает область контейнера, аналог свойства farthest-corner.
Оставшиеся свойства градиента:
- Color1: это первый цвет, цвет стартовой позиции, которую вы указали выше.
- Colors 2, 3, 4…: вы можете указать любое количество цветов по желанию, и они равномерно будут распределены в фоне элемента, если только вы не задали свойство position
- Positon (для цветов): если вам не нравится равномерное распределение цветов, вы можете задать свои правила для их позиционирования.
Пример пользовательского распределения цветов:
[css]
#wd {
background: -moz-linear-gradient( top left, white, black 25% );
background: -webkit-linear-gradient( top left, white, black 25% );
background: -o-linear-gradient( top left, white, black 25% );
background: -khtml-linear-gradient( top left, white, black 25% );
background: -ms-linear-gradient( top left, white, black 25% );
background: linear-gradient( top left, white, black 25% );
}
[/css]
На картинке вы можете видеть результат распределения черного и белого цвета, в соотношении 25% / 75%, диагональная линия является наглядным примером того, как браузер рассчитывает эти значения:
Множественные градиенты
Давайте копнем немного глубже, и посмотрим какие еще крутые штуки мы можем сделать с помощью градиентов. Начнем с комбинации различных фигур для создания новых эффектов.
Синтаксис очень простой, все что нужно сделать – разделить множественные объявления градиентов, запятыми. Обратите внимание, z-index для градиентов работает в обратном порядке, поэтому самый первый градиент будет сверху.
Для того чтобы градиенты не перекрывали цвета друг друга, нужно указать значение transparent для второго цвета в настройках градиента.
Например, следующий код
[css]
#wd {
background:
-moz-linear-gradient( top left, white, transparent 25% ),
-moz-linear-gradient( bottom right, white, transparent 25% ),
-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-webkit-linear-gradient( top left, white, transparent 25% ),
-webkit-linear-gradient( bottom right, white, transparent 25% ),
-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-o-linear-gradient( top left, white, transparent 25% ),
-o-linear-gradient( bottom right, white, transparent 25% ),
-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-khtml-linear-gradient( top left, white, transparent 25% ),
-khtml-linear-gradient( bottom right, white, transparent 25% ),
-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-ms-linear-gradient( top left, white, transparent 25% ),
-ms-linear-gradient( bottom right, white, transparent 25% ),
-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
linear-gradient( top left, white, transparent 25% ),
linear-gradient( bottom right, white, transparent 25% ),
radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
}
[/css]
дает вот такой результат:
Эффекты градиентов
Как видите, комбинации градиентов могут давать интересные результаты. Далее мы рассмотрим несколько практических примеров (хотя некоторые из них довольно экспериментальные), которые вы можете использовать и улучшать по своему вкусу.
Мягкий световой эффект
Этот эффект прост в использовании и прекрасно подойдет для анонсных картинок. С его помощью, вы сможете добавить мягкую овальную тень к любому элементу, без использования дополнительной разметки. Тень хорошо будет смотреться как сама по себе, так и в качестве эффекта наведения.
Для создания тени используется следующий css, включающий правильное позиционирование элементов:
[css]
img {
margin: 0 -60px;
padding: 25px 60px 40px;
background: -moz-radial-gradient( center center, contain, black, white 90% );
background: -webkit-radial-gradient( center center, contain, black, white 90% );
background: -o-radial-gradient( center center, contain, black, white 90% );
background: -khtml-radial-gradient( center center, contain, black, white 90% );
background: -ms-radial-gradient( center center, contain, black, white 90% );
background: radial-gradient( center center, contain, black, white 90% );
}
[/css]
Получится вот такой результат:
Фоновые CSS-паттерны
Существует немалое количество экспериментальных CSS-паттернов, некоторые из них уже вполне можно использовать, особенно те, что основываются на градиентах с размытым краем.
Вот пример того, как можно использовать простой фоновый паттерн, который легко можно интегрировать в свой сайт:
[css]
body {
background:
-moz-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-webkit-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-o-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-khtml-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-ms-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
radial-gradient( center center, contain, #757575, transparent ),
black;
background-size: 100% 30px;
}
[/css]
Получаем вот такой фон:
Свойство background-size контролирует высоту и ширину полосок, можно поэкспериментировать с разными значениями, и посмотреть какой получится результат.
CSS-рисование
Если и есть вещь, которая впечатлила меня больше всего с тех пор как я занимаюсь веб-разработкой, то это CSS-рисование. Было время, когда для получения довольно простых фигур, требовалось написать множество строк кода (иногда сотни или даже тысячи). А сегодня, для создания простой картинки, достаточно десяти строк кода и одного элемента. Кроме того, совместное использование CSS-рисования и CSS-анимации дает прекрасные результаты.
С помощью следующего кода, мы нарисуем простое, испуганное лицо, которое можно отображать для пользователей IE:
[css]
#wd {
position: relative;
width: 450px;
height: 400px;
margin: 20px auto;
background:
-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
border-radius: 50%;
}
#wd:after {
content: "Are you using IE??";
position: absolute;
top: 225px;
left: 315px;
padding: 5px 10px;
width: 150px;
font-family: "comic Sans MS",arial,verdana; /* I just couldn’t help using comics! */
background: white;
border: 2px solid #E19B92;
border-radius: 4px 4px 4px 4px;
}
[/css]
Результат:
О совместимости
Осталось два важных замечания, относительно CSS-градиентов. Первое, синтаксис для старых webkit-браузеров, немного отличается от приведенных примеров:
[css]
#wd {
background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );
/* пример */
background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}
[/css]
Internet Explorer, начиная с версии 5.5 и до версии 9, поддерживает градиенты через фильтр. Синтаксис следующий:
[css]
#wd{
filter: progid:DXImageTransform.Microsoft.gradient(sProperties);
}
[/css]
Возможные свойства фильтра (sProperties):
- Enabled – свойство отвечает за отображение градиента, может принимать одно из двух значений: true или false.
- StartColor – цвет начальной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до 4294967295 (непрозрачный белый)
- StartColorStr – цвет начальной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
- EndColor – цвет конечной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до 4294967295 (непрозрачный белый)
- EndColorStr – цвет конечной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
- GradientType – можно указать тип градиента, горизонтальный (значение 1) или вертикальный (значение 0). По умолчанию используется вертикальный градиент.
Например, чтобы получить вертикальный градиент с двумя непрозрачными цветами, потребуется следующий код:
[css]
#wd{
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=#FF27fb27, EndColorStr=#FF033d03, GradientType=0);
}
[/css]
Результат
Обратите внимание на указанные цвета, впереди идет значение альфа-канала FF, поскольку нам требуется два непрозрачных цвета, а затем следует само значение цвета.
А вот такой код потребуется для создания горизонтального градиента, с одним полупрозрачным цветом:
[css]
#wd{
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=#FFc21269, EndColorStr=#32f4a5cc, GradientType=1);
}
[/css]
Результат
Здесь первый цвет оставляем непрозрачным, а у второго вместо значения FF, указываем 32, то есть 50 в десятичной системе счисления. Таким образом, мы уменьшаем прозрачность второго цвета на 50%, ну и конечно тип градиента – единица.
Возможности фильтра весьма ограничены, но зато он точно будет работать в шестой, седьмой и восьмой версиях.
А вы используете CSS-градиенты в своих проектах, или считаете что для них еще не пришло время?
Перевод статьи Mastering CSS Gradients in Under an Hour, автор Rochester Oliveira
Leave a Reply to Alexpts Cancel reply