.
то, что он имеет
гибкое позиционирование на странице и он работает со слоями. В
Dynamic HTML
это называют 2,5 мерное пространство.
Но теперь по существу.
Привожу фрагмент кода:
Разбор данного фрагмента:
После тега "body"
следует первый тег
"div"
- открывающий,
которыйописывает подстилающий слой и содержит в своем составе свойство рассматриваемого тега
"style"
с атрибутами:
Position:absolute;
-
абсолютное позиционирование в окне с координатами:
- top:0; left:0; width:100%;
height:100%;
- вверху и слева отступ =0, размер поля 100% по ширине и
высоте (здесь возможны варианты),
Visibility:visible
- дает
команду сделать данный тег div
видимым,
Z-index:-1
- определяет
положение тега div
в так называемом 2,5 мерном
пространстве страницы, как самый нижний.
Следует обратить внимание на атрибут z-index
который, в данном случае, определяет положения участка страницы описанное данным
тегом на -1 слое (здесь может быть любое значение меньшее значений следующих
слоев). Просто для меня подстилающий слой ассоциируется с отрицательным
измерением, и это более наглядно.
Далее следует ссылка на фоновую картинку с градиентом, шириной 2 пикселя и
высотой 500 (у меня в данном случае, хотя может быть и меньше)
растянутый на высоту Вашей страницы.
Следующий тег
"div"
дан для примера организации шапки страницы с помощь этого
тега. Он имеет размеры по ширине страницы, высотой 200 px
и окрашен в указанный цвет.
Ранее в блоге мы уже рассказывали про и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на 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
;
}
|
* {
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
)
;
}
|
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
)
)
;
}
.
|
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:
//мой_сайт/img/dots9.png)
repeat
fixed
center
,
#000
;
}
|
body {
background: url(http://мой_сайт/img/dots9.png) repeat fixed center, #000;
}
5. Итого
Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):
Трансформация skew в CSS
Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:
- skewX() — искажение вдоль оси X;
- skewY() — отклонение по оси Y;
- skew() — одновременно задается значения и по X и по Y.
В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:
div {
-ms-transform:
skew
(45deg
,
5deg
)
;
/* for IE 9 */
-webkit-transform:
skew
(45deg
,
5deg
)
;
/* for Safari */
transform
:
skew
(45deg
,
5deg
)
;
}
|
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 у нас получился, но что-то новое для себя вы определенно узнали.
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой.
Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами . Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter , также для IE9 можно использовать SVG.
Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .
Linear-gradient
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
Background: linear-gradient(orangered, gold);
Цветов может быть любое количество больше двух.
Также можно управлять направлением градиента и границами (точками остановки) цветов.
Направление можно задавать градусами или ключевыми словами.
Ключевыми словами:
to top = 0deg ;
to right = 90deg ;
to bottom = 180deg - значение по умолчанию;
to left = 270deg .
Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
Top-left {
background: linear-gradient(to top left, purple, crimson, orangered, gold);
}
Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg - располагается строго под этим углом независимо от размеров фигуры.
Разница хорошо видна на прямоугольных фигурах:
Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Примеры задания значений в % , в em и значения, выходящие за границы элемента:
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара - ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%.
Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
Light {
background: peachpuff linear-gradient(90deg,
rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) center center / 2em;
}
.dark {
background: steelblue linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) center center / 100% 1em;
}
В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй - определяем цвета градиента и границу между ними, в третьей - задаем положение и размер получившегося изображения. Самая важная часть - размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента.
Очень легко и понятно:)
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать .
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum
, инструментом от Lea Verou .
Помимо обычного linear-gradient можно сделать repeating-linear-gradient - повторяющийся градиент
Примерный код:
Background: repeating-linear-gradient(green, green .5em,
transparent .5em, transparent 1em);
К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .
Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти .
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/
. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.