Создаем красивый градиент фона + трансформация skew в CSS3 - «Веб-дизайн»

Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3.

Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia, который является прекрасным примером профессионального использования всех возможностей CSS3.

Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, судя по всему, разработчкии BrightMedia сейчас уже не используют линейные градиенты, заменив их на canvas. Во-вторых, наша основная задача – потренирвоаться с linear-gradient и skew трансформацией в CSS3. В итоге должно получиться что-то вроде следующей картинки:

1. Подготовка и контейнер

Для того, чтобы создать на CSS градиенты фона нам потребуется реализовать наложение нескольких слоев элементов DIV на странице, имеющей черный цвет. Прежде чем прибегнуть к опциям CSS3 для работы с 2D-трансформацией и linear-gradient, задаем размеры и местоположение блоков. Открываем новый файл CSS стилей и начнем его с такого кода:

* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #000;
}

При создании основного контейнера DIV используем произвольные размеры и полное разрешение. Данный четырехугольник представляет собой область наложения градиентов.

В HTML файл пишем код:

Стили при этом следующие:

.mainblock {
background: none;
margin: 250px auto;
width: 1800px;
height: 700px
}

2. Слои

Будем называть наши градиентные слои «mylayer». Как только вы создадите один такой элемент, работа с остальными не вызовет сложностей (процесс абсолютно идентичен). Все начинается с четырехугольника, к которому применим 2D-трансформацию, а именно метод skew. Это позволит исказить его, наклонив его оси X. Все слои в примере имеют наклон = 45 градусов влево или вправо. В HTML добавляем:

Красивый градиент фона и трансформация skew в CSS3

Последним в коде расположен текстовый блок. CSS стили при этом следующие:

.mylayer1 {
width: 550px;
height: 600px;
float: left;
margin: -15% 0% 0 10%;
transform: skew(45deg, 0deg);
}
.mylayer2 {
width: 400px;
height: 600px;
float: left;
margin: 2% 0% 0% 10%;
transform: skew(45deg, 0deg);
}
.mylayer3 {
width: 270px;
height: 450px;
float: left;
margin: 5% 0% 0% -42%;
transform: skew(-45deg, 0deg);
}
.mylayer4 {
width: 350px;
height: 300px;
float: left;
margin: -22% 0% 0% -10%;
transform: skew(-45deg, 0deg);
}

Увидеть блоки без фона можно путем добавления в код свойства border.

3. Градиент для фона 

Итак, на предыдущем мы определили местоположение блоков DIV + задали им искажение. Теперь можно подобрать соответствующий градиент. В данном примере наиболее подходящим является линейный градиент, однако, можно использовать и радиальный. Для каждого из классов добавляете нужную заливку, например:

.mylayer1 {
background: linear-gradient(to bottom, rgba(229,243,12,0), rgba(243,61,12,0.4), rgba(12,99,243,0));
}
.mylayer2 {
background: linear-gradient(to bottom, rgba(30,60,55,0.2), rgba(75,40,125,0.5), rgba(60,20,80,0.6),rgba(0,0,0,0));
}
.mylayer3 {
background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8));
}
.mylayer4 {
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(35,25,65,0.5), rgba(140,60,130,0.9));
}.

Вы можете направлять градиент вверх, вниз, влево или вправо, определяя значение цвета с помощью метода rgba(). При этом кроме фона можно определить степень прозрачности блоков.

4. Фоновое изображение

Наиболее красивый градиент фона получается при наложении цветов с невысоким уровнем прозрачности, достаточном для того, чтобы нижние слои были видны. Также на странице можно добавить дополнительный фон – например, на сайте BrightMedia есть прозрачный Png файл с точками и линиями. Нужно создать соответствующую картинку, загрузить ее на ваш сайт, а в стилях для body добавить что-то вроде:

body {
background: url(http://мой_сайт/thumb/dots9.png) repeat fixed center, #000;
}

5. Итого

Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):

See the Pen reEqVR by Alex (@alextod) on CodePen.

Трансформация skew в CSS

Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:

В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:

div {
-ms-transform: skew(45deg, 5deg); /* for IE 9 */
-webkit-transform: skew(45deg, 5deg); /* for Safari */
transform: skew(45deg, 5deg);
}

Кстати, такая запись используется для корректной работы кода в IE 9 и Safari. Если при использовании функции skew второй параметр опускается, то предполагается, что он равен 0. У skewX и skewY изначально есть только одно значение.

В принципе, ничего сложного в трансформации skew нету. Можете попробовать создать несколько примеров дабы понять для себя как именно производится искажение. Не знаю насколько красивый градиент фона на CSS у нас получился, но что-то новое для себя вы определенно узнали.