Как сделать полупрозрачный градиент css
Добавил пользователь Skiper Обновлено: 04.10.2024
Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет два типа градиентов:
- Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяемые их центром)
CSS линейные градиенты
Для создания линейного градиента необходимо определить не менее двух цветовых ограничителей. Цветовые ограничители — это цвета, которые вы хотите сделать плавными переходами между ними. Можно также задать начальную точку и направление (или угол) вместе с эффектом градиента.
Синтаксис
Линейный градиент-сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, начинающийся сверху. Оно начинает красно, переходя к желтому цвету:
Пример
Линейный градиент-слева направо
В следующем примере показан линейный градиент, начинающийся слева. Оно начинает красно, переходя к желтому цвету:
Пример
Линейный градиент-Диагональ
Можно сделать градиент по диагонали, указав как горизонтальные, так и вертикальные начальные позиции.
В следующем примере показан линейный градиент, начинающийся в левом верхнем углу (и направляется в нижний правый угол). Оно начинает красно, переходя к желтому цвету:
Пример
Использование углов
Если требуется больший контроль над направлением градиента, можно определить угол, а не предопределенные направления (снизу, сверху, вправо, влево, вниз вправо и т.д.).
Синтаксис
Угол указывается в виде угла между горизонтальной линией и линией градиента.
В следующем примере показано, как использовать углы на линейных градиентах:
Пример
Использование нескольких цветовых остановок
В следующем примере показан линейный градиент (сверху вниз) с несколькими остановками цвета:
Пример
В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:
Пример
Использование прозрачности
CSS градиенты также поддерживают прозрачность, которая может быть использована для создания эффектов затухания.
Чтобы добавить прозрачность, мы используем функцию RGBA () для определения ограничителей цвета. Последний параметр в функции RGBA () может быть значением от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, начинающийся слева. Он начинает полностью прозрачным, переходя к полному красному цвету:
Пример
Повторение линейного градиента
Функция повторения-линейного градиента () используется для повторения линейных градиентов:
Пример
Повторяющийся линейный градиент:
CSS радиальные градиенты
Радиальный градиент определяется его центром.
Для создания радиального градиента необходимо также определить по крайней мере два цветовых ограничителя.
Синтаксис
По умолчанию форма имеет эллипс, размер — самый дальний угол, а положение — центр.
Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)
В следующем примере показан радиальный градиент с равномерно раскрытием цветовых остановок:
Пример
Радиальный градиент-по-разному пробелом останавливается цвет
В следующем примере показан радиальный градиент с разными интервалами цвета:
Пример
Задать форму
Параметр Shape определяет форму. Он может принимать значение окружности или эллипса. Значением по умолчанию является эллипс.
В следующем примере показан радиальный градиент с формой окружности:
Пример
Использование различных ключевых слов размера
Параметр size определяет размер градиента. Он может принимать четыре значения:
Пример
Радиальный градиент с различными ключевыми словами размера:
Повторение радиального градиента
Функция повторения-радиального градиента () используется для повторения радиальных градиентов:
Времена, когда сделать градиент на сайте можно было только с использованием картинок давно прошли. Теперь достаточно просто создавать градиенты внутри CSS стилей.
Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image . И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:
Поменять направление возможно, указав его вначале, перед первым цветом.
Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg .
Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.
Каждый из четырех цветов будет занимать равное количество доступного пространства, что даст нам гладкий и сбалансированный градиент.
Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно после цвета. Потренируйтесь на градиент css генераторе выше.
Радиальный градиент
Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient .
Такой радиальный градиент принимает форму родительского блока, поэтому вместо круга мы получили эллипс. Чтобы градиент был в форме круга независимо от пропорций родителя, необходимо указать ключевое слово circle .
К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:
Практическое использование CSS градиента
Давайте попробуем использовать градиент более оригинальным способом.
Градиент поверх картинки
Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.
Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним.
Мы получаем такой эффект:
Градиент в тексте
Градиент в тексте - это классный эффект, хотя и не полностью поддерживаемый в чистом виде. Вместо него мы используем свойство background-clip , это что-то вроде хака, но отлично работающего хака.
Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.
Профессиональная разработка сайтов под заказ
Прекрасный способ визуально выразить главную мысль
Полезные инструменты для веб разработчиков
Делимся в опытом и знанием в IT сфере
© 2019 — 2022 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ
Использование изображений делает страницы более привлекательными. Однако добавление текста поверх фотографий может оказаться непростой задачей – необходимо выбрать подходящий стиль оформления, который позволит читать надписи без затруднений. Есть несколько подходов к решению этой проблемы.
Решение 1: выбор правильного фонового изображения
Это самый простой прием – подбирайте фотографии, на которых мало деталей либо есть обширные пустые области.
Если своих подходящих фотографий нет, подобрать бесплатное (или платное) изображение можно на фотостоках вроде Adobe Stock или Unsplash .
Решение 2: редактирование фонового фото
Предположим, что вам хочется использовать конкретное изображение, на котором слишком много мелких деталей или нет пустого пространства. В этом случае необходимо изменить цветовой профиль фотографии, здесь на помощь придет Фотошоп или любой другой графический редактор . Затемнение фонового изображения облегчит чтение светлого текста, и наоборот – осветление фона подойдет для темного текста.
Для создания такого эффекта добавьте белый либо черный слой под изображение, а затем настройте прозрачность фото до нужного уровня осветления или затемнения.
Пример редактирования изображения в Фотошопе с помощью настройки прозрачности
Как вариант, можно попробовать уменьшить насыщенность фото, либо добавить наложение цвета. В зависимости от специфики исходного изображения, эти приемы также помогут создать подходящий фон для текста.
Пример редактирования изображения в Фотошопе с помощью наложения цвета и уменьшения насыщенности фото
Перечисленные приемы отлично подходят, если вам нужно подготовить всего несколько фотографий. Ручная обработка множества изображений окажется утомительной.
Доступность
Если вы обрабатываете фотографии в Фотошопе – не добавляйте текст непосредственно на изображения. Такие надписи окажутся недоступными для программ чтения экрана, которыми пользуются люди с проблемным зрением. Сайт должен быть максимально удобным для всех пользователей.
Атрибутом alt нужно пользоваться всегда, однако он предусматривает описание для самого изображения, а не текста на нем.
Кроме того, если изображение добавляется с помощью CSS свойств background или background- image , добавить описание фото в alt не получится. Поэтому использовать фоновые изображения таким образом не стоит:
Решение 3: использование CSS
К счастью, существует способ использования фонового изображения и текста с помощью других CSSсвойств и приемов.
Свойства color и text-shadow
В некоторых случаях для эффектного выделения текста на фоне изображения достаточно манипуляций с цветом и тенью. Если фотография достаточно темная – подойдет белый или другой светлый цвет; в случае со светлым фоном нужен темный текст.
В приведенном ниже примере заголовок расположен в верхней части изображения, где нет мелких деталей – поэтому контраста между цветом текста и фоном достаточно для чтения. А вот параграф под заголовком расположен поверх мелких деталей, и прочитать его сложно.
Скриншот с сервиса Codepen, где расположен код примера в HTML и CSS
Решить такую проблему можно с помощью свойства text-shadow для добавления тени к тексту:
Скриншот с Codepen, где хранится код примера в HTML и CSS
Однако такой способ не всегда хорошо срабатывает, особенно в случае со множеством мелких деталей на фото и длинными текстовыми блоками, набранными мелким шрифтом. Подробнее о добавлении тени к тексту рассказано в этой статье .
Свойство background (цвет фона)
Другой вариант – использовать свойство background , которое позволяет изменить как цвет шрифта, так и тон изображения. Свойство background на самом деле – сокращенная запись (shorthand) для целого набора различных свойств, но в этой статье мы будем рассматривать в основном background-color и background-image .
Начнем с использования background-color для определения цвета элемента, который будет выступать в качестве подложки текста. Свойство можно использовать с любым типом значения цвета .
С помощью background-color можно задать цвет фона для любого отдельного элемента, к примеру для тега h1 , как показано ниже. Свойство также можно применить к целой группе элементов – для этого используют элемент-контейнер, к примеру, text-container div добавит белый фон под все параграфы текста сразу:
Скриншот примера с Codepen, где расположен полный код HTML и CSS
Чтобы фоновое изображение было видно сквозь подложку, вместо названия цвета или его HEX-кода используют настройки rgba()
Первые три цифры от 0 до 255 задают соотношение красного, зеленого и голубого компонентов цвета. Значения разделяются запятыми. Последняя цифра задает значение для альфа-канала, и таким образом, определяет степень прозрачности. Допустимое значение лежит в диапазоне от 0 до 1; при этом 0 соответствует полной прозрачности, а единица – полностью непрозрачному цвету. Значение можно также задавать в процентах – к примеру, 0.8 соответствует 80%.
Скриншот примера на Codepen с полным кодом HTML и CSS
Нужные RGB значения подбирают с помощью Фотошопа или любого онлайн-сервиса. Вот примеры удобных сервисов:
Описанный выше прием добавляет только фон для элементов, но не для всего изображения сразу. Кроме того, текстовые элементы обычно являются блочными, и потому заполняют всю ширину своего контейнера. Поэтому добавление цветного фона с помощью background-color создаст подложку на всю ширину контейнера, а не только под текстом, как это видно по заголовку на скриншотах выше.
Если такой результат вам не нужен, параметры фона можно задать с помощью значения display . Прием подробно разобран в этом видео .
Наложение цвета с помощью background-image
Использование свойства background-image позволяют добавить цветной слой поверх всего фонового изображения. Более того, метод предусматривает:
- использование нескольких изображений в качестве фона;
- применение градиентной заливки;
- совместное использование градиента и фонового изображения для создания подложки.
Синтаксис
Множественные ссылки на фоновые изображения разделяют запятыми. Изображения будут выводиться стопкой, одно поверх другого. Первое фото в списке окажется сверху следующего за ним изображения.
Для создания плавного перехода между двумя и более цветами используют CSS градиент . Линейный градиент linear-gradient , использующий два цвета поверх изображения, задают таким образом:
Вот так этот метод выглядит на примере конкретной фоновой фотографии:
Здесь использовано наложение черного цвета, при этом значение rgba() обеспечивает нужную степень прозрачности. Градиентная функция нуждается как минимум в двух цветовых значениях – первое из них служит началом градиента, второе – завершением. Поскольку значения при задании этого стиля получаются достаточными длинными, для удобства чтения можно расположить их на отдельных строках. Впрочем, это вопрос личных предпочтений.
Если двухцветный градиентный переход вам не нужен, используйте одно и то же значение цвета как для начала, так и для завершения градиента – просто задайте разные значения прозрачности одного цвета.
Свойство rgba() использует скобки, и линейный градиент linear-gradient() – тоже, поэтому будьте внимательны: можно легко поставить меньше (или больше) скобок, чем нужно.
Редактирование HTML и CSS кода позволяет оценить любые комбинации эффектов – без изменения изображений в текстовом редакторе. Для более подробного изучения методов, рассмотренных выше, рекомендуется просмотр этого видеоурока .
CSS3 градиенты (градиентов) позволяет отображать плавный переход между двумя или более заданных цветов.
Раньше вы должны использовать изображения для достижения этих эффектов. Однако при использовании CSS3 градиентов (градиентов), вы можете уменьшить загрузку событий и использование широкополосной связи. Кроме того, элементы эффектов перехода выглядят лучше при увеличении масштаба, так как градиент (градиент) генерируется браузером.
CSS3 определяет два типа градиентов (градиентов):
- Линейный градиент (линейный Градиент) - вверх / вниз / влево / вправо / диагональном направлении
- Радиальный градиент (Radial Градиенты) - определяется их центром
Поддержка браузеров
Числа в таблице атрибутов определяет полную поддержку первой версии браузера.
Позади с -webkit -, - moz- или -о- определяет необходимое число с атрибутом префикса для поддержки первой версии.
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
CSS3 линейный градиент
Чтобы создать линейный градиент, необходимо определить, по крайней мере, два цвета узлов. Цвет узел, который цвет вы хотите, чтобы показать плавный переход. В то же время, вы можете также установить начальную точку и направление (или угол).
Линейные примеры градиента:
грамматика
Линейный градиент - сверху вниз (по умолчанию)
Следующий пример демонстрирует, линейный градиент от вершины. Отправной точкой является красный, и медленно переход к синий:
примеров
Линейный градиент сверху вниз:
Линейный градиент - слева направо
Следующий пример демонстрирует, линейный градиент слева. Отправной точкой является красный, и медленно переход к синий:
примеров
Линейный градиент слева направо:
Линейный градиент - диагональная
Вы можете сделать градиент по диагонали, определяя горизонтальную и вертикальную стартовую позицию.
Следующий пример демонстрирует, с верхнего левого угла (внизу справа) линейный градиент. Отправной точкой является красный, и медленно переход к синий:
примеров
Из верхнего левого в нижний правый угол линейного градиента:
угол использования
Если вы хотите получить больше контроля над направлением градиента, можно определить точку зрения, а не заранее определенном направлении (вниз, вверх, направо, налево, направо вниз, и так далее).
грамматика
Угол относится к углу между горизонтальным и градиентной линии, вычисленный против часовой стрелки. Другими словами, 0deg создаст градиент снизу вверх, 90deg создает градиент слева направо.
Тем не менее, обратите внимание, что многие браузеры (Chrome, Safari, fiefox и т.д.) с использованием старого стандарта, а именно 0deg создаст градиент слева направо, 90deg создаст градиент снизу вверх. Формула преобразования 90 - х = у , где х является стандартным угол, у является нестандартным углом.
В следующем примере показано, как использовать линейный угол градиента:
примеров
Линейный градиент с определенным углом:
Использование нескольких цветовых узлов
В следующем примере показано, как задать множество цветовых узлов:
примеров
Линейный градиент сверху вниз с множеством цветовых узлов:
В следующем примере показано, как создать радугу цветов и текста с линейным градиентом:
примеров
Прозрачность (Transparency)
CSS3 градиенты также поддерживает прозрачность (прозрачность), она может быть использована для создания эффекта ослабления замираний.
Чтобы добавить прозрачности, мы используем функцию RGBA (), чтобы определить цвет узла. RGBA () Функция последним параметром является значение от 0 до 1, которое определяет прозрачность цвета: 0 полностью прозрачный, 1 полностью прозрачна.
Следующий пример демонстрирует, линейный градиент слева. Отправной точкой является полностью прозрачным, и медленно переход к полностью непрозрачным красным:
примеров
Линейный градиент слева направо, с прозрачностью:
Дубликат линейный градиент
функция повторения-линейного градиента () используется, чтобы повторить линейный градиент:
примеров
Дубликат линейный градиент:
CSS3 радиальный градиент
Радиальный градиент определяется его центром.
Чтобы создать радиальный градиент, необходимо также определить, по крайней мере, два цвета узлов. Цвет узел, который цвет вы хотите, чтобы показать плавный переход. В то же время, вы можете также указать центр градацией, формы (прототип или овальной формы), размер. По умолчанию, те, в центре находится центр (показанный в центре), форма градация Эллипс (представлены эллипсом), размер градиента является дальняя-угол (представлен в дальний угол).
Радиальные примеры градиента:
грамматика
Radial Gradient - Цвет узлы равномерно распределены (по умолчанию)
примеров
Радиальная градиент цвета узла равномерно распределены:
Радиальный градиент - цвет неравномерно распределены узлы
примеров
Радиальная градиент цвета узел распределены неравномерно:
Настройка формы
Параметр формы определяет форму. Это может быть значение, круг или эллипс. Отличающийся тем, что круг, представляющий круг, эллипс показывает овальные. Значение по умолчанию эллипсом.
примеров
Форма кругового радиального градиента:
Используйте ключевые слова в различных размерах
Параметр размера определяет размер градиента. Это могут быть следующие четыре значения:
примеров
Радиальный градиент с различными размерами ключевых слов:
Повторите радиальный градиент
Функция повторения-радиального градиента () используется, чтобы повторить радиальный градиент:
примеров
Повторите радиальный градиент:
Читайте также: