10 CSS pozadinskih uzoraka koje možete koristiti na svojoj web stranici

Pozadinski uzorci mogu radikalno promijeniti izgled vaše web stranice. Možete jednostavno stvoriti elegantne pozadinske uzorke pomoću CSS-a koji će podići dizajn vaše stranice na sljedeću razinu.

Ispod je popis od 10 pozadinskih uzoraka koje možete koristiti u svojim projektima.

1. Crni šesterokut

Kod u ovim primjerima dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licenca.

Ovaj crni šesterokutni uzorak pruža vrlo urednu pozadinu šesterokutne mreže. Naslov je jasno vidljiv na ovoj pozadini. Ovaj uzorak možete koristiti ako dizajnirate bilo koje tehnološke ili arhitektonske web stranice.

HTML kod

<h1>Crni šesterokut</h1>

CSS kod

tijelo {
 obitelj fontova: 'Dijeli tehniku', sans-serif;
 veličina fonta: 68px;
 boja: bijela;
 zaslon: flex;
 jsutify-content: centar;
 align-items: centar;
 margina: 0;
 širina: 100vw;
 visina: 100vh;
 sjena teksta: 8px 8px 10px #0000008c;
 boja pozadine: #343a40;
 pozadinska slika: url("podaci: slika/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' širina=





instagram viewer

'28' visina='49' viewBox='0 0 28 49'%3E%3Cg pravilo popunjavanja='evenodd'%3E%3Cg id='šesterokuta' ispuniti='%239C92AC' fill-opacity='0.25' fill-rule='različit od nule'%3E%3Cput 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.35V17.9l-11-6.34z. 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2v-.01L17 6.35V0h-2.31. 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linearni gradijent (na vrh desno, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margina: 20px;
}

2. Plave trake

Pozadinski uzorak plavih traka koristi linearno-gradijent CSS svojstvo za stvaranje gradijent traka preko pozadine. Možeš promijeniti boju pozadine i gradijent boje kako bi zadovoljili vaše zahtjeve.

HTML kod

<div klasa="uzorci pt1"></div>

CSS kod

tijelo {
 margina: 0px;
}
.obrasci {
 širina: 100vw;
 visina: 100vw;
}
.pt1 {
 veličina pozadine: 50px 50px;
 boja pozadine: #0ae;
pozadinska slika: -webkit-linearni-gradijent(rgba(255, 255, 255, .2) 50%, transparentan 50%, transparentan);
pozadinska slika: -moz-linearni-gradijent(rgba(255, 255, 255, .2) 50%, transparentan 50%, transparentan);
pozadinska slika: -ms-linearni-gradijent(rgba(255, 255, 255, .2) 50%, transparentan 50%, transparentan);
pozadinska slika: -o-linearni-gradijent(rgba(255, 255, 255, .2) 50%, transparentan 50%, transparentan);
pozadinska slika: linearno-gradijent(rgba(255, 255, 255, .2) 50%, transparentan 50%, transparentan);
}

3. Šahovska ploča

Možete jednostavno stvoriti uzorak dizajna pozadine šahovske ploče pomoću CSS-a. Pokušajte prilagoditi boje kako biste promijenili ovaj dizajn.

HTML kod

<div klasa="uzorci pt1"></div>

CSS kod

tijelo {
 margina: 0px;
}
.obrasci {
 širina: 100vw;
 visina: 100vw;
}
.pt1 {
 boja pozadine: #eee;
 veličina pozadine: 60px 60px;
 background-position: 0 0, 30px 30px;
 pozadinska slika: -webkit-linear-gradient (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crna), -webkit-linear-gradient (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crno);
 background-image: -moz-linear-gradient (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crna), -moz-linear-gradient (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crno);
 pozadinska slika: -ms-linearni gradijent (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crna), -ms-linearni gradijent (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crno);
 pozadinska slika: -o-linearni gradijent (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crna), -o-linearni gradijent (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crna);
 pozadinska slika: linearni gradijent (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crna), linearni gradijent (45 stupnjeva, crna 25%, prozirna 25%, prozirna 75%, crna 75%, crno);
}

4. Tiho more

Možete koristiti ove jednostavne uzorke vodoravnih linija za dodavanje statične pozadine bilo kojem HTML elementu.

HTML kod

<div klasa="uzorci pt1"></div>

CSS kod

tijelo {
 margina: 0px;
}
.obrasci {
 širina: 100vw;
 visina: 100vw;
}
.pt1 {
 boja pozadine: #026873;
 veličina pozadine: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
pozadinska slika: -webkit-linearni-gradijent(0, rgba(255, 255, 255, .07) 50%, transparentan 50%), -webkit-linearni-gradijent(0, rgba(255, 255, 255, .13) 50%, transparentan 50%), -webkit-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .17) 50%), -webkit-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .19) 50%);
pozadinska slika: -moz-linearni-gradijent(0, rgba(255, 255, 255, .07) 50%, transparentan 50%), -moz-linearni-gradijent(0, rgba(255, 255, 255, .13) 50%, transparentan 50%), -moz-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .17) 50%), -moz-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .19) 50%);
pozadinska slika: -ms-linearni-gradijent(0, rgba(255, 255, 255, .07) 50%, transparentan 50%), -ms-linearni-gradijent(0, rgba(255, 255, 255, .13) 50%, transparentan 50%), -ms-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .17) 50%), -ms-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .19) 50%);
pozadinska slika: -o-linearni-gradijent(0, rgba(255, 255, 255, .07) 50%, transparentan 50%), -o-linearni-gradijent(0, rgba(255, 255, 255, .13) 50%, transparentan 50%), -o-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .17) 50%), -o-linearni-gradijent(0, transparentan 50%, rgba(255, 255, 255, .19) 50%);
pozadinska slika: linearno-gradijent(0, rgba(255, 255, 255, .07) 50%, transparentan 50%), linearno-gradijent(0, rgba(255, 255, 255, .13) 50%, transparentan 50%), linearno-gradijent(0, transparentan 50%, rgba(255, 255, 255, .17) 50%), linearno-gradijent(0, transparentan 50%, rgba(255, 255, 255, .19) 50%);
}

5. Moderna cigla

Možete stvoriti čisti CSS moderni uzorak cigle pomoću linearno-gradijent CSS svojstvo.

CSS kod

tijelo {
 pozadinska slika: linearni gradijent (45 stupnjeva, prozirni 20%, crni 25%, transparentni 25%),
 linearni gradijent (-45 stupnjeva, prozirni 20%, crni 25%, transparentni 25%),
 linearni gradijent (-45 stupnjeva, prozirni 75%, crni 80%, transparentni 0),
 radijalni gradijent (siva 2px, prozirna 0);
 veličina pozadine: 30px 30px, 30px 30px;
}

6. Pozadina u stilu Web3

Možete stvoriti a Web3-pozadinu u stilu koristeći pozadinsku sliku i dodajući joj efekt zamućenja. Ovaj primjer koristi sliku galaksije iz Unsplasha. Možete biti kreativni i koristiti sliku galaksije, mora, spomenika ili bilo čega drugog.

HTML kod

<div klasa="kartica bg-zamućenje">
<h1>Kartica s gradijentom pozadine</h1>
</div>

CSS kod

:korijen {
 --bg-slika: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&stane = usjev&w=1169&q=80');
}
tijelo {
 boja pozadine: #1D1E22;
 font-family: sans-serif;
 zaslon: flex;
}
.kartica {
 margina: auto;
 padding: 1rem;
 visina: 300px;
 širina: 300px;
 poravnavanje teksta: središte;
 boja: bijela;
 zaslon: flex;
 align-items: centar;
 justify-content: centar;
 položaj: relativan;
 boja pozadine: siva;
 radijus granice: 10px;
}
.bg-zamućenje {
 prelijevanje: skriveno;
 boja pozadine: prozirna;
}
.bg-zamućenje::prije {
 sadržaj: '';
 pozadinska slika: var(--bg-slika);
 veličina pozadine: naslovnica;
 visina: 100%;
 širina: 100%;
 pozicija: apsolutna;
 filter: zamućenje (30px);
 z-indeks: -1;
}

7. Gradijentna pozadinska animacija

Gradijentna pozadina animacije se široko koriste na modernim web stranicama. Ostanite u trendu i koristite animaciju gradijenta s pozadinom. Također možete prilagoditi boje gradijenta prema svojim potrebama.

HTML kod

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

CSS kod

tijelo {
pozadini: linearno-gradijent(-45 stupnjeva, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 veličina pozadine: 400% 400%;
 animacija: gradijent 15s lakoća beskonačna;
 visina: 100vh;
}
@ključni okviri gradijent {
 0% {
 pozadinski položaj: 0% 50%;
 }
50% {
 pozadinski položaj: 100% 50%;
 }
100% {
 pozadinski položaj: 0% 50%;
 }
}

8. Curvy Waves

Možete stvoriti jednostavan uzorak zakrivljenih valova pomoću radijalno-gradijent CSS svojstvo.

HTML kod

<div klasa="uzorci pt1"></div>

CSS kod

tijelo {
 margina: 0px;
}
.obrasci {
 širina: 100vw;
 visina: 100vw;
}
.pt1 {
pozadini: -moz-radijalni-gradijent(0% 2%, krug, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radijalni-gradijent(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nijedan;
pozadini: -webkit-radial-gradient(0% 2%, krug, 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), nijedan;
pozadini: -ms-radijalni-gradijent(0% 2%, krug, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radijalni-gradijent(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nijedan;
pozadini: -o-radijalni-gradijent(0% 2%, krug, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radijalni-gradijent(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nijedan;
pozadini: radijalno-gradijent(0% 2%, krug, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radijalno-gradijent(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nijedan;
 veličina pozadine: 20px 20px;
}

9. Stolnjak

Trebate standardni uzorak pozadine za svoj HTML div? Isprobajte ovaj uzorak stolnjaka.

CSS kod

tijelo {
 pozadina: bijela;
pozadinska slika: linearno-gradijent(90st, rgba(200,0,0,.5) 50%, transparentan 0),
linearno-gradijent(rgba(200,0,0,.5) 50%, transparentan 0);
 veličina pozadine: 30px 30px;
}

10. Klizne dijagonale

U tom efektu dijagonalne boje klize i preklapaju se jedna s drugom. Glatka animacija miješanja boja može dodati atraktivan dodir vašoj web stranici.

HTML kod

<div klasa="bg"></div>
<div klasa="bg bg2"></div>
<div klasa="bg bg3"></div>
<div klasa="sadržaj">
<h1>Pozadinski efekt kliznih dijagonala</h1>
</div>

CSS kod

html {
visina:100%;
}
tijelo {
margina:0;
}
.bg {
animacija:slide 3slakoća ulaskabeskonačannaizmjenično;
pozadinska slika: linearno-gradijent(-60 stupnjeva, #6c3 50%, #09f 50%);
dno:0;
lijevo:-50%;
neprozirnost:.5;
položaj:popravljeno;
pravo:-50%;
vrh:0;
z-indeks:-1;
}
.bg2 {
animacija-režija:naizmjenični-obrnuti;
animacija-trajanje:4s;
}
.bg3 {
animacija-trajanje:5s;
}
.sadržaj {
boja pozadine:rgba (255,255,255,.8);
granica-radijus:.25em;
kutija-sjena:0 0 .25emrgba(0,0,0,.25);
kutija veličine:border-box;
lijevo:50%;
padding:10vmin;
položaj:popravljeno;
poravnati tekst:centar;
vrh:50%;
transformirati:translate(-50%, -50%);
}
h1 {
obitelj fontova:monospace;
}
@ključni okviri slajd {
 0% {
transformirati:translateX(-25%);
 }
100% {
transformirati:translateX(25%);
 }
}

Uljepšajte svoju web stranicu pomoću CSS-a

Upotrijebite ove CSS pozadinske uzorke kako biste uljepšali dizajn svoje web stranice. Također možete povećati svoju CSS produktivnost koristeći neke cool CSS savjete i trikove. Oni vam mogu pomoći da kreirate uglađene dizajne u CSS-u sa samo nekoliko redaka koda.

8 osnovnih CSS savjeta i trikova koje bi svaki programer trebao znati

Pročitajte dalje

O autoru