Css фоны: Множественные фоны — CSS | MDN

Автор: EZ UI Design (EZ_UI)

Ссылки: Исходный код / ​​демонстрация

Созданы на: 24 сентября 2019 г.

Сделано с: HTML, SCSS

. -b-w-a, codepenchallenge, pattern.background

11. 1 Element Card Background Patterns (см. описание)

Чистый CSS, простой и компактный метод, без SVG, без изображений, кроме градиентов CSS. Использует технику компоновки маски, которую я так подробно описал в этой статье CSS-Tricks. Некоторые из этих фоновых шаблонов работают только в браузерах, изначально поддерживающих конические градиенты.

Автор: ANA Tudor (TheBabydino)

Ссылки: Исходный код / ​​демонстрация

Создано по адресу: 11 октября 2019

Сделано с: Pug, SCSS, BABEL

CSSS. -processor: SCSS

Препроцессор JS: Babel

Препроцессор HTML: Pug

Теги: маска, css-переменные, cpc-orange-blue, calc 90. 0 2 0 7 Элемент 90.07 90.07 Образцы карточек (только для Chrome)

Полная функциональность, только если conic-gradient() имеет встроенную поддержку (поэтому только Chrome). Посвящается памяти человека, который ушел из жизни в январе этого года.

Автор: ANA Tudor (TheBabydino)

Ссылки: Исходный код / ​​демонстрация

Создана на: 31 января 2019

. -фиолетовый, маска, градиент, конический градиент

13. Вызов точек

Автор: Carlita Centeno (Carlita712)

Ссылки: Исходный код / ​​демонстрация

Созданы на: 19 августа 2019

. 100 точек, codepenchallenge

14. (SVG+CSS) Squiggly Pattern

Аккуратный волнообразный узор с SVG и CSS. Справедливое предупреждение: это вообще не оптимизировано. Я не рекомендую запускать что-то подобное в производство.

Автор: Крис Джонсон (JHNSNC)

Ссылки: Исходный код / ​​демонстрация

Создано: 15 декабря 2016 г.

Сделано с: Pug, SCSS

CSS Pre-Ch : SCSS

JS Pre-Processor: NOT

HTML Preprocessor: PUG

TAGS: SVG, CSS, анимация, шаблон

15. Многие шаблоны CSS

Автор:

15.0006 Сандра Дэвис (Lunamatic)

Ссылки: Исходный код / ​​демонстрация

Создано: 13 июля 2018

Сделано с: HTML, CSS

16. CSS Panes

, CSS

16. CSS

. , в основном

Автор: Джошуар (Джошуар)

Ссылки: Исходный код / ​​демонстрация

Создано на: 29 мая 2016

Сделано с: PUG, SCSS, JS

. 0007

Pre-Processor CSS: SCSS

JS Pre-Processor: NOT

HTML Preprocessor: PUG

. Паттерн решетки

Автор: Ampersand_xyz (Ampersand_xyz)

Ссылки: ИСПРАВЛЕНИЕ / ДЕМО

Созданы: 8 июля 2016 г.

Сделано с: Pug, Sass

.0005 CSS Препроцессор: SASS

JS Pre-Processor: NOT

HTML Pre-Processor: PUG

18. CSS Паттер

Ссылки: Исходный код / ​​демонстрация

Создано: 28 марта 2016 г.

Сделано с: Меньше

19. Структура платка

Автор: Caty Decorah (Katydecorah)

. Автор: Katy Decorah (Katydecorah)0007

Ссылки: Исходный код / ​​демонстрация

Создано: 2 августа 2015 г.

Сделано с: HAML, SCSS

CSS Pre-Processor: SCSS

JS Pre-Processor: : SCSS

JS Pre-Processess: 6666: SCSS

JS. Нет

Препроцессор HTML: Haml

Теги: retrotilesweekend

20. Воспроизведение шаблонов CSS

Modern Bricks!

Автор: Правин Апулия (правеенпулия)

Ссылки: Исходный код / ​​демонстрация

Создано: 18 октября 2015 г.

Сделано с: CSS

Теги: Градиент, шаблон, фона

21. Neon Hexagons Patter Дизайн в основном был скопирован с холстовой ручки Neon Hexagons Михайлеску Мариана Валентина (@mariandev). Я использовал шаблоны и фильтры SVG, а также анимацию CSS, чтобы создать аналогичный эффект, а затем начал стилистическую настройку.

Если фильтры душит ваш компьютер, просто выключите…

Читать More

Автор: Amelia Bellamy-Royds (Ameliabr)

Ссылки: Исходный код / ​​демонстрация

Создано: 25 июля 2015

Сделано с: HTML, CSS

7777777777777777777777777777

.

Теги: neonhexagonweekend, svg, шаблон, фильтр, анимация

22. Шаблон CSS3

Автор: Джино Фариас (ginirsss)

Ссылки:

90 Исходный код 0 / Демо0005 Создан по телефону:

2 октября 2014 г.

Сделано с: HAML, меньше

CSS Препроцессор: Меньше

JS Pre-Processor:

Pre-Processor: HAD

HTML.

Теги: узор, фон, seudoclass, css3

23. Дерьмовое воссоздание обложки книги *The Flame Alphabet*

См. книгу здесь.

Автор: Крис Койер (chriscoyier)

Ссылки: Исходный код / ​​демонстрация

Создано: 28 февраля 2013 г.

Сделано с: HAML, SCSS

Pre-Processor: SCSS

JS Pre-Processor: 6666. Нет

Препроцессор HTML: Haml

Теги: обложка книги, пламя, узор

24. Simple Pattern With CSS3

градиенты, формы, rgba… вдохновлено работой Криса Спунера http://blog.spoongraphics.co.uk/tutorials/how-to-create-an-easy-abstract-blur-pattern-design

Автор: Horge Epuñan (Juanbrujo)

Ссылки: Исходный код / ​​демонстрация, блог. Меньше

CSS Препроцессор: Меньше

JS Pre-Processor: NOT

HTML Препроцессор: HAML

Теги: CSS3, RGBA, HAML

25.

CSS-фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон-Фон. Ананас

Эта идея пришла мне в голову в этом году. Мне очень нравится галерея паттернов CSS3 от Lea Verou, поэтому я решила создать свою собственную фоновую галерею CSS3, чтобы практиковать свои навыки в CSS, и нет лучшей темы, чем фрукты для паттернов :D. Я надеюсь, что codepen понравится этот фон.

Автор: Анджела Веласкес (AngelaVelasquez)

Ссылки: Исходный код/демо

Создано: 8 декабря 2016

Сделано SS 90

with0007

Теги: css, css3, фон

26. CSS Точечный узор/сетка Фон

Простая техника для создания точечного узора или точечной сетки фона. Поддержка: все современные браузеры и IE9+

Автор: Edmundo Santos (Edmundojr)

Ссылки: Исходный код / ​​демонстрация

.

Теги: css, узор, фон, точка, сетка

27.

CSS3 Градиентный шаблон

Автор: Foxeisen (Fox_hover)

Ссылки: Исходный код / ​​демонстрация

Создано: 6 сентября 2016 г.

Сделано с: CSS

. : css, css3, css-gradient

28. Подводный шаблон CSS

Автор: Laura Sage (ThePixelPixie)

Ссылки: Исходный код / ​​Демо

0006 12 августа 2016 г.

Сделано с: HTML, CSS

29. Фоновые шаблоны CSS — коробки

Автор: Paveen Puglia (Paveenpuglia)

Ссылки: Исходный код / ​​Demo

5

. : 23 мая 2016 г.

Сделано с помощью: HTML, CSS

30. 6 Stop Shirt Pattern

Идея из этого твита — минимальное количество остановок, необходимое для воссоздания рисунка рубашки. Веселый полет. @svgeesus и я обсуждали, какое минимальное количество остановок необходимо, чтобы сделать выкройку рубашки этого парня с градиентами CSS

Автор: ANA Tudor (TheBabydino)

Ссылки: Исходный код / ​​демонстрация

Создано: 8 мая 2016

Сделано с: SCSS

. -gradient, sass

31. Простой шаблон

Шаблон для шапки

Автор: Gabriel R (byrass)

Ссылки: Исходный код/Создано 5

0006 15 октября 2015 г.

Сделано с: CSS

Теги: Паттерн

32. Silver Scale

Автор: Yoksel (Yoksel)

Ссылки: Suppare / Demo

. В: 13 февраля 2014 г.

Сделано с: SCSS

Теги: CSS, градиенты, масштаб

33.

Круги

Автор: Yoksel (Yoksel)

Автор: .0005 Ссылки: исходный код / ​​демонстрация

Создано: 7 февраля 2014 г.

Сделано с: CSS

TAGS: Градиенты, CSS, круги

34. Waves

Автор: yoksle. (yoksel)

Ссылки: Исходный код / ​​Демо

Создано: 7 февраля 2014 г.

Сделано с: HTML, SCSS

7s , градиенты0002 35. Drops

Автор: Yoksel (Yoksel)

Ссылки: Исходный код / ​​демонстрация

Создано: 7 февраля 2014

Сделано с: HTML, SCSS

. CSS, Drops, градиенты

36. Hearts

Автор: Yoksel (Yoksel)

Ссылки: Исходный код / ​​демонстрация

Создано: Февраль 7, 2014

. 0006 HTML, SCSS

Теги: CSS, Hearts, Gradients

37. Circles and Dottes

Автор: Yoksel (Yoksel)

Ссылки: исходный код / ​​Demo

. 7, 2014

Сделано с: HTML, SCSS

Теги: CSS, градиенты, Dottes, круги

38. Уголки

Автор: Yoksel (Yoksel)

.0006 исходный код / ​​демонстрация

Создан: 7 февраля 2014 г.

Сделано с: HTML, SCSS

Теги: CSS, градиенты,

39. Squares

Автор: 9000. yoksel)

Ссылки: Исходный код / ​​Демо

Создано: 7 февраля 2014 г.

Сделано с: HTML, SCSS

Square

7s 9s

Теги:

0002 40. Уголки

Автор: Yoksel (Yoksel)

Ссылки: Исходный код / ​​Демо

Созданы: 6 февраля 2014

Сделано с: HTML, SCSS

. css, градиенты, углы

41. Узор Аргайл

попытка создать узор Аргайл с использованием нескольких фонов CSS (линейные градиенты). моя математика на высоте [‘-____-]

Автор: Carpe Numidium (Carpenumidium)

Ссылки: Исходный код / ​​демонстрация

Созданы по телефону: 1 октября 2015

Сделано с: CSS, JS

Теги: CSS-Pattern, Pattern, фон. -изображение, градиенты

42. Jason Quote Bg Pattern

Фоновый узор для виджета Quote. На основе фрагментов Леа Веру.

Автор: Джордж Олару (babbardel)

Ссылки: Исходный код / ​​демонстрация

Создан: 20 августа 20,

Сделано с: SCSS

Теги: CSS3, шаблон, кубики, 3D

43. Laura Sage (ThePixelPixie)

Ссылки: Исходный код / ​​Демо

Создано: 12 августа 2016 г.

Сделано с:

CSS6 HTML, CSS Pattern

With Mode.0003

Pattern Mixin с помощью CSS-фонового смнового режима

Автор: Marinda (Marinda-S)

Ссылки: Исходный код / ​​демонстрация

Создано: 23 июня 2014

Сделано с помощью: SCSS

Теги: css-pattern, css background-blend-mode, sass

45. Полосатый фон

Автор: yoksel (yoksel)

Код

Демо

Создан: 6 февраля 2014 г.

Сделано с: HTML, CSS

Теги: CSS, градиенты, полосы

46. Морозные спирали

Я не могу поверить, что мы можем получить это с градиентами! Чистый CSS.

Автор: yoksel (yoksel)

Ссылки: Исходный код / ​​Демо

Дата создания: 11 февраля 2014 г.

:00005 Сделано с 00007

0004 Теги: css, спирали, градиенты, узоры

47. Css узор

Только css. Слишком сложный, чтобы использоваться в реальном коде:)

Автор: Yoksel (Yoksel)

Ссылки: Исходный код / ​​демонстрация

Создано на: 10 февраля 2014

.

Теги: css, градиенты, узоры

48. Скатерть

Автор: Yoksel (Yoksel)

Ссылки: Исходный код / ​​демонстрация

Созданы: 6 февраля 2014

Сделано с: HTML, SCSS

Теги: CSS, выпускники, Squares, Lines

7 : CSS, Gradients, Squares, Lines

77

49. Diamonds

Автор: Yoksel (Yoksel)

Ссылки: Исходный код / ​​демонстрация

Создано: 6 февраля 2014

Сделано с: HTML, SCSS

. 0004 Теги: CSS, углы, градиенты

50. Диагональные полосы

Автор: Yoksel (Yoksel)

Ссылки: Source Code / Demo

. Сделано с помощью: HTML, SCSS

Теги: css, градиенты, линии

51. Множественные градиенты для причудливых узоров

Автор: Mark Lee (leemark)

Код 6/9 Demo0 Ссылки:0007

, созданный по телефону: 29 ноября 2013 г.

Сделано с: HTML, CSS

Теги: CSS, градиент, фон, узор

52. Blueprint Patter с использованием линейных градиентов CSS3

Автор: Dean (tennowman)

Ссылки: Исходный код / ​​Демо

Создано: 23 ноября 2013 г.

9000 Сделано 5 с

006 CSS

Теги: CSS3, шаблон, градиент, Pure-CSS

53.

Фоновый шаблон

Автор: Yuanchuan (Yuanchuan)

Ссылки: исходный код / ​​Demo

Создано: 666666666 гг. 31 января 2017 г.

Сделано с: HTML, CSS, JS

54. Фоновый узор с бесконечной автопрокруткой

Автор: Нильс Ридеманн (riedemann)

Код 9/ Источник60007

Создан: 8 февраля 2017 г.

Сделано с: HTML, SCSS

55. Фоновые модели

Автор: PEI (Fantaghiro)

Ссылки: СПАСКОЙДКИ / ДЕМО

. Создано: 19 июня 2014 г.

Сделано с помощью: HTML, CSS

Теги: css, фон, узор

56. Анимация фонового рисунка

6 Автор:

60007

Ссылки: Исходный код / ​​демонстрация

Создано: 7 августа 2018 г.

Сделано с: Pug, Stylus

CSS Pre-Processor: Stylus

JS Pre-Processess: :

JS Pre-Processor: 66666:

JS. Нет

Препроцессор HTML: Мопс

57. Фоновый шаблон CSS

Пытался создать этот шаблон http://imgur.com/etTzJp8 и потерпел неудачу.

Автор: carpe numidium (карпенумидий)

Ссылки: Исходный код / ​​демонстрация

Создано: 25 сентября 2015 г.

Сделано с: SCSS

Теги: CSS -Gradients

58.

Секреты CSS — Сложные узоры фона0007

Сделано с: HTML, CSS

Теги: CSS Secrets — Сложные фоновые шаблоны

59. SVG Фоновый шаблон

Автор: Deave Romero (Doveromero)

.

Создано: 2 ноября 2016 г.

Сделано с: HTML, SCSS, JS

60. Шаблоны CSS

Автор: Ссылки 90:009 Wally (CWEI)

6 Исходный код / ​​демонстрация

Создан: 11 августа, 11,

Сделано с: HTML, SCSS

61. CSS Patterns

Автор: Fabien (innergraffiks)

Links: Sourcien (innergraffiks)

: Source Code (innergraffiks)

: Source Code: / Demo

Дата создания: 7 июля 2016 г.

Сделано с помощью: HTML, CSS

62. Шаблон CSS

Автор: Justyna J 5 900 900

006 Исходный код / ​​демо

Создано: 9 февраля 2017 г.

Сделано с помощью: CSS

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

д.

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

Поиск

?

SVG в фонах CSS

— CR

• Глобальное использование

  98,68% + 1,12% знак равно 99,8%

Method of using SVG images as CSS backgrounds

Chrome

1. 4: Partial support
2. 5 — 107: Supported
3. 108: Supported
4. 109 — 111: Supported

Edge

1. 12 — 15: Частичная поддержка
2. 16–107: Поддерживается
3. 108: Поддерживается

Safari

1. 3.1: Не поддерживается
2. 01% — Partial support»> 3.2–4: Частичная поддержка

0 5 — 4: Частичная поддержка

01547

3. 16,1: Поддержано
4. 16,2 — TP: Поддержано

Firefox

1. 2 — 3,6: не поддерживается
2. 4 — 23: ПАРТИЧЕСКАЯ ПОДДЕРЖКА
3. 24 -106: 106: 106: 1011592 4 — 23: Partial Support
4. 24 -106: 106: 106: 106: 106: 106: 106: 106: 106: 106: 106: 106: 106: 106: 101592 4 — 23: ПАРТИЧЕСКАЯ ПОДДЕРЖА : Supported

Opera

1. 9: Not supported
2. 9.5 — 91: Supported
3. 92: Supported

IE

1. 07% — Not supported»> 5.5 — 8: Not supported
2. 9 — 10: Supported
3. 11: Supported

Chrome for Android

1. 108: Supported

Safari on iOS

1. 3.2 — 4.1: Partial support
2. 4.2 — 16.0: Supported
3. 16.1: Supported

Samsung Internet

1. 4 — 18.0 : Поддерживается
2. 19.0: Поддерживается

Opera Mini

1. все: Частичная поддержка

Opera Mobile

1. 10 — 12.1: Частичная поддержка