10 vzorov pozadia CSS, ktoré môžete použiť na svojom webe

Vzory pozadia môžu radikálne zmeniť vzhľad vašej webovej stránky. Pomocou CSS môžete jednoducho vytvoriť elegantné vzory pozadia, ktoré posunú dizajn vašej stránky na ďalšiu úroveň.

Nižšie je uvedený zoznam 10 vzorov pozadia, ktoré môžete použiť vo svojich projektoch.

1. Čierny šesťuholník

Kód v týchto príkladoch je dostupný v a Úložisko GitHub a môžete ho bezplatne používať pod licencia MIT.

Tento čierny šesťuholníkový vzor poskytuje veľmi elegantné sieťové pozadie šesťuholníka. Na tomto pozadí je názov jasne viditeľný. Tento vzor môžete použiť, ak navrhujete akékoľvek technologické alebo architektonické webové stránky.

HTML kód

<h1>Čierny šesťuholník</h1>

CSS kód

telo {
 rodina písiem: 'Zdieľať Tech', bezpätkové;
 veľkosť písma: 68px;
 farba: biela;
 displej: flex;
 jsutify-content: center;
 align-items: center;
 okraj: 0;
 šírka: 100vw;
 výška: 100vh;
 tieň textu: 8px 8px 10px #0000008c;
 farba pozadia: #343a40;
 obrázok na pozadí: url("údaje: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' šírka =





instagram viewer

'28' výška ='49' viewBox='0 0 28 49'%3E%3Cg pravidlo plnenia='Párny Nepárny'%3E%3Cg id='šesťuholníkov' fill='%239C92AC' fill-opacity='0.25' fill-rule='nenulové'%3E%3Cpath 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-13127018V6,05V17,9l-13127018 12,69v2,3zm0 18,5L12,98 41v8h-2v-6,85L0 35,81v-2,3zM15 0v7,5L27,99 15H28v-2,31h-,01L17 6,35V9170h-52,01Lh 42,15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineárny gradient (sprava hore, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 okraj: 20px;
}

2. Modré pásy

Vzor na pozadí modrých pásikov používa lineárny gradient Vlastnosť CSS na vytváranie pruhov prechodu na pozadí. Môžeš zmeniť farbu pozadia a farbu prechodu podľa vašich požiadaviek.

HTML kód

<trieda div="vzory pt1"></div>

CSS kód

telo {
 okraj: 0px;
}
.vzory {
 šírka: 100vw;
 výška: 100vw;
}
.pt1 {
 background-size: 50px 50px;
 farba pozadia: #0ae;
obrázok na pozadí: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparentný 50%, transparentný);
obrázok na pozadí: -moz-lineárny-gradient(rgba(255, 255, 255, .2) 50%, transparentný 50%, transparentný);
obrázok na pozadí: -ms-lineárny-gradient(rgba(255, 255, 255, .2) 50%, transparentný 50%, transparentný);
obrázok na pozadí: -o-lineárny-gradient(rgba(255, 255, 255, .2) 50%, transparentný 50%, transparentný);
obrázok na pozadí: lineárny gradient(rgba(255, 255, 255, .2) 50%, transparentný 50%, transparentný);
}

3. šachovnica

Pomocou CSS môžete jednoducho vytvoriť vzor dizajnu pozadia šachovnice. Skúste upraviť farby, aby ste zmenili tento dizajn.

HTML kód

<trieda div="vzory pt1"></div>

CSS kód

telo {
 okraj: 0px;
}
.vzory {
 šírka: 100vw;
 výška: 100vw;
}
.pt1 {
 farba pozadia: #eee;
 background-size: 60px 60px;
 background-position: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45°, čierna 25%, transparentná 25%, transparentná 75%, čierna 75%, čierna), -webkit-linear-gradient (45°, čierna 25%, transparentná 25%, transparentná 75%, čierna 75%, čierna);
 background-image: -moz-linear-gradient (45°, čierna 25%, transparentná 25%, transparentná 75%, čierna 75%, čierna), -moz-lineárny gradient (45°, čierna 25%, transparentná 25%, transparentná 75%, čierna 75%, čierna);
 background-image: -ms-linear-gradient (45°, čierna 25%, transparentná 25%, transparentná 75%, čierna 75 %, čierna), -ms-lineárny gradient (45 stupňov, čierna 25 %, transparentná 25 %, transparentná 75 %, čierna 75 %, čierna);
 background-image: -o-linear-gradient (45deg, čierna 25%, transparentná 25%, transparentná 75%, čierna 75%, čierna), -o-linear-gradient (45deg, čierna 25%, transparentná 25%, transparentná 75 %, čierna 75 %, čierna);
 obrázok na pozadí: lineárny gradient (45 stupňov, čierna 25 %, priehľadná 25 %, priehľadná 75 %, čierna 75 %, čierna), lineárny gradient (45 stupňov, čierna 25 %, priehľadná 25 %, priehľadná 75 %, čierna 75 %, čierna);
}

4. Tiché more

Tieto jednoduché vzory vodorovných čiar môžete použiť na pridanie statického pozadia k akémukoľvek prvku HTML.

HTML kód

<trieda div="vzory pt1"></div>

CSS kód

telo {
 okraj: 0px;
}
.vzory {
 šírka: 100vw;
 výška: 100vw;
}
.pt1 {
 farba pozadia: #026873;
 veľkosť pozadia: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
obrázok na pozadí: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparentný 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparentný 50%), -webkit-linear-gradient(0, transparentný 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparentný 50%, rgba(255, 255, 255, .19) 50%);
obrázok na pozadí: -moz-lineárny-gradient(0, rgba(255, 255, 255, .07) 50%, transparentný 50%), -moz-lineárny-gradient(0, rgba(255, 255, 255, .13) 50%, transparentný 50%), -moz-lineárny-gradient(0, transparentný 50%, rgba(255, 255, 255, .17) 50%), -moz-lineárny-gradient(0, transparentný 50%, rgba(255, 255, 255, .19) 50%);
obrázok na pozadí: -ms-lineárny-gradient(0, rgba(255, 255, 255, .07) 50%, transparentný 50%), -ms-lineárny-gradient(0, rgba(255, 255, 255, .13) 50%, transparentný 50%), -ms-lineárny-gradient(0, transparentný 50%, rgba(255, 255, 255, .17) 50%), -ms-lineárny-gradient(0, transparentný 50%, rgba(255, 255, 255, .19) 50%);
obrázok na pozadí: -o-lineárny-gradient(0, rgba(255, 255, 255, .07) 50%, transparentný 50%), -o-lineárny-gradient(0, rgba(255, 255, 255, .13) 50%, transparentný 50%), -o-lineárny-gradient(0, transparentný 50%, rgba(255, 255, 255, .17) 50%), -o-lineárny-gradient(0, transparentný 50%, rgba(255, 255, 255, .19) 50%);
obrázok na pozadí: lineárny gradient(0, rgba(255, 255, 255, .07) 50%, transparentný 50%), lineárny gradient(0, rgba(255, 255, 255, .13) 50%, transparentný 50%), lineárny gradient(0, transparentný 50%, rgba(255, 255, 255, .17) 50%), lineárny gradient(0, transparentný 50%, rgba(255, 255, 255, .19) 50%);
}

5. Moderná tehla

Môžete vytvoriť čistý moderný tehlový vzor CSS pomocou lineárny gradient Vlastnosť CSS.

CSS kód

telo {
 obrázok na pozadí: lineárny gradient (45 stupňov, priehľadné 20 %, čierne 25 %, priehľadné 25 %),
 lineárny gradient (-45 stupňov, priehľadná 20 %, čierna 25 %, priehľadná 25 %),
 lineárny gradient (-45 stupňov, priehľadná 75 %, čierna 80 %, priehľadná 0),
 radiálny gradient (sivá 2px, priehľadná 0);
 veľkosť pozadia: 30px 30px, 30px 30px;
}

6. Pozadie štýlu Web3

Môžete vytvoriť a Web3-štýl pozadia pomocou obrázka na pozadí a pridaním efektu rozmazania. Tento príklad používa obrázok galaxie z Unsplash. Môžete byť kreatívni a použiť obrázok galaxie, mora, pamiatok alebo čohokoľvek iného.

HTML kód

<trieda div="karta bg-blur">
<h1>Karta s prechodovým pozadím</h1>
</div>

CSS kód

:koreň {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formát&fit=úroda&w=1169&q = 80');
}
telo {
 farba pozadia: #1D1E22;
 font-family: sans-serif;
 displej: flex;
}
.karta {
 okraj: auto;
 vypchávka: 1rem;
 výška: 300px;
 šírka: 300px;
 text-align: center;
 farba: biela;
 displej: flex;
 align-items: center;
 justify-content: center;
 poloha: relatívna;
 farba pozadia: šedá;
 border-radius: 10px;
}
.bg-blur {
 prepad: skrytý;
 farba pozadia: transparentná;
}
.bg-blur::predtým {
 obsah: '';
 obrázok na pozadí: var(--bg-image);
 veľkosť pozadia: obal;
 výška: 100 %;
 šírka: 100 %;
 pozícia: absolútna;
 filter: rozostrenie (30px);
 z-index: -1;
}

7. Gradient Background Animation

Prechodové pozadie animácie sú široko používané na moderných webových stránkach. Zostaňte v trende a použite gradientnú animáciu s pozadím. Môžete si tiež prispôsobiť farby prechodu podľa svojich potrieb.

HTML kód

<trieda div="d-flex flex-column justify-content-center w-100 h-100"></div>

CSS kód

telo {
pozadie: lineárny gradient(-45 stupňov, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 veľkosť pozadia: 400 % 400 %;
 animácia: gradient 15s ľahkosť nekonečný;
 výška: 100vh;
}
@kľúčové snímky gradient {
 0% {
 pozícia pozadia: 0 % 50 %;
 }
50% {
 pozícia pozadia: 100 % 50 %;
 }
100% {
 pozícia pozadia: 0 % 50 %;
 }
}

8. Zakrivené vlny

Môžete vytvoriť jednoduchý vzor zakrivených vĺn pomocou radiálny gradient Vlastnosť CSS.

HTML kód

<trieda div="vzory pt1"></div>

CSS kód

telo {
 okraj: 0px;
}
.vzory {
 šírka: 100vw;
 výška: 100vw;
}
.pt1 {
pozadie: -moz-radiálny-gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radiálny-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žiadny;
pozadie: -webkit-radial-gradient(0% 2%, kruh, 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), žiadny;
pozadie: -ms-radiálny-gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiálny-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žiadny;
pozadie: -o-radiálny-gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radiálny-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žiadny;
pozadie: radiálny gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiálny gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žiadny;
 background-size: 20px 20px;
}

9. Obrus

Potrebujete štandardný vzor pozadia pre svoj HTML div? Vyskúšajte tento vzor obrusu.

CSS kód

telo {
 pozadie: biele;
obrázok na pozadí: lineárny gradient(90stupeň, rgba(200,0,0,.5) 50%, transparentný 0),
lineárny gradient(rgba(200,0,0,.5) 50%, transparentný 0);
 background-size: 30px 30px;
}

10. Posuvné uhlopriečky

V tomto efekte sa diagonálne farby posúvajú a navzájom sa prekrývajú. Hladká animácia miešania farieb môže dodať vašej webovej stránke atraktívny nádych.

HTML kód

<trieda div="bg"></div>
<trieda div="bg bg2"></div>
<trieda div="bg bg3"></div>
<trieda div="obsahu">
<h1>Efekt pozadia posuvných uhlopriečok</h1>
</div>

CSS kód

html {
výška:100%;
}
telo {
marža:0;
}
.bg {
animácie:šmykľavka 3seasy-in-outnekonečnéstriedať;
obrázok na pozadí: lineárny gradient(-60 stupňov, #6c3 50%, #09f 50%);
dno:0;
vľavo:-50%;
nepriehľadnosť:.5;
pozíciu:opravené;
správny:-50%;
top:0;
z-index:-1;
}
.bg2 {
animácia-smer:striedavý-reverzný;
trvanie animácie: 4 s;
}
.bg3 {
trvanie animácie: 5 s;
}
.obsah {
farba pozadia:rgba (255,255,255,.8);
hraničný polomer:,25 em;
box-shadow:0 0 0,25 emrgba(0,0,0,.25);
box-sizing:border-box;
vľavo:50%;
vypchávka: 10vmin;
pozíciu:opravené;
zarovnanie textu:stred;
top:50%;
transformovať:preložiť(-50%, -50%);
}
h1 {
font-family:jednopriestorový;
}
@kľúčové snímky šmykľavka {
 0% {
transformovať:translateX(-25%);
 }
100% {
transformovať:translateX(25%);
 }
}

Upravte svoj web pomocou CSS

Použite tieto vzory pozadia CSS na vylepšenie dizajnu svojich webových stránok. Svoju produktivitu CSS môžete zvýšiť aj pomocou niekoľkých skvelých tipov a trikov CSS. Môžu vám pomôcť vytvoriť úhľadné návrhy v CSS pomocou niekoľkých riadkov kódu.

8 základných CSS tipov a trikov, ktoré by mal vedieť každý vývojár

Prečítajte si ďalej

O autorovi