Фон градиент css: Как сделать линейный градиент для фона

Содержание

Blueprint фон с помощью градиентов CSS

Разбираемся как используя одни лишь линейные и радиальные градиенты CSS создать клечатый синий паттерн, похожий на светокопировальную бумагу аля Blueprint paper.

Сегодня мы снова познаем силу великого и могучего CSS 3! Используя один лишь div блок и ни единого изображения, мы с вами сделаем фон в стиле светокопировального листа бумаги или blueprint paper. Для начала давайте разберёмся, что такое светокопировальная бумага и где она применялась, а так же где её можно применить в вебе.

Светокопировальная бумага — что это?

Светокопировальная бумага покрыта с одной из сторон очень тонким слоем светочувствительного вещества. Активно использовалась в 20 веке для копирования в светокопировальных аппаратах. Найти blueprint paper в виде форматной бумаги практически невозможно — она поставляется исключительно в рулонах.

Со времени изобретения светокопировальной бумаги в 1861 году она притерпела множество изменений.

Одно из самых видимых изменения — это цвет. В середине 30х годов 20ого века была наиболее распространена синяя копировальная бумага, которая и закрепилась в нашем представлении. Из-за цвета её и назвали на западе blueprint paper, а в СССР её прозвали просто «синькой».

Blueprint-бумага активно использовалась при создании чертежей, схем и прочих полётов инженерной фантазии того времени. Рисунок наносился белым цветом, который был отчётливо виден на синем фоне. Но где нам может понадобиться фон в стиле blueprint/светокопировальной бумаги в вебе?

На самом деле применений тут можно придумать массу — это может быть страница «в разработке», «ошибка 404»; блок-растяжка с начертаниями устройств для визуализации того, что компания разрабатывает адаптивные сайты; blueprint может отлично вписаться в формат уютного техно-блога или для создании страницы с бета-версией программного обеспечения. Использований масса, делается просто, а смотрится отлично! Давайте приступим!

Создаём сетку

Чтобы создать сетку, нам понадобится два градиента — один с вертикальными линиями и один с горизонтальными. Для примера сделаем сетку толщиной в 1 пиксель, чтобы было похоже на школьную тетрадь в клеточку. Пояснения по коду даны в комментариях.

See the Pen Simple crossing strips by Sam Gozman (@samgozman) on CodePen.

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

Накладываем три сетки

Теперь нам понадобится наложить 3 сетки. Каждая последующая сетка будет иметь размер больше, чем предыдущая. Для простоты размер фона всегда будет кратный двум, например:

1 сетка: 128px на 128px
2 сетка: 32px на 32px
3 сетка: 16px на 16px

Также для большего соответвтия поставленной цели подберём более подходящие цвета для фона и для сеток. Для более «натурального» вида сетки поверх синего фона сделаем линии с разным уровнем прозрачности (используем rgba либо hsla цвета). Первая сетка будет с прозрачностью 0.8 и толщиной 3px, вторая 0.6 и 2px, и третья с прозрачностью 0.3 и толщиной 1px соответсвенно. Прозрачность, как и цвет с толщиной, вы можете подобрать на ваше личное усмотрение.

See the Pen Simple blueprint pattern by Sam Gozman (@samgozman) on CodePen.

Добавим радиальный градиент

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

Помните, что градиенты накладываются друг на друга в том порядке, в котором они были описаны. То есть первый градиент будет первым, а последний последним — всё просто. Следовательно, чтобы радиальный градиент не перекрыл все наши сетки, его нужно ставить в самый конец.

See the Pen Simple blueprint pattern with radial gradient by Sam Gozman (@samgozman) on CodePen.

Вот, теперь идеально! Используя только градиенты CSS и один div блок мы смогли реализовать паттерн blueprint, который спокойно можно использовать на вашем сайте. Я думаю, что это в очередной раз подтверждает силу и потенциал CSS.

Для большей реалистичности я бы ещё добавил лёгкий эффект зашумленности (noise effect), но как его грамотно реализовать, не прибегая к base64, используя один лишь css, я не знаю. Если знаете как сделать реалистичный лёгкий эффект зашумленности с помощью градиентов css — пишите в комментарии, дополню статью.

Посмотреть целиком можно на CodePen.

Thursday, 29 December 2016

Follow @samgozman

Gradient — Chakra UI

Градиенты — это способ перехода между двумя или более цветами. Можете добавить поддержка градиента с использованием любого из следующих реквизитов стиля.

bgGradient : сокращенная, удобная поддержка стиля для применения с учетом темы градиенты.
bgClip : сокращение для атрибута background-clip CSS. Полезно, когда создание текстовых градиентов.
backgroundClip : типичный background-clip Атрибут CSS. Полезно, когда создание текстовых градиентов.

Background Gradient API#

Чтобы добавить градиент к элементу, передайте свойство bgGradient и установите его значение следуя API:

linear(<направление> , <от>, <до>)
радиальный(<от>, <до>)

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

Для линейных градиентов <направление> может быть установлено как направление CSS по умолчанию. (например, от до ) или сокращенный эквивалент (например, от до ).

Вот список поддерживаемых сокращений направления и их соответствующие значения:

{

"to-t": "наверх",

"to-tr": "наверх справа",

"to- r": "вправо",

"to-br": "вниз справа",

"to-b": "вниз",

"to-bl": "вниз слева",

"to-l": "влево",

"to-tl": "вверх слева"

}

Usage#

Давайте создадим простой градиент от зеленого.200

до розового .500

Настройка цветов#

Можно использовать как маркеры цвета с учетом темы, так и необработанные значения цвета CSS.

Несколько точек остановки цвета#

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

w='100%'

h='200px'

bgGradient='linear(to-r, серый.300, желтый.400, розовый.200)'

Следуя спецификации градиента CSS, вы также можете определить распределение цветовых остановок

 
    w='100%' 
  h='200px' 
  bgGradient='linear(красный.100 0%, оранжевый.100 25%, желтый.100 50%)' 
  />

Градиент текста API#

Чтобы добавить текстовый градиент, передайте bgGradient в соответствии с API и bgClip . проп к текст .

   
 bgGradient='linear(to-l, #7928CA, #FF0080)' 
  bgClip='text' 
  fontSize='6xl' 
  fontWeight='extrabold03'  
2 > 
  Добро пожаловать в Chakra UI

Отзывчивые градиенты#

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

   
 w='100%' 
  h='200px' 
  bgGradient={[ 
  'linear(to-tr,teal. 300, yellow.400)', 
 '9000 к-т, синий.200, бирюзовый.500)', 
  'линейный(к-б, оранжевый.100, фиолетовый.300)', 
  ]} 
  />

Изменение градиента с помощью псевдопропса#

Вы можете изменить градиент элемента на основе общих псевдоатрибутов CSS (наведение, фокус, активный и т. д.).

Например, при наведении добавьте нужный градиент.

   
 as='button' 
  p={4} 
  color='white' 
  fontWeight='bold' 
  borderRadius='md' 
  bgG , бирюзовый.500, зеленый.500)' 
  _hover={{ 
  bgGradient: 'linear(to-r, red.500, yellow.500)', 
  }} 
  > 
  Щелкните здесь

CSS 90 Gradients 90 | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

CSS-градиенты

- CR

global">
Глобальное использование
94,48% + 4,08% знак равно 98,56%

Метод определения линейного или радиального цветового градиента как изображения CSS.

Chrome

4 - 9: Частичная поддержка
10 - 25: Поддерживается
26 - 106: Поддержано
107: Поддерживается
108 - 110: поддержано

7244 908

558958588955895589585889589589589589589589589589589589589589589558.1028 9028 9028 9028 9028.10258 9028 9028 9028.10258 9028

106: поддерживается

Safari

3. 1–3.2: не поддерживается
4 - 5: Partial support
5.1 - 6: Partial support
6.1 - 15.3: Partial support
15.4 - 16.0: Supported
16.1: Supported
16.2 - TP: Supported

Firefox

2 - 3.5: Not supported
3.6 - 15: Partial support
16 - 35: Partial support
36 - 105: Supported
106: Supported
00% - Supported"> 107 - 108: Supported

Opera

9- 11: не поддерживается
11,1 - 11,5: частичная поддержка
11,6 - 12: Поддержано
12,1 - 90: Поддерживается
91: Поддерживается

IE

5,5 -
IE
1. 5,5 -444844444444444444444444444444444444444444444444443
2. 11: Поддержано
Chrome для Android
1. 106: Поддерживается
Safari на IOS
1. 3,2 - 4. 3: Partial Support
2. 5 -6,1: 4,268.0008
3. 15.4 - 16.0: Supported
4. 16.1: Supported
Samsung Internet
1. 4 - 17.0: Supported
2. 18.0: Supported
Opera Mini
1. all: Not supported
Opera Mobile
1. 10–11: Не поддерживается
2. 11.1–11.5: Частичная поддержка
3. 12: Поддерживается
4. 12.1: Поддерживается
5. 01% - Supported"> 64: Поддерживается
UC Browser Поддерживается
8
08

Android Browser

2.1 - 3: Partial support
4 - 4.3: Supported
4.4 - 4.4.4: Supported
106: Supported

Firefox for Android

105: Supported

QQ Browser

13.1: Supported

Baidu Browser

13.18: Supported

KaiOS Browser

2.5: Supported

Syntax used by browsers with prefixed support may be incompatible with that for proper support.

Штирлиц — Сеть печатных салонов в Перми

Фон градиент css: Как сделать линейный градиент для фона — учебник CSS