CSS-паттерны
Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.
Общий принцип такой: создается градиент, который нужно повторить. По умолчанию он займет всю доступную площадь, но если задать размер фону — получится картинка желаемого размера, которая замостит собой весь фон элемента. Если значения градиента задавать в процентах или em , потом можно будет легко управлять размером узора редактируя размер шрифта и/или background-size .
Например, можно сделать простые полоски:
background: linear-gradient( white 50%, transparent 50% ); background-size: 2em 2em; background-color: black;Белые полоски чередуются с прозрачностью, и могут быть положены на любой фон. Управляя границей между цветом и прозрачностью можно регулировать ширину полос.
Если вместо белого цвета задать полупрозрачный белый или черный, можно получить универсальный паттерн, который будет хорошо выглядеть на любом фоне:
Используя два градиента с цветными полупрозрачными линиями можно сделать клетчатую скатерть:
С помощью разноцветных полосок можно делать небольшие декоративные элементы:
Если нужен полосатый фон посложнее, имеет смысл обратить внимание на принцип цикады:
Принцип заключается в использовании нескольких фонов разного размера. Это означает, что стыковаться они тоже будут в разных местах, таким образом на фоне невозможно будет найти повторяющиеся участки или места стыковки. По-моему, гениально придумано.
Фоны накладываются друг на друга от самого крупного (сверху) до самого мелкого (в самой глубине). В итоге стыки самого мелкого и повторяющегося будут перекрыты вышележащими слоями.
Я сделала 4 полосатых фона разного цвета и задала им разный размер:
background-size: 7em 7em, 5em 5em, 3em 3em, 1em 1em;Это простые числа, то есть те, которые не делятся ни на что кроме себя.
Также из полосатых градиентов легко получить, например, тетрадный лист в линейку:
С простыми линиями всё довольно понятно, но что если нужен паттерн из косых линий?
repeating-linear-gradient должен бы помочь, но на практике градиент ведет себя как попало (порастягивайте окно браузера).
Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются большинством браузеров.
Попробуем сделать простыми полосками, повернутыми на 45°.
background: linear-gradient(-45deg, $transparent 50%, darkkhaki 50%, darkkhaki 60%, $transparent 60% );В примере хорошо видно, что паттерн состоит из повторяющихся квадратиков, градиент идет из нижнего левого угла в верхний правый, но в противоположных углах ничего нет, и линия получается прерывистой.
Чтобы закрыть пробелы, добавим ещё один градиент:
background: linear-gradient(-45deg, $transparent 50%, darkkhaki 50%, darkkhaki 60%, $transparent 60% ), linear-gradient(-45deg, crimson 10%, $transparent 10% );Я сделала уголок ярким, чтобы было видно куда он попал:
Красим уголок в нужный цвет и получаем аккуратные косые линии:
Правда, пришлось немного подрегулировать точки остановки цветов в первом градиенте ( 50% → 49.9% ), но зато теперь стыков вообще не видно.
Если вместо угла указать направление ключевыми словами, например to left top , это позволит изменять угол градиента через изменение его размера, потому что в этом случае градиент будет всегда направлен из одного угла в другой независимо от background-size .
background: linear-gradient(to left top, transparent 48.9%, skyblue 51%, skyblue 78%, transparent 80% ), linear-gradient(to left top, skyblue 28%, transparent 30% ); background-size: 2em 6em;В последней строчке задан градиент прямоугольной формы. Благодаря направлению и значениям остановок в процентах можно сколько угодно менять его размеры — изменится угол наклона линий, но сам паттерн от этого не пострадает:
В некоторых случаях края линий становятся зубчатыми, причем их отрисовка зависит от браузера: Chrome справляется лучше, в Firefox видны ступеньки. Чтобы сделать край плавным, можно сделать стык между цветами не четкий, а размытый, шириной 1-2%. Также следует помнить о проблеме с прозрачными цветами в Firefox — это решается использованием нужного оттенка с полной прозрачностью.
Экспериментируя с линиями можно получить другие интересные узоры:
Впрочем, я увлеклась. С радиальными градиентами тоже можно делать интересное. Вот, например, обычный горох:
Чтобы граница градиента была ровной, без зубчиков, границу прозрачности нужно делать чуть дальше, чем точка остановки цвета. Вебкиты, как обычно, лучше справляются со сглаживанием.
Принцип создания узоров тот же, что и для линейных градиентов. Причем сочетая линейные и радиальные градиенты можно получить из простых геометрических форм более сложные:
Можно делать довольно сложные узоры, для этого лучше всего использовать возможности препроцессоров:
Минусы таких паттернов обычно в длине и сложности кода, а также в недостаточной поддержке старыми браузерами. Для них может потребоваться картинка. Плюсы — градиенты ничего не весят, их не надо запрашивать с сервера, и можно легко менять цвета и размер узора.
Больше паттернов можно увидеть во вдохновляющей галерее от Lea Verou: lea.verou.me/css3patterns/.
Урок по паттернам от Lea Verou: CSS3 Patterns, Explained
Сайдбар
Статьи
- Математические функции в CSS
- Адаптивное видео с помощью встроенных математических функций CSS
- Недоступность в картинках
- Единицы размеров в CSS
- Генератор цветовых тем
- Jekyll → Gatsby
- Вариативные шрифты
- Размеры в SVG
- Адаптивный Pixel Perfect
- Логотип не отвечает или временно недоступен
- SVG-паттерны
- Мыльные пузыри на SVG
- SVG-градиенты
- Весёлая консолька
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- CSS-анимации для ротации изображений
- Анимированные SVG-маски
- Странности обводки в SVG
- SVG-прелоадеры
- Анимируем градиенты ещё раз
- Background-blend-mode
- Возможности оформления SVG
- CSS и SVG маски
- Nth-child и nth-of-type
- SVG-иконки
- SVG: заливка и обводка
- SVG-path
- SVG: группировка и переиспользование элементов
- SVG-фигуры и трансформации
- SVG
- СSS-градиенты и 3D
- Рисовалка анимированных теней
- Свежие CSS-паттерны
- CSS-паттерны
- Радиальные градиенты
- Линейные градиенты
- Крестики-нолики на CSS
- Border-image
- Электронные часы на CSS и JS.
- Сколько весят селекторы?
- Символы юникода
- Свойство content
- Анимируем CSS-градиенты
- Текстовые эффекты
- Древовидный список на CSS
- Css-селекторы, часть 2
- Css-селекторы
- Контекст наложения
- Два способа «прошить» элемент по краю
- Box-sizing
- Цвета в CSS
- Фон под строчками: добавляем поля
- Box-shadow
- Css-фигуры: лепесток
- Transform
- Css Animation
- 3D-куб
- Border-radius
- First letter
- Эти глаза напротив
- CSS-фигуры
- Стрелки с помощью свойства border
- Flexbox
Страницы
Проекты
85 Beautiful CSS Background Patterns
Here is a list of some beautiful CSS background patterns for you to use.
You may also like
Underwater css pattern
Dev: Laura Sage
CSS single div geometric pattern
Dev: Lynn Fisher
Background Pattern
See the Pen Untitled by Bennett Feely (@bennettfeely) on CodePen.
Dev: Bennett Feely
One Div Pie Background
Dev: Olivia Ng
Only CSS: Border Caterpillar
Dev: Yusuke Nakaya
Background pattern
Dev: G V TANISH VETTRIVEL
CSS Heart Polka-dot Background Pattern
Dev: Brett Peters
Children in Need CSS Background Pattern
Dev: Chris Smith
Subtle Gradient Pattern Background
Dev: Chris Smith
CSS Background Pattern
Dev: Joshua Hibbert
Pure CSS Blueprint
Dev: Fabrice W.
Jason Quote Bg Pattern
Dev: George Olaru
Low Contrast Diagonal Stripes Background
Dev: Gabriel Albo
Background pattern
Dev: G V TANISH VETTRIVEL
Background pattern
See the Pen Background pattern 1 by G V TANISH VETTRIVEL (@gvtanish) on CodePen.
Dev: G V TANISH VETTRIVEL
Nezuko Kamado
Dev: Yuhomyan
Just some background patterns
Dev: Chris Smith
CSS: Complex background patterns
Dev: Dmitry
Burberry Background Patterns
Background-patterns
Dev: Webstoryboy
Plaid background
Dev: luisanogueira
Simple conic-gradient() pattern 3
Dev: Ana Tudor
Simple pure CSS café wall illusion – checker version
Dev: Ana Tudor
CSS Background Patterns
Dev: KruizerChick
Webkit Gradients
Pure CSS cube pattern < 200 bytes!
Dev: Ana Tudor
Bone Tessellated Pattern – No Div – Pure CSS
Dev: Josetxu
Simple conic-gradient() pattern 2
Dev: Ana Tudor
Background-patterns
Dev: Webstoryboy
3D Cube Tessellated Pattern – No Div – Pure CSS
Dev: Josetxu
Complex background patterns (CSS SECRETS)
Dev: Quinto Jesús
Background-patterns
Dev: Webstoryboy
Simple pattern in under 100 bytes
Dev: Ana Tudor
Brick Tessellated Pattern – No Div – Pure CSS
Dev: Josetxu
Modal Background Patterns
Dev: Juande M.R. [miXTim]
Some background patterns
Dev: Elitsa Dimitrova
Overlook Hotel Tessellated Pattern – No Div – Pure CSS
Dev: Josetxu
CSS background patterns
Dev: slycreations
Simple conic-gradient() pattern 1
Dev: Ana Tudor
CSS Background Patterns
Simple conic-gradient pattern
Dev: Ana Tudor
Some tiled background
Dev: quicksnap
CSS3 Background Patterns (base)
Background patterns
Background patterns
See the Pen background patterns by stephen sawyer (@WDev) on CodePen.
Dev: stephen sawyer
Background patterns
(Pseudo)random Background Patterns
Dev: TJ Egan
Complex Background Patterns
Dev: Ashley Sullivan
Stripes & other patterns with CSS3 — no images
Dev: Pawan Mall
CSS3 background patterns inspired by Yayoi Kusama
Dev: Morten Skogly
CSS patterns
Dev: mustafa-x
A flattened cereal box
Complex Background Patterns
Dev: yowlonglee
Complex background patterns
Dev: Frédéric MISERY
Pure CSS 1 element gradient tooltip #2 (contentEditable)
Dev: Ana Tudor
Simple CSS gradient patterns
Dev: Ana Tudor
Pure CSS background patterns library
Dev: Michal Porag
Hexagonal Tessellated Pattern – No Div – Pure CSS
Dev: Josetxu
CSS Grids and Background Patterns
Dev: LizFaria
3D Y Tessellated Pattern – No Div – Pure CSS
Dev: Josetxu
Background patterns
Background patterns
Dev: Kathleen Azevedo
Various Background Patterns
Dev: Craig DuBois
Tiny Background Patterns
Dev: Chris Smith
Randomly Generated Playing Card Background Patterns
Dev: Braydon Coyer
CSS Background Patterns
Dev: Brett Peters
Slack CSS background pattern
Dev: Marijke Luttekes
CSS3 Background Patterns (complete)
Dev: Envato Tuts+
CSS Secrets – Complex background patterns
Dev: Vijaya Kumar Vulchi
CSS Pattern
Dev: Jia Qian Koh
Infinite scrolling background
Dev: jasper
CSS Patterns
See the Pen Untitled by Marifel Barbasa (@mrbarbasa) on CodePen.
Dev: Marifel Barbasa
Generative CSS Patterns (click for new pattern)
Dev: Scott Weaver
Background patterns in css using pattern.css
Dev: Bansal
Playing with background patterns
Dev: Ana Tudor
Background linear-gradients
Dev: Sanjay Rohila
Background patterns
Repeating Background Patterns with CSS3 Gradients
Dev: Vian Esterhuizen
CSS Background Patterns – Boxes
Dev: Praveen Puglia
conic-gradient() panels!
Dev: Ana Tudor
Background patterns
Dev: yuanchuan
CSS background patterns library
Dev: Avaz Bokiev
1 element card background patterns (see description)
Dev: Ana Tudor
Background patterns
Dev: yuanchuan
Grid, Flex, and background patterns
Latest Post
55 Cool CSS Calendars
19 Barcodes in CSS
25 CSS Masonry Layout Examples
23 CSS Card Layouts
27 CSS Subscribe Forms
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok