Как наложить градиент на картинку в css

Полупрозрачный градиент над картинкой на чистом CSS

Я переделывал страницу мастер-класса AppSync и захотел немного улучшить скучную секцию «Обо мне».

Я насмотрелся на разные сайты и решил сделать что-то такое:

Видите градиент внизу каждой картинки? Из него получается неплохой контрастный фон для подписей, а ещё он хорошо выглядит с любыми фоновыми картинками (как видите, некоторые из них тёмные, а другие очень светлые). Я использовал синтаксис ::before из CSS, чтобы создать пустой псевдоэлемент ::before с фоновым градиентом.

Вот базовый HTML-код для каждой картинки

Для начала обратите внимание на z-index у тегов и . Значения выбраны так, чтобы появился перед градиентом, а не за ним.

• У тега z-index равен 50 — он на переднем плане.
• У псевдоэлемента ::before z-index принимает любое значение от 1 до 49 и остаётся в середине.
• У тега z-index равен 0 — он позади всех.

А вот так выглядит CSS-атрибуты для псевдоэлемента ::before .

.overlay::before

Вы могли заметить пустое значение » атрибута content . К сожалению, если его не указать, то псевдоэлемент ::before вообще не создаётся. Ширину, высоту и позицию мы задаем, чтобы убедиться, что ::before полностью перекрывает тег .

Тот же результат получается и с помощью дополнительных тегов , но этот способ показался мне очень хорошим, да ещё и на чистом CSS.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Вот как это работает:

Что всё это значит

Первые два свойства просто немного меняют вид ссылки.

Свойство color: maroon; меняет цвет текста в тегах на темно-красный.

Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому работаем с CSS-анимацией. Так, свойство transform: scale(1.2); срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

• 10 июля 2023

Как верстать и оформлять цитаты

�� Не используйте тег для других видов текста — перевода или шутки, так как это не семантично.

• 22 июня 2023

Градиент поверх фоновой картинки в CSS

На этом уроке мы не просто познакомимся с градиентами, но и узнаем, как их можно применять на практике. Вариантов применения градиентов в веб-дизайне, несчетное количество, но нас не интересует все и сразу. Будем двигаться постепенно и начнем мы с популярного дизайнерского приёма – это наложения градиента поверх большой фоновой картинки, используя CSS стили.

Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS, если есть Photoshop?

На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента, а на втором – используется градиент. Что смотрится интереснее по дизайну?

Первый вариант

Второй вариант

Ответ очевиден. В первом варианте, из-за более широкой палитры цветов, тяжелее читается текст, да и зрительное восприятие неправильно расставляет акценты. Мы смотрим на верхушки деревьев, но вряд ли это главный посыл дизайнера.

Во втором варианте градиенты используются и в качестве тонирующего слоя, убираются резкие цветовые переходы, задний фон никак не отвлекает от текста.

Демонстрация.

Photoshop или CSS?

Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif файле или градиенты верстать на CSS?

Здесь нет чёткого правила, но одно мы знаем точно, что если по замыслу дизайнера, предполагается делать анимированный фон, то без CSS/JS уже не обойтись. И конечно не надо забывать, что картинка с градиентом будет больше весить, поэтому если градиент простой, то лучше написать его кодом.

Переходим к написанию кода примера и как всегда начинаем с разметки.

HTML разметка

Тег header будет служить контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.

The Forest

where nature and people

CSS код

В теге header опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.

header font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #fff;
text-transform: uppercase;
letter-spacing: 7px;
>

Кроме стилизации текста, в теге header лежит наш градиент вместе с фоновой картинкой. Свойство cover растягивает картинку на всю ширину и высоту хедера.

Градиент поверх картинки

Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.

Итак, у нас линейный градиент (linear-gradient), тянущийся снизу вверх (to top), от светлого-зеленого оттенка к темно-зеленому (rgba и цифры).

background-image: linear-gradient (to top, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);

Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.

Градиент по высоте заполняет первый экран на 95 процентов, просто так лучше смотрится скошенная линия снизу.

Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path. Пара цифр обозначает координаты X и Y, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE и Edge.

clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);

Позиционирование текста

Для текста мы создали специальный блок, с позиционировали его относительно окна браузера ровно посередине.

.header_box position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>

Примеры градиентов

https://cssgradient.io
https://webkul.github.io/coolhue/
https://www.grabient.com/

Оттуда можно скопировать код цвета и вставить в Photoshop или сразу в ваш CSS код.

Создано 12.09.2018 10:45:08

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Установка фона и градиента

Фон оказывает значительное воздействие на дизайн сайта. Он помогает создать впечатляюще выглядящий сайт, установить группирование и определить приоритет, фон также серьёзно влияет на юзабилити сайта.

В CSS фон элемента может быть сплошного цвета, изображением, градиентом или их комбинацией. Когда мы решаем, как реализовать такой фон, то должны понимать, что каждый фон влияет на общий вид нашего сайта.

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

Добавление цвета фона

Самый быстрый способ добавить фон к элементу — это установить однотонный фон с помощью свойства background или background-color . Свойство background принимает цвет и изображения в сокращённой форме, в то время как свойство background-color используется строго для установки сплошной фоновой заливки. Оба свойства работают, а какое вы решите использовать зависит от ваших предпочтений, а также ситуации.

При добавлении цвета фона у нас есть несколько вариантов значений, которые мы можем использовать. Подобно другим цветовым значениям мы можем выбрать из ключевых слов, шестнадцатеричных кодов и значений RGB, RGBa, HSL и HSLa. Чаще мы встретим шестнадцатеричные значения, однако можем иногда пожелать задействовать RGBa или значения HSLa для прозрачности.

Прозрачный фон

При использовании значения RGBa или HSLa в качестве прозрачного цвета фона хорошей идеей будет обеспечить также запасной цвет, потому что не все браузеры понимают RGBa или HSLa. И когда браузер встречает значение, которое он не распознаёт, то игнорирует его.

К счастью, есть простой способ обеспечить запасной вариант для фона. CSS каскадирует с верхней части файла до его низа, таким образом, мы можем использовать два свойства background-color в едином наборе правил. Первое свойство background-color будет включать «безопасный» цвет фона в виде шестнадцатеричного значения, а второе свойство background-color будет использовать RGBa или HSLa. При этом, если браузер понимает значение RGBa или HSLa, то отобразит его, а если нет, то вернётся к шестнадцатеричному значению перед ним.

Добавление фонового изображения

Кроме цвета фона элемента мы можем также добавить к нему фоновое изображение. Такие изображения работают аналогично цвету фона, однако предлагают несколько дополнительных свойств для уточнения. Как и прежде, мы можем использовать свойство background с сокращённым значением или свойство background-image напрямую. Независимо от применяемого свойства они требуют указать источник изображения с помощью функции url() .

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

Добавление фонового изображения с одним лишь значением url может выдать нежелательные результаты, так как по умолчанию фоновое изображение будет повторяться по горизонтали и вертикали от левого верхнего угла данного элемента, чтобы заполнить фон элемента целиком. К счастью, мы можем использовать свойства background-repeat и background-position для управления, как именно повторять картинки.

background-repeat

По умолчанию, фоновое изображение будет повторяться бесконечно по вертикали и горизонтали, если не указано иное. Свойство background-repeat может быть использовано чтобы изменить направление, в котором фоновая картинка будет повторяться, если она вообще повторяется.

Свойство background-repeat принимает четыре разных значения: repeat , repeat-x , repeat-y и no-repeat . repeat является значением по умолчанию и повторяет фоновое изображение по вертикали и по горизонтали.

Значение repeat-x повторяет фоновое изображение по горизонтали, в то время как значение repeat-y повторяет его по вертикали. Наконец, значение no-repeat говорит браузеру отобразить картинку один раз, то есть не повторять её вообще.

background-position

По умолчанию, фоновая картинка располагается в левом верхнем углу элемента. Тем не менее, с помощью свойства background-position мы можем контролировать, где именно изображение размещается относительно этого угла.

Свойство background-position требует два значения: горизонтальное смещение (первое значение) и вертикальное смещение (второе значение). Если указано только одно значение, то оно применяется для горизонтального смещения, а вертикальное по умолчанию задаётся как 50%.

Поскольку мы двигаем фоновое изображение из левого верхнего угла элемента, значения размера будут непосредственно привязаны к этому углу.

Чтобы установить значение background-position мы можем использовать ключевые слова top , right , bottom и left , пиксели, проценты или любую единицу размера. Ключевые слова и проценты работают очень похоже. Значение left top идентично процентному значению 0 0, которое располагает изображение в левом верхнем углу элемента. Значение right bottom идентично процентной записи 100% 100% и будет позиционировать изображение в правом нижнем углу элемента.

Рис. 7.01. Фоновые изображения позиционируются от левого верхнего угла элемента

Одним из преимуществ процентов по сравнению с ключевыми словами является возможность центрирования фонового изображения с помощью значения 50%. Для размещения фонового изображения в верхней части элемента, мы можем использовать значение 50% 0. Применение пикселей в качестве значения background-position также распространено, так как пиксели дают нам точный контроль над положением фона.

Значения background

Свойства background-color , background-image , background-position и background-repeat могут выступать значением для единичного свойства background . Порядок этих свойств в background может варьироваться, но обычно он такой: background-color , background-image , background-position , а затем background-repeat .

Пример фонового изображения

В следующем примере мы будем использовать свойство background , которое включает значения background-color , background-image , background-position и background-repeat .

Пожалуйста, обратите внимание, что в background-position содержится относительное и абсолютное значение. Первое значение, 20 пикселей — это горизонтальная величина, позиционирование background-image на 20 пикселей от левого края элемента. Второе значение, 50% — это вертикальная величина, которая центрирует фоновое изображение по вертикали.

Несколько других свойств и значений также включены в правила класса notice-success , чтобы установить дальнейший стиль сообщения.

.notice-success

Демонстрация фоновой картинки

На практике

Возвращаясь к нашему сайту Styles Conference, давайте добавим немного фонового цвета. Пока мы это делаем, изменим несколько других стилей, чтобы заставить все наши стили работать совместно и сохранить всё наше содержание разборчивыми.

Начнём с большого шага и применим синий фон к элементу наряду с имеющимися свойствами color и font . Все стилевые правила для элемента , установленные на данный момент, включают следующее:

body < background: #293f50; color: #888; font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; >

С классом primary-header у элемента

и существующим классом primary-footer у мы можем добавить два новых правила ниже раздела со ссылками в нашем файле main.css. Первый набор правил будет выбирать все элементы внутри элемента с классом primary-header или primary-footer и установит их цвет на белый, как это определено запятой, разделяющей два отдельных селектора, у которых одно и то же свойство и значение. Второй набор правил будет выбирать те же элементы что и раньше, но поменяет их цвет на зелёный, когда пользователь наводит на них указатель.

.primary-header a, .primary-footer a < color: #fff; >.primary-header a:hover, .primary-footer a:hover

.hero

Мы также очистим некоторые стили запасных кнопок путём установки класса btn-alt . В частности, сделаем рамку у кнопки белой и добавим стиль для :hover , который включает белый фон и синий цвет текста. Со всеми дополнениями наш новый класс btn-alt должен выглядеть следующим образом:

.btn-alt < border: 1px solid #fff; padding: 10px 30px; >.btn-alt:hover

/* ======================================== Полосы ======================================== */ .row

Удивительно, как несколько фоновых цветов могут влиять на дизайн веб-сайта. Наш сайт Styles Conference становится всё краше и главная страница тому доказательство.

Рис. 7.02. Главная страница сайта Styles Conference после добавления нескольких цветов фона

Дизайн градиентного фона

Градиентные фоны были введены с CSS3, дизайнеры и фронтенд-разработчики вовсю радовались этому. Хотя градиентные фоны не работают в старых браузерах, они поддерживаются всеми современными браузерами.

В CSS градиентные фоны рассматриваются как фоновые изображения. Мы можем создать градиент с помощью свойства background или background-image , как обычную фоновую картинку. Значение свойства для градиента меняется в зависимости от того, какой градиент нам бы хотелось — линейный или радиальный.

Вендорные префиксы для градиента

В уроке 4, «Открываем блочную модель», мы обсуждали добавление вендорных префиксов к новым свойствам или значениям CSS, так что браузеры могут поддерживать недавно разработанные возможности CSS. Градиенты были одними из значений, которые требовали использование префиксов. К счастью, для большинства браузеров отпала необходимость в префиксах для отображения градиентов, тем не менее, всё равно стоит указать префиксы для обеспечения лучшей поддержки.

Сперва мы начнём обсуждать линейные градиенты и включим различные префиксы. После этого в интересах краткости мы опустим префиксы, когда продолжим обсуждать градиенты, в том числе радиальные.

Линейный градиент

В течение многих лет дизайнеры и разработчики нарезали градиентные изображения, созданные с помощью графических редакторов и применяли к элементам картинки в качестве линейных градиентов. Процесс работал, но отнимал время для реализации и был чрезвычайно негибким. К счастью эти времена ушли и линейные градиенты теперь могут быть заданы в CSS. Если цвет нуждается в изменении, нет необходимости повторно разрезать изображение и загружать его на сервер. Теперь всё что нужно сделать, это быстро изменить значение в CSS. Красота.

Демонстрация линейного градиента

Линейные градиенты определяются с помощью функции linear-gradient() в свойстве background или background-image . Функция linear-gradient() должна включать в себя два значения цвета, первое из которых будет начальным цветов, а второе конечным цветом. Браузер затем обработает переход между двумя цветами.

Перед определением любого градиентного фона мы также вставим свойство background по умолчанию с однотонным цветом. Такой цвет должен быть использован в качестве запасного, если браузер не поддерживает градиент.

Смена направления градиента

По умолчанию, линейный градиент движется с верхней до нижней части элемента, плавно переходя между первым и вторым значением цвета. Это направление, однако, может быть изменено с помощью ключевых слов или значения угла, заданным перед любыми значениями цвета.

