Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
CSS-градиент
CSS-градиент создает фон из нескольких цветов с плавным переходом между ними.
Градиент может быть задан в background, background-image, border-image, content и list-style-image.
Линейный градиент linear-gradient()
Для самого простого линейного градиента достаточно задать начальный и конечный цвета. Направление градиента, по умолчанию, сверху вниз.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(#def, #7ac);
}
РЕЗУЛЬТАТ:
Направление градиента можно задать ключевыми словами:
to left top, to top, to right top, to left, to right, to left bottom, to bottom (по умолчанию), to right bottom.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(to top right, #def, #7ac);
}
РЕЗУЛЬТАТ:
Направление градиента можно задать также положительным или отрицательным углом в градусах.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(45deg, #def, #7ac);
}
РЕЗУЛЬТАТ:
Ключевые слова to top right не аналогичны углу 45deg:
to top right | Направление градиента из нижнего левого угла в верхний правый угол элемента |
45deg | Направление градиента строго под углом в 45 независимо от формы элемента |
Для создания более сложных градиентов можно использовать неограниченное количество цветов через запятую.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(#bdf, #def, #7ac);
}
РЕЗУЛЬТАТ:
Для точного позиционирования цвета после значения цвета указывается его положение в процентах, пикселах или других единицах. Крайние единицы (0% и 100%) можно не указывать, т.к. они подразумеваются по умолчанию.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(#bdf, #def 20%, #7ac 55%);
}
РЕЗУЛЬТАТ:
Чем ближе положения соседних цветов, тем четче будет граница между ними. Начальный и конечный цвета подставляются автоматически, поэтому их можно не указывать.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(#def 49%, #7ac 51%);
}
РЕЗУЛЬТАТ:
Если каждый последующий цвет начинать с конца предыдущего цвета, и применить свойство background-size, то получится полосатый фон.
Пример
div {
width: 100%;
height: 50px;
background: linear-gradient(-45deg, #def 33%, #7ac 33%, #7ac 66%, #def 66%) 0 100%;
background-size: 100px 50px;
}
РЕЗУЛЬТАТ:
Полосатый фон можно также задать, используя вместо функции linear-gradient() функцию повтора линейного градиента repeating-linear-gradient().
Пример
div {
width: 100%;
height: 50px;
background: repeating-linear-gradient(-45deg, #def, #def 30px, #7ac 30px, #7ac 60px, #def 60px);
}
РЕЗУЛЬТАТ:
Радиальный градиент radial-gradient()
Радиальный градиент отличается от линейного тем, что один цвет переходит в другой вдоль круга или эллипса. Центр градиента, по умолчанию, находится в центре элемента.
Пример
div {
width: 100%;
height: 50px;
}
div:first-of-type {
background: linear-gradient(#def, #7ac);
}
div:last-of-type {
background: radial-gradient(#def, #7ac);
margin-top: 10px;
}
РЕЗУЛЬТАТ:
Линейный градиент Радиальный градиентЦветов в радиальном градиенте, как и в линейном, может быть несколько.
Пример
div {
width: 100%;
height: 50px;
}
div {
background: radial-gradient(#def, #7ac, #bdf);
}
РЕЗУЛЬТАТ:
Форма градиента определяется ключевыми словами circle или ellipse (по умолчанию).
Пример
div {
width: 100%;
height: 50px;
}
div:nth-of-type(1) {
background: radial-gradient(#def, #7ac, #bdf);
}
div:nth-of-type(2) {
background: radial-gradient(circle, #def, #7ac, #bdf);
margin-top: 10px;
}
РЕЗУЛЬТАТ:
radial-gradient(#def, #7ac, #bdf); radial-gradient(circle, #def, #7ac, #bdf);Для элемента с одинаковыми значениями ширины и высоты разница между круглым и эллиптическим градиентом незаметна.
Пример
div {
width: 100px;
height: 100px;
border-radius: 50%;
}
div:nth-of-type(1) {
background: radial-gradient(circle, #def, #7ac, #bdf);
margin: 0 auto;
}
div:nth-of-type(2) {
background: radial-gradient(#def, #7ac, #bdf);
margin: 10px auto 0;
}
РЕЗУЛЬТАТ:
radial-gradient(circle, #def, #7ac, #bdf); radial-gradient(#def, #7ac, #bdf);Положение центра радиального градиента можно указать в пикселях, процентах и с помощью ключевых слов: left top, top, right top, left, center (по умолчанию), right, left bottom, bottom, right bottom. Впереди ставится ключевое слово at.
Пример
div {
width: 100%;
height: 50px;
}
div:nth-of-type(1) {
background: radial-gradient(at 0 50px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
background: radial-gradient(at 0 100%, #def, #7ac, #bdf);
margin-top: 10px;
}
div:nth-of-type(3) {
background: radial-gradient(at left bottom, #def, #7ac, #bdf);
margin-top: 10px;
}
РЕЗУЛЬТАТ:
radial-gradient(at 0 50px, #def, #7ac, #bdf); radial-gradient(at 0 100%, #def, #7ac, #bdf); radial-gradient(at left bottom, #def, #7ac, #bdf);Размер градиента можно указать в пикселях, процентах (только для ellipse) и с помощью ключевых слов. Если указано одно значение, то это радиус круглого градиента. Если указано два значения, то первое задает ширину градиента, а второе – высоту.
Пример
div {
width: 100%;
height: 50px;
}
div:nth-of-type(1) {
background: radial-gradient(25px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
background: radial-gradient(100px at right, #def, #7ac, #bdf);
margin-top: 10px;
}
div:nth-of-type(3) {
background: radial-gradient(25% 50% at 10% 30%, #def, #7ac, #bdf);
margin-top: 10px;
}
РЕЗУЛЬТАТ:
radial-gradient(25px, #def, #7ac, #bdf); radial-gradient(100px at right, #def, #7ac, #bdf); radial-gradient(25% 50% at 10% 30%, #def, #7ac, #bdf);Ключевые слова, задающие размер радиального градиента:
closest-side | Градиент распространяется до ближней стороны элемента. |
farthest-side | Градиент распространяется до дальней стороны элемента. |
closest-corner | Градиент распространяется до ближнего угла элемента. |
farthest-corner | Градиент распространяется до дальнего угла элемента. |
Пример closest-side и farthest-side
div {
width: 100%;
height: 50px;
}
div:nth-of-type(1) {
background: radial-gradient(circle closest-side at 30px 20px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
background: radial-gradient(closest-side at 30px 20px, #def, #7ac, #bdf);
margin-top: 10px;
}
div:nth-of-type(3) {
background: radial-gradient(circle farthest-side at 30px 20px, #def, #7ac, #bdf);
margin-top: 10px;
}
div:nth-of-type(4) {
background: radial-gradient(farthest-side at 30px 20px, #def, #7ac, #bdf);
margin-top: 10px;
}
РЕЗУЛЬТАТ:
radial-gradient(circle closest-side at 30px 20px, #def, #7ac, #bdf); radial-gradient(closest-side at 30px 20px, #def, #7ac, #bdf); radial-gradient(circle farthest-side at 30px 20px, #def, #7ac, #bdf); radial-gradient(farthest-side at 30px 20px, #def, #7ac, #bdf);Пример closest-corner и farthest-corner
div {
width: 100%;
height: 50px;
}
div:nth-of-type(1) {
background: radial-gradient(circle closest-corner at 30px 20px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
background: radial-gradient(closest-corner at 30px 20px, #def, #7ac, #bdf);
margin-top: 10px;
}
div:nth-of-type(3) {
background: radial-gradient(circle farthest-corner at 30px 20px, #def, #7ac, #bdf);
margin-top: 10px;
}
div:nth-of-type(4) {
background: radial-gradient(farthest-corner at 30px 20px, #def, #7ac, #bdf);
margin-top: 10px;
}
РЕЗУЛЬТАТ:
radial-gradient(circle closest-corner at 30px 20px, #def, #7ac, #bdf); radial-gradient(closest-corner at 30px 20px, #def, #7ac, #bdf); radial-gradient(circle farthest-corner at 30px 20px, #def, #7ac, #bdf); radial-gradient(farthest-corner at 30px 20px, #def, #7ac, #bdf);Так же, как и в линейном градиенте, для точного позиционирования цвета после значения цвета через пробел указывается его положение в процентах, пикселах или других единицах. Крайние единицы (0% и 100%) подразумеваются по умолчанию.
Пример
div {
width: 100%;
height: 50px;
background: radial-gradient(circle closest-side, #def 10px, #7ac 10px, #7ac 20px, #bdf 20px);
}
РЕЗУЛЬТАТ:
Используя свойство background-size, узор радиального градиента можно размножить.
Пример
div {
width: 100%;
height: 50px;
background: radial-gradient(circle closest-side, #def 10px, #7ac 10px, #7ac 20px, #bdf 20px) 50% 50%;
background-size: 50px 50px;
}
РЕЗУЛЬТАТ:
Градиент в виде концентрических кругов создается с помощью функции повтора радиального градиента repeating-radial-gradient().
Пример
div {
width: 100%;
height: 50px;
background: repeating-radial-gradient(circle at 50px 25px, #def, #def 2px, #7ac 2px, #7ac 4px, #bdf 4px, #bdf 6px);
}
РЕЗУЛЬТАТ:
Используя различные градиенты и их сочетания, можно получить интересные эффекты. Например:
- Наложение градиента на фоновое изображение
- Комбинация нескольких градиентов
- Объемная кнопка
- Перфорированная рамка
Поддержка CSS-градиентов современными браузерами достаточно хорошая.
Читать дальше: Flexbox
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости