Ранее в блоге мы уже рассказывали про и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на 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 добавляем:
|
|
Последним в коде расположен текстовый блок. 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 свойство которое принимает несколько значений. Свойство {background : linear-gradient(to top white 20%, red 50%, black 30%)} задает градиент переходящий снизу вверх. Цвета будет располагаться по площади следующим образом: 20% — белый, 50% — красный, 30% — черный. — CSS свойство, которое служит для создания радиального градиента. Принимает несколько значений. Запись background: radial-gradient(circle at 65% 15%, aqua, darkblue) создаст фигуру сине-голубого шара. - @keyFrame — ключевое слово, которое используется для стилизации некоторых элементов, чаще всего для анимации.
— свойство, которое отвечает за анимацию. Её значения определяют длительность(в секундах), функции и количество повторений.
Градиент — элемент дизайна, который чаще всего используется для создания уникальных элементов. Его функция заключается в плавном перетекании из одного цвета в другой. Фоны, созданные с помощью css градиента, могут придать шикарный вид любому сайту.
Сама по себе тема градиентов является довольно сложной, поэтому в этой статье мы разберем её как можно подробнее. Ниже вы найдете 3 примера использования градиентов, а также сможете скачать исходники для самостоятельного изучения.
Синтаксис
Сейчас мы расскажем о том, как сделать простой градиент в CSS. Существует несколько разновидностей плавного цветового перехода.
Линейный градиент
Для начала мы рассмотрим самый простой — создание линейного градиента. Он создается с помощью свойства linear-gradient.
Как правило, при создании линейного перехода используется два цвета, но можно и использовать и больше, здесь по желанию. Для перехода между ними должно быть указано направление. Но есть и значение по умолчанию — переход сверху вниз.
Также, можно задать распределение цвета по всей области градиента. По умолчанию все цвета распределяются равномерно, вдоль указанной линии.
Способов создания направления несколько, для этого используются точные и не точные значения. Из не точных значений выделяют to top, to bottom, to right и to left, которые задают направления вверх, вниз, вправо и влево соответственно.
Для указания другого направления записывается значение градусов угла наклона, которое измеряется в deg. 1 deg равен 1 градусу.
Для создания перехода цвета по диагонали можно использовать и ключевые слова, например сочетание to top left. Он задает линию переходящую влево, в верхний край экрана.
Чтобы изменить распределение цветов используются стоп-значения, которые указываются в процентах. Вам всего лишь нужно указать некоторое количество процентов сразу же после указания цвета, без запятой.
Запись {background : linear-gradient(to top, #fff 20%, #ccc, #000)} будет означать, что белый цвет будет занимать первые 20% области.
Радиальные градиенты
Задается с помощью команды radial-gradient. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.
- Первое значение, которое принимает команда radial-gradient — форма. Её можно указывать простыми словами — circle, ellipse и другие. По умолчанию стоит 2 значение.
- Второе значение, в отличие от линейного градиента, задает положение центра. Для этого задаются такие же ключевые слова, с небольшим отличием: приставка to меняется на at.
- С помощью точных значений можно задавать ширину и высоту градиента. Первое значение определяет ширину, а второе высоту. Для изменения ширины подходят такие размеры: %, rem и em.
Пример использования градиента. HTML & CSS
Перед тем, как показывать примеры, скажем пару слов о CSS генераторах градиента. Они позволяют создать вам очень просто и быстро создать нужную форму и переход, не высчитывая значения вручную.
Отличный генератор для создания линейных градиентов — CSS Gradient Generatot, расположенный на сайте Flatonika.ru . Он очень удобный и простой, позволит создавать CSS градиенты в режиме онлайн.
Анимированный background с помощью градиентов. CSS
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
В этом примере мы покажем, как создать красочный фон, с помощью CSS градиента. Это будет простой фон с небольшой анимацией.
Всё что вам нужно сделать — задать свойство
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
Также нужно задать время анимации, с помощью свойства animation, для тега
. Длительность анимации будет равна 15 секундам.Поздравляю, у вас получился отличный градиент с красочной анимацией. HTML для фона с помощью градиента практически не понадобился.
Создание анимированного градиента на тексте. CSS
Этот пример намного сложнее первого, так как требует лучшей детализации. Но здесь мы рассмотрим его основную часть.
Существует несколько способов создания градиента на тексте, но в нашем примере мы используем блок текста. Мы создаем фоновый градиент для блока с текстом.
Чтобы он не закрывал собою весь текст необходимо изменить свойство
Создание анимированного градиента для кнопки.
Здесь всё просто, почти также, как и в первом примере. Мы создаем несколько кнопок в нашем html документе, для этого используем тег c классом .
И теперь для каждой кнопки создаем линейный градиент с разными цветами, с помощью свойства background: linear-gradient.
После этого создадим анимацию, с помощью ключевого слова @keyFrame, как и в первом примере.
Заключение
В данной статье мы разобрали создание простых градиентов, но это не все способы их использования. Можно создавать 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-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
Линейный градиент CSS - это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .
Синтаксис CSS linear-gradient
позиция, цвет1, цвет2,... );
- позиция
- указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
- to top - переход снизу вверх (0deg)
- to left - переход справа налево (270deg)
- to bottom - переход сверху вниз (180deg)
- to right - переход слева направо (90deg)
- to top left - переход правого нижнего угла к левому верхнему
- to top right - переход от левого нижнего угла к правому верхнему
- to bottom left - переход от правого верхнего угла к левому нижнему
- to bottom right - переход от левого верхнего угла к правому нижнему
- цвет1 - начальный цвет
- цвет2 - конечный цвет
Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).
Примечание 1Можно задавать переход нескольких цветов через запятую.
Как сделать нелинейное изменение градиентаСинтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например
background : linear-gradient (позиция, цвет1 процент, цвет2 процент );
Примечание 2
Для браузеров нужно задавать это свойство с вендорными префиксами : -moz-,-webkit-, -ms-, -o
Примеры с линейными градиентами
Пример 1. Стандартные переходы цветов
Пример 2. Множественный линейный градиент
Сделаем множественный линейных градиент, т.е. цвет будет меняться из одного в другой несколько раз.
На странице преобразуется в следующее
Пример 3. Красивая кнопка на сайте с линейным градиентом
Сделаем множественный линейный градиент, т.е. цвет будет меняться из одного в другой несколько раз на примере html кнопки на сайте .
BUTTON
На странице преобразуется в следующее
Раньше я использовал для украшения страниц моего сайта
подстилающий фон имеющий некоторый контраст по отношению к фону страницы. сейчас
мне захотелось сделать страницы моего сайта более динамичными. Это позволяет
сделать градиентный подстилающий фон. Но как его сделать?
К сожалению, из имеющихся рекомендаций одни не работали, другие работали только
в отдельных браузерах, а другие были громоздки.
Ниже дано подробное описание. Думаю, при необходимости, Вы сможете это повторить
и украсить свой сайт.
Равномерный фон можно легко задать с помощью атрибутовтега "body ", как в нем самом, так и в таблице стилей.
При использовании для форматировании страниц - таблиц, последние будут находиться над фоном. А внутри них фот может быть другим, поскольку его можно определить в свойствах таблицы (тега table и сопутствующих ему tbody , td , th и др). Этот прием расширяет оформительские возможности при создании страниц.
Но еще красивее когда фон имеет градиент.
Тогда при прокрутке длинных страниц сформированных с помощью таблиц имеющих размер немного меньше экрана, обрамление вокруг них будет менять цвет при прокрутке. Создается эффект динамичности страницы.
Старое и простое решение
Но похоже мы забыли простое и заложенное во все современные браузеры решение.
Существует хорошо всем известный тег -
Он осуществляет логическое разделение документа, создавая фрагменты внутри него.
В соответствии со стандартом HTML 3.2 он предназначен для "задания части страницы или фрагмента текста". Все что лежит между открывающим и закрывающим элементами этого тега, воспринимается браузером как один объект. Тег
Главная особенность тега
Но теперь по существу.
Привожу фрагмент кода:
Разбор данного фрагмента:
После тега "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 и окрашен в указанный цвет.