10 CSS фонови шаблона, които можете да използвате на вашия уебсайт

Фоновите модели могат радикално да променят облика на вашия уебсайт. Можете лесно да създавате елегантни фонови модели с помощта на CSS, които ще издигнат дизайна на вашия сайт на следващото ниво.

По-долу е даден списък с 10 фонови шаблона, които можете да използвате във вашите проекти.

1. Черният шестоъгълник

Кодът в тези примери е наличен в a GitHub хранилище и е безплатен за използване под Лиценз на MIT.

Този черен шестоъгълен модел осигурява много чист фон на шестоъгълна мрежа. Заглавието е ясно видимо на този фон. Можете да използвате този модел, ако проектирате технологични или архитектурни уебсайтове.

HTML код

<h1>Черният шестоъгълник</h1>

CSS код

тяло {
 шрифтово семейство: 'Споделете Tech', без засечки;
 размер на шрифта: 68px;
 цвят: бял;
 дисплей: гъвкав;
 jsutify-content: център;
 align-items: център;
 марж: 0;
 ширина: 100vw;
 височина: 100vh;
 текстова сянка: 8px 8px 10px #0000008c;
 Цвят на фона: #343a40;
 фоново изображение: url("данни: изображение/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg





instagram viewer

' ширина='28' височина='49' viewBox='0 0 28 49'%3E%3Cg правило за запълване='дори странно'%3E%3Cg id='шестоъгълници' попълване='%239C92AC' fill-opacity='0.25' правило за запълване='различен от нула'%3E%3Cпътека d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34z 11-6.35v 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-.01L17 6.35V0h-2.31h-.01L17 6.35V0h-. 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), линеен градиент (вдясно горе, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 поле: 20px;
}

2. Сините ивици

Фоновият модел на сините ивици използва линеен градиент CSS свойство за създаване на градиентни ленти върху фон. Можеш промяна на цвета на фона и градиентния цвят, за да отговори на вашите изисквания.

HTML код

<div клас="модели pt1"></div>

CSS код

тяло {
 поле: 0px;
}
.модели {
 ширина: 100vw;
 височина: 100vw;
}
.pt1 {
 размер на фона: 50px 50px;
 Цвят на фона: #0ae;
фоново изображение: -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 код

<div клас="модели pt1"></div>

CSS код

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

4. Тихото море

Можете да използвате тези прости хоризонтални линии, за да добавите статичен фон към всеки HTML елемент.

HTML код

<div клас="модели pt1"></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

Можете да създадете a Web3фон в стил, използващ фоново изображение и добавяне на ефект на размазване към него. Този пример използва изображение на галактика от Unsplash. Можете да бъдете креативни и да използвате изображение на галактика, море, паметници или нещо друго.

HTML код

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

CSS код

:корен {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&авто=формат&годни = изрязване&w=1169&q=80');
}
тяло {
 Цвят на фона: #1D1E22;
 семейство шрифтове: sans-serif;
 дисплей: гъвкав;
}
.карта {
 марж: автоматично;
 подплата: 1rem;
 височина: 300px;
 ширина: 300px;
 подравняване на текста: център;
 цвят: бял;
 дисплей: гъвкав;
 align-items: център;
 justify-content: център;
 позиция: относителна;
 цвят на фона: сив;
 радиус на границата: 10px;
}
.bg-blur {
 преливане: скрито;
 цвят на фона: прозрачен;
}
.bg-blur::преди {
 съдържание: '';
 фоново изображение: вар(--bg-изображение);
 фон-размер: корица;
 височина: 100%;
 ширина: 100%;
 позиция: абсолютна;
 филтър: размазване (30px);
 z-индекс: -1;
}

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

Градиентен фон анимациите се използват широко в съвременните уебсайтове. Останете в тенденция и използвайте градиентната анимация с фона. Можете също да персонализирате цветовете на градиента според вашите нужди.

HTML код

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

CSS код

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

8. Криви вълни

Можете да създадете прост модел на извити вълни, като използвате радиален градиент CSS свойство.

HTML код

<div клас="модели pt1"></div>

CSS код

тяло {
 поле: 0px;
}
.модели {
 ширина: 100vw;
 височина: 100vw;
}
.pt1 {
заден план: -moz-radial-gradient(0% 2%, кръг, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), нито един;
заден план: -webkit-radial-gradient(0% 2%, кръг, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), нито един;
заден план: -ms-радиален-градиент(0% 2%, кръг, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-радиален-градиент(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), нито един;
заден план: -o-радиален-градиент(0% 2%, кръг, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-радиален-градиент(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), нито един;
заден план: радиален градиент(0% 2%, кръг, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), радиален градиент(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), нито един;
 размер на фона: 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 клас="bg"></div>
<div клас="bg bg2"></div>
<div клас="bg bg3"></div>
<div клас="съдържание">
<h1>Фонов ефект на плъзгащи се диагонали</h1>
</div>

CSS код

html {
височина:100%;
}
тяло {
марж:0;
}
.bg {
анимация:пързалка 3слекота на влизанебезкраензаместник;
фоново изображение: линеен градиент(-60 градуса, #6c3 50%, #09f 50%);
дъно:0;
наляво:-50%;
непрозрачност:.5;
позиция: фиксирано;
право:-50%;
Горна част:0;
z-индекс:-1;
}
.bg2 {
анимация-режисура:alternate-reverse;
анимация-продължителност:4s;
}
.bg3 {
анимация-продължителност:5 сек;
}
.съдържание {
Цвят на фона:rgba (255,255,255,.8);
граница-радиус:.25em;
кутия-сянка:0 0 .25emrgba(0,0,0,.25);
оразмеряване на кутия: гранична кутия;
наляво:50%;
подплата:10vmin;
позиция: фиксирано;
подравняване на текста:център;
Горна част:50%;
трансформирайте:translate(-50%, -50%);
}
h1 {
шрифтово семейство: моноширина;
}
@ключови кадри пързалка {
 0% {
трансформирайте:translateX(-25%);
 }
100% {
трансформирайте:translateX(25%);
 }
}

Подобрете уебсайта си с помощта на CSS

Използвайте тези CSS фонови модели, за да подобрите дизайна на вашия уебсайт. Можете също така да увеличите своята CSS производителност, като използвате някои страхотни CSS съвети и трикове. Те могат да ви помогнат да създадете гладки дизайни в CSS само с няколко реда код.

8 основни CSS съвета и трика, които всеки разработчик трябва да знае

Прочетете Следващото

За автора