Например, если мы хотим, чтобы градиент в элементе двигался слева направо, мы можем использовать значение to right для указания направления, в котором линейный градиент должен продвигаться. Ключевые слова также могут быть объединены. Если мы хотим, чтобы градиент переходил от левой верхней до правой нижней части элемента, мы можем использовать значение ключевого слова to right bottom .

Демонстрация направления линейного градиента

Когда мы применяем диагональный градиент в не совсем квадратном элементе, градиент не переходит напрямую из одного угла в другой. Вместо этого градиент определит абсолютный центр элемента, поместит опорные точки в противоположных углах, откуда он должен продвигаться и только затем двинется в направлении угла, заданном в значении. Эти углы, которые перемещает градиент, называются «волшебные уголки», так как они не являются абсолютными. Эрик Мейер проделал замечательную работу с изложением этого синтаксиса в своей статье Linear Gradient Keywords.

Кроме ключевых слов также допускаются углы. Если мы хотим, чтобы наш градиент двигался к левой верхней части элемента мы можем использовать значение угла 315deg, также если мы хотим, чтобы наш градиент двигался к правой нижней части элемента, мы можем использовать значение 135deg. Этот же подход может быть применён для любого значения угла, от 0 до 360º.

Радиальный градиент

В то время как линейный градиент идеально подходит для градиентного перехода от одного направления к другому, часто возникает необходимость в радиальном градиенте. Радиальные градиенты работают так же, как линейные и повторяют большинство из тех же значений. Для радиальных градиентов вместо функции linear-gradient() в свойстве background или background-image мы будем использовать функцию radial-gradient() .

Демонстрация радиального градиента

Радиальные градиенты работают изнутри наружу элемента. Таким образом, первый цвет заданный в функции radial-gradient() будет располагаться в абсолютном центре элемента, а второй цвет будет находиться на внешней стороне элемента. Браузер затем создаст переход между этими двумя цветами.

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

Генератор градиентов CSS3

Ручная работа с градиентами может быть порой довольно трудной, особенно если вы начинающий. К счастью, появилось несколько генераторов градиентов CSS3. Каждый генератор работает немного по-своему и некоторые предоставляют больше возможностей, чем другие. Если вы заинтересовались, я рекомендую покопаться и найти подходящий генератор для ваших нужд.

Стоп-цвета

Как минимум, градиентный фон переходит от одного цвета к другому, однако, мы можем добавить несколько цветов к градиенту и заставить браузер сделать по всем ним переход. Для этого мы добавим стоп-цвета в данную функцию градиента — с запятыми, которые отделяют один цвет от другого.

Демонстрация стоп-цветов в градиенте

По умолчанию браузер будет позиционировать каждый стоп-цвет на равном расстоянии от следующего и переходить между ними соответственно. Если требуется больше контроля над тем, как желательно расположить цвета, то их места в градиенте могут быть определены для каждого цвета. Место должно быть объявлено как значение размера и идёт после значения цвета.

Позиционирование стоп-цветов в градиенте

Если не указано иное, то первый цвет будет позиционироваться на 0%, а последний цвет на 100%.

Пример градиента

Используя то же сообщение об успехе, что уже было раньше, мы поменяем старое фоновое изображение на линейный градиент.

Для этого мы включим два свойства background . Первое свойство background определяет шестнадцатеричное значение однотонного цвета, который служит в качестве запасного варианта на случай, если браузер не поддерживает линейные градиенты. Второе свойство background включает в себя функцию linear-gradient() , которая задаёт зелёный градиент, который переходит от верхней части элемента к его нижней части.

.notice-success

Демонстрация градиентного фона

На практике

С имеющимся набором градиентов давайте создадим новую полосу для нашего сайта Styles Conference, на этот раз с помощью градиента.

Мы сделаем новую полосу с градиентом с помощью класса row-alt . Поскольку для новой полосы задано то же свойство и значение min-width что и для класса row , мы объединим эти два селектора.

.row, .row-alt

Далее мы хотим создать новый набор правил и применить стили специально к классу row-alt . Эти новые стили будет включать в себя градиентный background , который начинается с зелёного цвета и переходит к жёлтому, слева направо. Используя функцию linear-gradient() с соответствующими значениями и вендорными префиксами, мы добавим градиентный background для класса row-alt . Также включим один background перед градиентным background как запасной вариант, на тот случай, если браузер не поддерживает градиенты. Наконец, мы также добавим и некоторый вертикальный padding . Наш обновлённый раздел теперь выглядит следующим образом:

.row, .row-alt < min-width: 960px; >.row < background: #fff; padding: 66px 0 44px 0; >.row-alt

Спикеры 
Мы рады приветствовать более двадцати спикеров, готовых представить новейшие технологии в отрасли. Готовьтесь к вдохновляющей феерии.





 

/* ======================================== Вступление ======================================== */ .lead < text-align: center; >.lead p

.notice-success