10 vzorcev ozadja CSS, ki jih lahko uporabite na svojem spletnem mestu

Vzorci ozadja lahko korenito spremenijo videz vašega spletnega mesta. S pomočjo CSS lahko preprosto ustvarite elegantne vzorce ozadja, ki bodo popeljali zasnovo vašega spletnega mesta na višjo raven.

Spodaj je seznam 10 vzorcev ozadja, ki jih lahko uporabite v svojih projektih.

1. Črni šesterokotnik

Koda v teh primerih je na voljo v a GitHub repozitorij in je brezplačen za uporabo pod MIT licenca.

Ta črni šesterokotnik zagotavlja zelo lepo ozadje šesterokotnega omrežja. Na tem ozadju je naslov jasno viden. Ta vzorec lahko uporabite, če načrtujete katero koli tehnološko ali arhitekturno spletno mesto.

HTML koda

<h1>Črni šesterokotnik</h1>

koda CSS

telo {
 družina pisave: 'Delite Tech', sans-serif;
 velikost pisave: 68px;
 barva: bela;
 zaslon: flex;
 jsutify-content: center;
 align-items: center;
 marža: 0;
 širina: 100vw;
 višina: 100vh;
 senca besedila: 8px 8px 10px #0000008c;
 Barva ozadja: #343a40;
 slika ozadja: url("podatki: slika/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' širina ='28' višina =





instagram viewer

'49' viewBox='0 0 28 49'%3E%3Cg pravilo polnjenja='sodo liho'%3E%3Cg id='šesterokotniki' fill='%239C92AC' fill-opacity='0.25' fill-rule='nenič'%3E%3Cpot 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 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2.01L17 6.35V0h-2.85. 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linearni gradient (na vrh desno, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 rob: 20px;
}

2. Modri ​​trakovi

Vzorec ozadja z modrimi trakovi uporablja linearni gradient Lastnost CSS za ustvarjanje gradientnih trakov na ozadju. Ti lahko spremenite barvo ozadja in barvo preliva, ki ustreza vašim zahtevam.

HTML koda

<div razred="vzorci pt1"></div>

koda CSS

telo {
 rob: 0px;
}
.vzorci {
 širina: 100vw;
 višina: 100vw;
}
.pt1 {
 velikost ozadja: 50px 50px;
 Barva ozadja: #0ae;
slika ozadja: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, pregleden 50%, pregleden);
slika ozadja: -moz-linearni-gradient(rgba(255, 255, 255, .2) 50%, pregleden 50%, pregleden);
slika ozadja: -ms-linearni-gradient(rgba(255, 255, 255, .2) 50%, pregleden 50%, pregleden);
slika ozadja: -o-linearni-gradient(rgba(255, 255, 255, .2) 50%, pregleden 50%, pregleden);
slika ozadja: linearni gradient(rgba(255, 255, 255, .2) 50%, pregleden 50%, pregleden);
}

3. Šahovska deska

Z uporabo CSS lahko preprosto ustvarite vzorec ozadja šahovnice. Poskusite prilagoditi barve, da spremenite ta dizajn.

HTML koda

<div razred="vzorci pt1"></div>

koda CSS

telo {
 rob: 0px;
}
.vzorci {
 širina: 100vw;
 višina: 100vw;
}
.pt1 {
 Barva ozadja: #eee;
 velikost ozadja: 60px 60px;
 položaj ozadja: 0 0, 30px 30px;
 slika ozadja: -webkit-linear-gradient (45 stopinj, črna 25%, prosojna 25%, prozorna 75%, črna 75%, črna), -webkit-linear-gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, Črna);
 slika ozadja: -moz-linear-gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, črna), -moz-linear-gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, Črna);
 slika ozadja: -ms-linearni gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, črna), -ms-linearni gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, Črna);
 slika ozadja: -o-linearni gradient (45 stopinj, črna 25%, prosojna 25%, prozorna 75%, črna 75%, črna), -o-linearni gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, črna);
 slika ozadja: linearni gradient (45 stopinj, črna 25%, prosojna 25%, prosojna 75%, črna 75%, črna), linearni gradient (45 stopinj, črna 25%, prozorna 25%, prozorna 75%, črna 75%, Črna);
}

4. Tiho morje

S temi preprostimi vzorci vodoravnih črt lahko dodate statično ozadje kateremu koli elementu HTML.

HTML koda

<div razred="vzorci pt1"></div>

koda CSS

telo {
 rob: 0px;
}
.vzorci {
 širina: 100vw;
 višina: 100vw;
}
.pt1 {
 Barva ozadja: #026873;
 velikost ozadja: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
slika ozadja: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, pregleden 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, pregleden 50%), -webkit-linear-gradient(0, pregleden 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, pregleden 50%, rgba(255, 255, 255, .19) 50%);
slika ozadja: -moz-linearni-gradient(0, rgba(255, 255, 255, .07) 50%, pregleden 50%), -moz-linearni-gradient(0, rgba(255, 255, 255, .13) 50%, pregleden 50%), -moz-linearni-gradient(0, pregleden 50%, rgba(255, 255, 255, .17) 50%), -moz-linearni-gradient(0, pregleden 50%, rgba(255, 255, 255, .19) 50%);
slika ozadja: -ms-linearni-gradient(0, rgba(255, 255, 255, .07) 50%, pregleden 50%), -ms-linearni-gradient(0, rgba(255, 255, 255, .13) 50%, pregleden 50%), -ms-linearni-gradient(0, pregleden 50%, rgba(255, 255, 255, .17) 50%), -ms-linearni-gradient(0, pregleden 50%, rgba(255, 255, 255, .19) 50%);
slika ozadja: -o-linearni-gradient(0, rgba(255, 255, 255, .07) 50%, pregleden 50%), -o-linearni-gradient(0, rgba(255, 255, 255, .13) 50%, pregleden 50%), -o-linearni-gradient(0, pregleden 50%, rgba(255, 255, 255, .17) 50%), -o-linearni-gradient(0, pregleden 50%, rgba(255, 255, 255, .19) 50%);
slika ozadja: linearni gradient(0, rgba(255, 255, 255, .07) 50%, pregleden 50%), linearni gradient(0, rgba(255, 255, 255, .13) 50%, pregleden 50%), linearni gradient(0, pregleden 50%, rgba(255, 255, 255, .17) 50%), linearni gradient(0, pregleden 50%, rgba(255, 255, 255, .19) 50%);
}

5. Moderna opeka

Z uporabo lahko ustvarite čisti CSS sodoben vzorec opeke linearni gradient lastnost CSS.

koda CSS

telo {
 slika ozadja: linearni gradient (45 stopinj, prosojna 20%, črna 25%, prozorna 25%),
 linearni gradient (-45 stopinj, transparentno 20%, črno 25%, transparentno 25%),
 linearni gradient (-45 stopinj, transparentno 75%, črno 80%, transparentno 0),
 radialni gradient (siva 2px, transparentna 0);
 velikost ozadja: 30px 30px, 30px 30px;
}

6. Ozadje v slogu Web3

Ustvarite lahko a Web3-style ozadje, ki uporablja sliko ozadja in ji doda učinek zamegljenosti. Ta primer uporablja sliko galaksije iz Unsplash. Lahko ste ustvarjalni in uporabite podobo galaksije, morja, spomenikov ali česar koli drugega.

HTML koda

<div razred="kartica bg-blur">
<h1>Kartica z gradientnim ozadjem</h1>
</div>

koda CSS

:root {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&avto=format&fit=prirezek&w = 1169&q=80');
}
telo {
 Barva ozadja: #1D1E22;
 družina pisav: sans-serif;
 zaslon: flex;
}
.kartica {
 marža: samodejno;
 oblazinjenje: 1 rem;
 višina: 300px;
 širina: 300px;
 poravnava besedila: središče;
 barva: bela;
 zaslon: flex;
 align-items: center;
 justify-content: center;
 položaj: relativni;
 barva ozadja: siva;
 radij obrobe: 10px;
}
.bg-blur {
 prelivanje: skrito;
 barva ozadja: prozorna;
}
.bg-blur:: prej {
 vsebina: '';
 slika ozadja: var(--bg-slika);
 velikost ozadja: naslovnica;
 višina: 100 %;
 širina: 100 %;
 položaj: absolutni;
 filter: zamegljenost (30px);
 z-indeks: -1;
}

7. Gradientna animacija ozadja

Gradientno ozadje animacije se pogosto uporabljajo na sodobnih spletnih mestih. Ostanite v trendu in uporabite gradientno animacijo z ozadjem. Barve preliva lahko prilagodite tudi svojim potrebam.

HTML koda

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

koda CSS

telo {
ozadje: linearni gradient(-45 stopinj, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 velikost ozadja: 400 % 400 %;
 animacija: gradient 15s enostavnost neskončno;
 višina: 100vh;
}
@ključni okvirji gradient {
 0% {
 položaj ozadja: 0% 50%;
 }
50% {
 položaj ozadja: 100 % 50 %;
 }
100% {
 položaj ozadja: 0% 50%;
 }
}

8. Curvy Waves

Z uporabo lahko ustvarite preprost vzorec ukrivljenih valov radialni gradient lastnost CSS.

HTML koda

<div razred="vzorci pt1"></div>

koda CSS

telo {
 rob: 0px;
}
.vzorci {
 širina: 100vw;
 višina: 100vw;
}
.pt1 {
ozadje: -moz-radialni-gradient(0% 2%, krog, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radialni-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nobenega;
ozadje: -webkit-radial-gradient(0% 2%, krog, 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), nobenega;
ozadje: -ms-radialni-gradient(0% 2%, krog, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radialni-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nobenega;
ozadje: -o-radialni-gradient(0% 2%, krog, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radialni-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nobenega;
ozadje: radialni gradient(0% 2%, krog, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radialni gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nobenega;
 velikost ozadja: 20px 20px;
}

9. Prt

Potrebujete standardni vzorec ozadja za svoj HTML div? Preizkusite ta vzorec namiznega prta.

koda CSS

telo {
 ozadje: belo;
slika ozadja: linearni gradient(90stopinj, rgba(200,0,0,.5) 50%, pregleden 0),
linearni gradient(rgba(200,0,0,.5) 50%, pregleden 0);
 velikost ozadja: 30px 30px;
}

10. Drsne diagonale

Pri tem učinku diagonalne barve drsijo in se prekrivajo med seboj. Gladka animacija mešanja barv lahko vašemu spletnemu mestu doda privlačen pridih.

HTML koda

<div razred="bg"></div>
<div razred="bg bg2"></div>
<div razred="bg bg3"></div>
<div razred="vsebino">
<h1>Učinek ozadja drsnih diagonal</h1>
</div>

koda CSS

html {
višina:100%;
}
telo {
marža:0;
}
.bg {
animacija:zdrs 3senostavnost vnosaneskončnonadomestni;
slika ozadja: linearni gradient(-60 stopinj, #6c3 50%, #09f 50%);
dno:0;
levo:-50%;
motnost:.5;
položaj:popravljeno;
prav:-50%;
vrh:0;
z-indeks:-1;
}
.bg2 {
animacija - režija:izmenično-obrnjeno;
animacija-trajanje:4s;
}
.bg3 {
animacija-trajanje:5s;
}
.vsebina {
Barva ozadja:rgba (255,255,255,.8);
obrobni polmer:.25em;
škatla-senca:0 0 .25emrgba(0,0,0,.25);
velikost škatle:border-box;
levo:50%;
oblazinjenje:10vmin;
položaj:popravljeno;
za poravnavo besedila:center;
vrh:50%;
preoblikovati:translate(-50%, -50%);
}
h1 {
družina pisav: enoprostorni;
}
@ključni okvirji zdrs {
 0% {
preoblikovati:translateX(-25%);
 }
100% {
preoblikovati:translateX(25%);
 }
}

Popestrite svoje spletno mesto s CSS

Uporabite te vzorce ozadja CSS, da popestrite zasnovo vašega spletnega mesta. Svojo CSS produktivnost lahko povečate tudi z nekaj kul nasveti in triki za CSS. Pomagajo vam lahko ustvariti elegantne dizajne v CSS z le nekaj vrsticami kode.

8 bistvenih CSS nasvetov in trikov, ki bi jih moral poznati vsak razvijalec

Preberite Naprej

O avtorju