10 фоновых шаблонов CSS, которые вы можете использовать на своем веб-сайте

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

Ниже приведен список из 10 фоновых шаблонов, которые вы можете использовать в своих проектах.

1. Черный шестиугольник

Код в этих примерах доступен в Репозиторий GitHub и является бесплатным для вас в соответствии с лицензия Массачусетского технологического института.

Этот черный шестиугольный узор обеспечивает очень аккуратный фон шестиугольной сети. На этом фоне хорошо видно название. Вы можете использовать этот шаблон, если вы разрабатываете какие-либо технологические или архитектурные веб-сайты.

HTML-код

<h1>Черный шестиугольник</h1>

CSS-код

тело {
 семейство шрифтов: 'Поделиться технологией', без засечек;
 размер шрифта: 68px;
 белый цвет;
 дисплей: гибкий;
 jsutify-контент: центр;
 выравнивание элементов: по центру;
 маржа: 0;
 ширина: 100vw;
 высота: 100вх;
 текст-тень: 8пикс. 8пикс. 10пикс. #0000008с;
 фоновый цвет: 





instagram viewer

№ 343а40;
 фоновое изображение: URL("данные: изображение/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ширина ='28' высота='49' видбокс='0 0 28 49'%3E%3Cg правило заполнения='даже странно'%3E%3Cg ID='шестиугольники' заполнить='%239C92AC' непрозрачность заливки ='0.25' правило заполнения ='отличный от нуля'%3E%3Cпуть d='М13.99 9.25л13 7.5в15л-13 7.5Л1 31.75в-15л12.99-7.5зМ3 17.9в12.7л10.99 6.34 11-6.35В17.9л-11-6.34Л3 17.9зМ0 15л12.98-7.5В03х-0в6 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v0.117h-. 42.15В49х-2з'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), линейный градиент (вправо вверху, #343a40, #2b2c31, #211f22, #151314, #000000);
}
ч1 {
 поле: 20 пикселей;
}

2. Голубые полосы

Фоновый рисунок с синими полосами использует линейный градиент Свойство CSS для создания градиентных полос на фоне. Ты сможешь изменить цвет фона и цвет градиента в соответствии с вашими требованиями.

HTML-код

<раздел класс ="узоры часть 1"></div>

CSS-код

тело {
 поле: 0px;
}
.паттерны {
 ширина: 100vw;
 высота: 100vw;
}
.pt1 {
 размер фона: 50px 50px;
 фоновый цвет: #0ае;
фоновая картинка: -webkit-линейный-градиент(RGBA(255, 255, 255, .2) 50%, прозрачный 50%, прозрачный);
фоновая картинка: -moz-линейный-градиент(RGBA(255, 255, 255, .2) 50%, прозрачный 50%, прозрачный);
фоновая картинка: -ms-линейный-градиент(RGBA(255, 255, 255, .2) 50%, прозрачный 50%, прозрачный);
фоновая картинка: -o-линейный-градиент(RGBA(255, 255, 255, .2) 50%, прозрачный 50%, прозрачный);
фоновая картинка: линейный градиент(RGBA(255, 255, 255, .2) 50%, прозрачный 50%, прозрачный);
}

3. Шахматная доска

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

HTML-код

<раздел класс ="узоры часть 1"></div>

CSS-код

тело {
 поле: 0px;
}
.паттерны {
 ширина: 100vw;
 высота: 100vw;
}
.pt1 {
 фоновый цвет: #эээ;
 размер фона: 60px 60px;
 фоновая позиция: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, черный), -webkit-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, чернить);
 background-image: -moz-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, черный), -moz-линейный градиент (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, чернить);
 background-image: -ms-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, черный), -ms-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, чернить);
 background-image: -o-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, черный), -o-linear-gradient (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, черный);
 фоновое изображение: линейный градиент (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, черный), линейный градиент (45 градусов, черный 25%, прозрачный 25%, прозрачный 75%, черный 75%, чернить);
}

4. Безмолвное море

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

HTML-код

<раздел класс ="узоры часть 1"></div>

CSS-код

тело {
 поле: 0px;
}
.паттерны {
 ширина: 100vw;
 высота: 100vw;
}
.pt1 {
 фоновый цвет: #026873;
 размер фона: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
фоновая картинка: -webkit-линейный-градиент(0, RGBA(255, 255, 255, .07) 50%, прозрачный 50%), -webkit-линейный-градиент(0, RGBA(255, 255, 255, .13) 50%, прозрачный 50%), -webkit-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .17) 50%), -webkit-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .19) 50%);
фоновая картинка: -moz-линейный-градиент(0, RGBA(255, 255, 255, .07) 50%, прозрачный 50%), -moz-линейный-градиент(0, RGBA(255, 255, 255, .13) 50%, прозрачный 50%), -moz-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .17) 50%), -moz-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .19) 50%);
фоновая картинка: -ms-линейный-градиент(0, RGBA(255, 255, 255, .07) 50%, прозрачный 50%), -ms-линейный-градиент(0, RGBA(255, 255, 255, .13) 50%, прозрачный 50%), -ms-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .17) 50%), -ms-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .19) 50%);
фоновая картинка: -o-линейный-градиент(0, RGBA(255, 255, 255, .07) 50%, прозрачный 50%), -o-линейный-градиент(0, RGBA(255, 255, 255, .13) 50%, прозрачный 50%), -o-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .17) 50%), -o-линейный-градиент(0, прозрачный 50%, RGBA(255, 255, 255, .19) 50%);
фоновая картинка: линейный градиент(0, RGBA(255, 255, 255, .07) 50%, прозрачный 50%), линейный градиент(0, RGBA(255, 255, 255, .13) 50%, прозрачный 50%), линейный градиент(0, прозрачный 50%, RGBA(255, 255, 255, .17) 50%), линейный градиент(0, прозрачный 50%, RGBA(255, 255, 255, .19) 50%);
}

5. Современный кирпич

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

CSS-код

тело {
 фоновое изображение: линейный градиент (45 градусов, прозрачность 20%, черный 25%, прозрачность 25%),
 линейный градиент (-45 градусов, прозрачность 20%, черный 25%, прозрачность 25%),
 линейный градиент (-45 градусов, прозрачность 75%, черный 80%, прозрачность 0),
 радиальный градиент (серый 2px, прозрачный 0);
 размер фона: 30px 30px, 30px 30px;
}

6. Фон в стиле Web3

Вы можете создать Веб3-style background с использованием фонового изображения и добавлением к нему эффекта размытия. В этом примере используется изображение галактики из Unsplash. Вы можете проявить творческий подход и использовать изображение галактики, моря, памятников или чего-либо еще.

HTML-код

<раздел класс ="карта bg-размытие">
<h1>Карточка с градиентным фоном</h1>
</div>

CSS-код

:корень {
 --bg-изображение: URL('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&авто=формат&подходит = обрезка&ш=1169&д=80');
}
тело {
 фоновый цвет: #1D1E22;
 семейство шрифтов: без засечек;
 дисплей: гибкий;
}
.карта {
 маржа: авто;
 набивка: 1рем;
 высота: 300 пикселей;
 ширина: 300 пикселей;
 выравнивание текста: по центру;
 белый цвет;
 дисплей: гибкий;
 выравнивание элементов: по центру;
 выравнивание содержимого: по центру;
 положение: родственник;
 цвет фона: серый;
 радиус границы: 10px;
}
.bg-размытие {
 переполнение: скрыто;
 цвет фона: прозрачный;
}
.bg-размытие::до {
 содержание: '';
 фоновая картинка: вар(--bg-изображение);
 размер фона: обложка;
 высота: 100%;
 ширина: 100%;
 положение: абсолютное;
 фильтр: размытие (30px);
 z-индекс: -1;
}

7. Градиентная фоновая анимация

Градиентный фон анимация широко используется на современных веб-сайтах. Оставайтесь в тренде и используйте градиентную анимацию с фоном. Вы также можете настроить цвета градиента в соответствии с вашими потребностями.

HTML-код

<раздел класс ="d-flex flex-column justify-content-center w-100 h-100"></div>

CSS-код

тело {
фон: линейный градиент(-45 градусов, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 размер фона: 400% 400%;
 анимация: градиент 15s бесконечен;
 высота: 100вх;
}
@ключевые кадры градиент {
 0% {
 фоновая позиция: 0% 50%;
 }
50% {
 фоновое положение: 100% 50%;
 }
100% {
 фоновая позиция: 0% 50%;
 }
}

8. пышные волны

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

HTML-код

<раздел класс ="узоры часть 1"></div>

CSS-код

тело {
 поле: 0px;
}
.паттерны {
 ширина: 100vw;
 высота: 100vw;
}
.pt1 {
фон: -moz-радиальный-градиент(0% 2%, круг, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), -moz-радиальный-градиент(100% 100%, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), никто;
фон: -webkit-радиальный градиент(0% 2%, круг, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), -webkit-радиальный градиент(100% 100%, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), никто;
фон: -ms-радиальный-градиент(0% 2%, круг, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), -ms-радиальный-градиент(100% 100%, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), никто;
фон: -o-радиальный-градиент(0% 2%, круг, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), -o-радиальный-градиент(100% 100%, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), никто;
фон: радиально-градиентный(0% 2%, круг, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), радиально-градиентный(100% 100%, RGBA(96, 16, 48, 0) 9пикс., #661133 10пикс., RGBA(96, 16, 48, 0) 11пикс.), никто;
 размер фона: 20px 20px;
}

9. Скатерть

Нужен стандартный фоновый рисунок для вашего HTML div? Попробуйте эту выкройку скатерти.

CSS-код

тело {
 фон: белый;
фоновая картинка: линейный градиент(90град, RGBA(200,0,0,.5) 50%, прозрачный 0),
линейный градиент(RGBA(200,0,0,.5) 50%, прозрачный 0);
 размер фона: 30px 30px;
}

10. Раздвижные диагонали

В этом эффекте диагональные цвета скользят и накладываются друг на друга. Плавная анимация смешивания цветов может добавить привлекательности вашему сайту.

HTML-код

<раздел класс ="бг"></div>
<раздел класс ="бг бг2"></div>
<раздел класс ="бг бг3"></div>
<раздел класс ="содержание">
<h1>Фоновый эффект скользящих диагоналей</h1>
</div>

CSS-код

HTML {
высота:100%;
}
тело {
допуск:0;
}
.bg {
анимация:горка 3слегкость входабесконечныйчередовать;
фоновая картинка: линейный градиент(-60 градусов, #6c3 50%, #09f 50%);
низ:0;
слева:-50%;
непрозрачность:.5;
позиция:исправлено;
Правильно:-50%;
верхняя:0;
z-индекс:-1;
}
.bg2 {
анимация-направление:альтернативный-реверс;
продолжительность анимации:4 с;
}
.bg3 {
продолжительность анимации:5с;
}
.содержание {
фоновый цвет:ргба (255,255,255,.8);
радиус границы:.25em;
коробка-тень:0 0 .25эмRGBA(0,0,0,.25);
размер коробки:граница;
слева:50%;
набивка:10мин;
позиция:исправлено;
выравнивание текста:центр;
верхняя:50%;
трансформировать:перевести(-50%, -50%);
}
ч1 {
семейство шрифтов: моноширинный;
}
@ключевые кадры горка {
 0% {
трансформировать:перевестиX(-25%);
 }
100% {
трансформировать:перевестиX(25%);
 }
}

Украсьте свой сайт с помощью CSS

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

8 основных советов и приемов CSS, которые должен знать каждый разработчик

Читать далее

Об авторе