10 ЦСС позадинских образаца које можете користити на својој веб локацији

Позадински обрасци могу радикално променити изглед ваше веб странице. Можете лако да креирате елегантне позадинске обрасце користећи ЦСС који ће подићи дизајн ваше веб локације на виши ниво.

Испод је листа од 10 позадинских образаца које можете користити у својим пројектима.

1. Црни хексагон

Код у овим примерима је доступан у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценца.

Овај црни шестоугаони узорак пружа веома уредну шестоугаону мрежну позадину. Наслов је јасно видљив на овој позадини. Можете користити овај образац ако дизајнирате било које технолошке или архитектонске веб странице.

ХТМЛ код

<х1>Црни хексагон</h1>

ЦСС код

тело {
 породица фонтова: 'Схаре Тецх', Санс Сериф;
 фонт-сизе: 68пк;
 бела боја;
 дисплеј: флек;
 јсутифи-цонтент: центар;
 алигн-итемс: центар;
 маргина: 0;
 ширина: 100вв;
 висина: 100вх;
 сенка текста: 8пк 8пк 10пк #0000008ц;
 боја позадине: #343а40;
 бацкгроунд-имаге: урл("подаци: слика/свг+кмл,%3Цсвг кмлнс='http://www.w3.org/2000/svg' видтх='28' висина='49' виевБок=

instagram viewer

'0 0 28 49'%3Е%3Цг филл-руле='чак и чудно'%3Е%3Цг ид='хекагонс' филл='%239Ц92АЦ' филл-опацити='0.25' филл-руле='различит од нуле'%3Е%3Цпатх д='М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.39з 11.75В17.9л-11.34з 6.35В17.9л-11-6.34з 12.69в2.3зм0 18.5Л12.98 41в8х-2в-6.85Л0 35.81в-2.3зМ15 0в7.5Л27.99 15Х28в-2.31х-.01Л17 6.35В0х-2в-.01Л17 6.35В0х-2в-.01Л17 6.35В0х-2.3зМ15 42.15В49х-2з'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), линеарни градијент (до врха десно, #343а40, #2б2ц31, #211ф22, #151314, #000000);
}
х1 {
 маргина: 20пк;
}

2. Тхе Блуе Стрипс

Позадински образац плавих трака користи линеарно-градијент ЦСС својство за креирање градијент трака преко позадине. Можете промените боју позадине и градијентна боја која испуњава ваше захтеве.

ХТМЛ код

<див цласс="обрасци пт1"></div>

ЦСС код

тело {
 маргина: 0пк;
}
.обрасци {
 ширина: 100вв;
 висина: 100вв;
}
.пт1 {
 бацкгроунд-сизе: 50пк 50пк;
 боја позадине: #0ае;
позадинска слика: -вебкит-линеар-градиент(ргба(255, 255, 255, .2) 50%, транспарентан 50%, транспарентан);
позадинска слика: -моз-линеар-градиент(ргба(255, 255, 255, .2) 50%, транспарентан 50%, транспарентан);
позадинска слика: -мс-линеарни-градијент(ргба(255, 255, 255, .2) 50%, транспарентан 50%, транспарентан);
позадинска слика: -о-линеарни-градијент(ргба(255, 255, 255, .2) 50%, транспарентан 50%, транспарентан);
позадинска слика: линеарно-градијент(ргба(255, 255, 255, .2) 50%, транспарентан 50%, транспарентан);
}

3. Шаховска табла

Можете лако да креирате шаблон дизајна позадине шаховске табле користећи ЦСС. Покушајте да прилагодите боје да бисте променили овај дизајн.

ХТМЛ код

<див цласс="обрасци пт1"></div>

ЦСС код

тело {
 маргина: 0пк;
}
.обрасци {
 ширина: 100вв;
 висина: 100вв;
}
.пт1 {
 боја позадине: #еее;
 бацкгроунд-сизе: 60пк 60пк;
 бацкгроунд-поситион: 0 0, 30пк 30пк;
 бацкгроунд-имаге: -вебкит-линеар-градиент (45 степени, црна 25%, провидна 25%, транспарентна 75%, црна 75%, црна), -вебкит-линеар-градиент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црн);
 бацкгроунд-имаге: -моз-линеар-градиент (45 степени, црна 25%, провидна 25%, транспарентна 75%, црна 75%, црна), -моз-линеар-градиент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црн);
 бацкгроунд-имаге: -мс-линеар-градиент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црна), -мс-линеарни-градијент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црн);
 позадинска слика: -о-линеарни градијент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црна), -о-линеарни градијент (45 степени, црна 25%, провидна 25%, транспарентна 75%, црна 75%, црна);
 позадинска слика: линеарни градијент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црна), линеарни градијент (45 степени, црна 25%, провидна 25%, провидна 75%, црна 75%, црн);
}

4. Тихо море

Можете користити ове једноставне шаблоне хоризонталних линија да додате статичну позадину било ком ХТМЛ елементу.

ХТМЛ код

<див цласс="обрасци пт1"></div>

ЦСС код

тело {
 маргина: 0пк;
}
.обрасци {
 ширина: 100вв;
 висина: 100вв;
}
.пт1 {
 боја позадине: #026873;
 бацкгроунд-сизе: 13пк 13пк, 29пк 29пк, 37пк 37пк, 53пк 53пк;
позадинска слика: -вебкит-линеар-градиент(0, ргба(255, 255, 255, .07) 50%, транспарентан 50%), -вебкит-линеар-градиент(0, ргба(255, 255, 255, .13) 50%, транспарентан 50%), -вебкит-линеар-градиент(0, транспарентан 50%, ргба(255, 255, 255, .17) 50%), -вебкит-линеар-градиент(0, транспарентан 50%, ргба(255, 255, 255, .19) 50%);
позадинска слика: -моз-линеар-градиент(0, ргба(255, 255, 255, .07) 50%, транспарентан 50%), -моз-линеар-градиент(0, ргба(255, 255, 255, .13) 50%, транспарентан 50%), -моз-линеар-градиент(0, транспарентан 50%, ргба(255, 255, 255, .17) 50%), -моз-линеар-градиент(0, транспарентан 50%, ргба(255, 255, 255, .19) 50%);
позадинска слика: -мс-линеарни-градијент(0, ргба(255, 255, 255, .07) 50%, транспарентан 50%), -мс-линеарни-градијент(0, ргба(255, 255, 255, .13) 50%, транспарентан 50%), -мс-линеарни-градијент(0, транспарентан 50%, ргба(255, 255, 255, .17) 50%), -мс-линеарни-градијент(0, транспарентан 50%, ргба(255, 255, 255, .19) 50%);
позадинска слика: -о-линеарни-градијент(0, ргба(255, 255, 255, .07) 50%, транспарентан 50%), -о-линеарни-градијент(0, ргба(255, 255, 255, .13) 50%, транспарентан 50%), -о-линеарни-градијент(0, транспарентан 50%, ргба(255, 255, 255, .17) 50%), -о-линеарни-градијент(0, транспарентан 50%, ргба(255, 255, 255, .19) 50%);
позадинска слика: линеарно-градијент(0, ргба(255, 255, 255, .07) 50%, транспарентан 50%), линеарно-градијент(0, ргба(255, 255, 255, .13) 50%, транспарентан 50%), линеарно-градијент(0, транспарентан 50%, ргба(255, 255, 255, .17) 50%), линеарно-градијент(0, транспарентан 50%, ргба(255, 255, 255, .19) 50%);
}

5. Модерна цигла

Можете креирати чист ЦСС модеран узорак цигле користећи линеарно-градијент ЦСС својство.

ЦСС код

тело {
 позадинска слика: линеарни градијент (45 степени, провидна 20%, црна 25%, провидна 25%),
 линеарни градијент (-45 степени, провидни 20%, црни 25%, транспарентни 25%),
 линеарни градијент (-45 степени, провидни 75%, црни 80%, транспарентни 0),
 радијални градијент (сива 2пк, транспарентна 0);
 бацкгроунд-сизе: 30пк 30пк, 30пк 30пк;
}

6. Позадина у стилу Веб3

Можете креирати а Веб3-позадину у стилу користећи позадинску слику и додајући јој ефекат замућења. Овај пример користи слику галаксије са Унспласх-а. Можете бити креативни и користити слику галаксије, мора, споменика или било чега другог.

ХТМЛ код

<див цласс="картица бг-блур">
<х1>Картица са градијентом позадине</h1>
</div>

ЦСС код

:корен {
 --бг-имаге: урл('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&икид=МнвкМјА3фДБ8МХкваГ90би1вИВдлфХк8фГВуфДБ8фХк8&ауто=формат&фит = усев&в=1169&к=80');
}
тело {
 боја позадине: #1Д1Е22;
 фонт-фамили: санс-сериф;
 дисплеј: флек;
}
.картица {
 маргина: ауто;
 паддинг: 1рем;
 висина: 300пк;
 ширина: 300пк;
 тект-алигн: центар;
 бела боја;
 дисплеј: флек;
 алигн-итемс: центар;
 јустифи-цонтент: центар;
 положај: релативан;
 боја позадине: сива;
 бордер-радиус: 10пк;
}
.бг-блур {
 преливање: скривено;
 боја позадине: транспарентна;
}
.бг-блур::пре него што {
 садржај: '';
 позадинска слика: вар(--бг-имаге);
 величина позадине: корице;
 висина: 100%;
 ширина: 100%;
 позиција: апсолутна;
 филтер: замућење (30пк);
 з-индекс: -1;
}

7. Градијентна позадинска анимација

Градијентна позадина анимације се широко користе на савременим веб локацијама. Останите у тренду и користите анимацију градијента са позадином. Такође можете прилагодити боје градијента према вашим потребама.

ХТМЛ код

<див цласс="д-флек флек-цолумн јустифи-цонтент-центер в-100 х-100"></div>

ЦСС код

тело {
позадини: линеарно-градијент(-45дег, #ее7752, #е73ц7е, #23а6д5, #23д5аб);
 величина позадине: 400% 400%;
 анимација: градијент 15с лакоћа бесконачна;
 висина: 100вх;
}
@кеифрамес градијент {
 0% {
 бацкгроунд-поситион: 0% 50%;
 }
50% {
 бацкгроунд-поситион: 100% 50%;
 }
100% {
 бацкгроунд-поситион: 0% 50%;
 }
}

8. Цурви Вавес

Можете креирати једноставан узорак закривљених таласа користећи радијално-градијент ЦСС својство.

ХТМЛ код

<див цласс="обрасци пт1"></div>

ЦСС код

тело {
 маргина: 0пк;
}
.обрасци {
 ширина: 100вв;
 висина: 100вв;
}
.пт1 {
позадини: -моз-радиал-градиент(0% 2%, круг, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), -моз-радиал-градиент(100% 100%, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), ниједан;
позадини: -вебкит-радиал-градиент(0% 2%, круг, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), -вебкит-радиал-градиент(100% 100%, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), ниједан;
позадини: -мс-радијални-градијент(0% 2%, круг, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), -мс-радијални-градијент(100% 100%, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), ниједан;
позадини: -о-радијални-градијент(0% 2%, круг, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), -о-радијални-градијент(100% 100%, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), ниједан;
позадини: радијално-градијент(0% 2%, круг, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), радијално-градијент(100% 100%, ргба(96, 16, 48, 0) 9пк, #661133 10пк, ргба(96, 16, 48, 0) 11пк), ниједан;
 бацкгроунд-сизе: 20пк 20пк;
}

9. Столњак

Треба вам стандардни образац позадине за ваш ХТМЛ див? Испробајте овај узорак столњака.

ЦСС код

тело {
 позадина: бела;
позадинска слика: линеарно-градијент(90дег, ргба(200,0,0,.5) 50%, транспарентан 0),
линеарно-градијент(ргба(200,0,0,.5) 50%, транспарентан 0);
 бацкгроунд-сизе: 30пк 30пк;
}

10. Клизне дијагонале

У овом ефекту, дијагоналне боје клизе и преклапају се једна са другом. Глатка анимација мешања боја може додати атрактиван додир вашој веб локацији.

ХТМЛ код

<див цласс="бг"></div>
<див цласс="бг бг2"></div>
<див цласс="бг бг3"></div>
<див цласс="садржаја">
<х1>Позадински ефекат клизних дијагонала</h1>
</div>

ЦСС код

хтмл {
висина:100%;
}
тело {
маргина:0;
}
.бг {
анимација:Тобоган 3слакоћа уласкабесконачаннаизменично;
позадинска слика: линеарно-градијент(-60дег, #6ц3 50%, #09ф 50%);
дно:0;
лево:-50%;
непрозирност:.5;
положај:фикед;
јел тако:-50%;
топ:0;
з-индекс:-1;
}
.бг2 {
анимација-режија:алтернате-реверсе;
анимација-трајање:4с;
}
.бг3 {
анимација-трајање:5с;
}
.садржај {
боја позадине:ргба (255,255,255,.8);
граница-радијус:.25ем;
кутија-сенка:0 0 .25емргба(0,0,0,.25);
кутија величине:бордер-бок;
лево:50%;
паддинг:10вмин;
положај:фикед;
Поравнање текста:центар;
топ:50%;
трансформисати:транслате(-50%, -50%);
}
х1 {
породица фонтова:моноспаце;
}
@кеифрамес Тобоган {
 0% {
трансформисати:транслатеКс(-25%);
 }
100% {
трансформисати:транслатеКс(25%);
 }
}

Улепшајте своју веб локацију користећи ЦСС

Користите ове ЦСС позадинске обрасце да бисте побољшали дизајн своје веб странице. Такође можете повећати своју ЦСС продуктивност користећи неке цоол ЦСС савете и трикове. Они вам могу помоћи да креирате углађене дизајне у ЦСС-у са само неколико линија кода.

8 основних ЦСС савета и трикова које сваки програмер треба да зна

Реад Нект

О аутору