10 CSS-i taustamustrit, mida saate oma veebisaidil kasutada

Taustamustrid võivad teie veebisaidi välimust radikaalselt muuta. CSS-i abil saate hõlpsalt luua elegantseid taustamustreid, mis viivad teie saidi kujunduse järgmisele tasemele.

Allpool on nimekiri 10 taustamustrist, mida saate oma projektides kasutada.

1. Must kuusnurk

Nende näidete kood on saadaval a GitHubi hoidla ja see on teile tasuta kasutamiseks all MIT litsents.

See must kuusnurkmuster annab väga korraliku kuusnurkse võrgutausta. Pealkiri on sellel taustal selgelt nähtav. Saate seda mustrit kasutada tehnoloogiliste või arhitektuuriliste veebisaitide kujundamisel.

HTML-kood

<h1>Must kuusnurk</h1>

CSS-kood

keha {
 font-perekond: 'Jagage Tech', sans-serif;
 fondi suurus: 68 pikslit;
 värvus: valge;
 ekraan: flex;
 jsutify-content: center;
 joonda-elemendid: keskel;
 marginaal: 0;
 laius: 100vw;
 kõrgus: 100vh;
 tekstivari: 8px 8px 10px #0000008c;
 taustavärv: #343a40;
 taustapilt: url("andmed: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' laius='28' kõrgus ='49' viewBox='0 0 28 49'%3E%3Cg täitmise reegel=





instagram viewer

'isegi veider'%3E%3Cg id='kuusnurgad' täitke='%239C92AC' täite-läbipaistmatus='0.25' fill-rule='nullist erinev'%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-11-L.L. 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-4h.17-29zm 42,15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineaarne gradient (paremal üles, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 veeris: 20 pikslit;
}

2. Sinised ribad

Siniste ribade taustamuster kasutab lineaarne gradient CSS-i atribuut taustal gradiendiribade loomiseks. Sa saad muuta taustavärvi ja gradiendi värv, mis vastab teie nõuetele.

HTML-kood

<div klass="mustrid pt1"></div>

CSS-kood

keha {
 veeris: 0 pikslit;
}
.mustrid {
 laius: 100vw;
 kõrgus: 100vw;
}
.pt1 {
 tausta suurus: 50px 50px;
 taustavärv: #0ae;
taustapilt: -veebikomplekt-lineaarne-gradient(rgba(255, 255, 255, .2) 50%, läbipaistev 50%, läbipaistev);
taustapilt: -moz-lineaarne gradient(rgba(255, 255, 255, .2) 50%, läbipaistev 50%, läbipaistev);
taustapilt: -ms-lineaarne gradient(rgba(255, 255, 255, .2) 50%, läbipaistev 50%, läbipaistev);
taustapilt: -o-lineaarne gradient(rgba(255, 255, 255, .2) 50%, läbipaistev 50%, läbipaistev);
taustapilt: lineaarne gradient(rgba(255, 255, 255, .2) 50%, läbipaistev 50%, läbipaistev);
}

3. Malelaud

CSS-i abil saate hõlpsalt luua malelaua taustakujundusmustri. Proovige selle kujunduse muutmiseks värve kohandada.

HTML-kood

<div klass="mustrid pt1"></div>

CSS-kood

keha {
 veeris: 0 pikslit;
}
.mustrid {
 laius: 100vw;
 kõrgus: 100vw;
}
.pt1 {
 taustavärv: #eee;
 tausta suurus: 60px 60px;
 taustapositsioon: 0 0, 30 pikslit 30 pikslit;
 taustapilt: -webkit-linear-gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must), -webkit-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75% must);
 taustapilt: -moz-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must), -moz-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75% must);
 taustapilt: -ms-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must), -ms-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75% must);
 taustpilt: -o-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must), -o-lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must);
 taustpilt: lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must), lineaarne gradient (45 kraadi, must 25%, läbipaistev 25%, läbipaistev 75%, must 75%, must);
}

4. Vaikne meri

Nende lihtsate horisontaaljoonte mustrite abil saate lisada mis tahes HTML-i elemendile staatilise tausta.

HTML-kood

<div klass="mustrid pt1"></div>

CSS-kood

keha {
 veeris: 0 pikslit;
}
.mustrid {
 laius: 100vw;
 kõrgus: 100vw;
}
.pt1 {
 taustavärv: #026873;
 tausta suurus: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
taustapilt: -veebikomplekt-lineaarne-gradient(0, rgba(255, 255, 255, .07) 50%, läbipaistev 50%), -veebikomplekt-lineaarne-gradient(0, rgba(255, 255, 255, .13) 50%, läbipaistev 50%), -veebikomplekt-lineaarne-gradient(0, läbipaistev 50%, rgba(255, 255, 255, .17) 50%), -veebikomplekt-lineaarne-gradient(0, läbipaistev 50%, rgba(255, 255, 255, .19) 50%);
taustapilt: -moz-lineaarne gradient(0, rgba(255, 255, 255, .07) 50%, läbipaistev 50%), -moz-lineaarne gradient(0, rgba(255, 255, 255, .13) 50%, läbipaistev 50%), -moz-lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .17) 50%), -moz-lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .19) 50%);
taustapilt: -ms-lineaarne gradient(0, rgba(255, 255, 255, .07) 50%, läbipaistev 50%), -ms-lineaarne gradient(0, rgba(255, 255, 255, .13) 50%, läbipaistev 50%), -ms-lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .17) 50%), -ms-lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .19) 50%);
taustapilt: -o-lineaarne gradient(0, rgba(255, 255, 255, .07) 50%, läbipaistev 50%), -o-lineaarne gradient(0, rgba(255, 255, 255, .13) 50%, läbipaistev 50%), -o-lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .17) 50%), -o-lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .19) 50%);
taustapilt: lineaarne gradient(0, rgba(255, 255, 255, .07) 50%, läbipaistev 50%), lineaarne gradient(0, rgba(255, 255, 255, .13) 50%, läbipaistev 50%), lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .17) 50%), lineaarne gradient(0, läbipaistev 50%, rgba(255, 255, 255, .19) 50%);
}

5. Kaasaegne telliskivi

Saate luua puhta CSS-i moodsa tellismustri, kasutades lineaarne gradient CSS-i atribuut.

CSS-kood

keha {
 taustpilt: lineaarne gradient (45 kraadi, läbipaistev 20%, must 25%, läbipaistev 25%),
 lineaarne gradient (-45 kraadi, läbipaistev 20%, must 25%, läbipaistev 25%),
 lineaarne gradient (-45 kraadi, läbipaistev 75%, must 80%, läbipaistev 0),
 radiaalne gradient (hall 2px, läbipaistev 0);
 tausta suurus: 30px 30px, 30px 30px;
}

6. Web3 stiilis taust

Saate luua a Veeb3-stiilis taust, kasutades taustapilti ja lisades sellele hägususe efekti. See näide kasutab Unsplashi galaktikapilti. Võite olla loominguline ja kasutada pilti galaktikast, merest, monumentidest või millestki muust.

HTML-kood

<div klass="kaart bg-blur">
<h1>Gradiendi taustaga kaart</h1>
</div>

CSS-kood

:juur {
 --bg-pilt: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formaat&sobima = kärpima&w = 1169&q = 80');
}
keha {
 taustavärv: #1D1E22;
 fondiperekond: sans-serif;
 ekraan: flex;
}
.kaart {
 veeris: auto;
 polster: 1rem;
 kõrgus: 300 pikslit;
 laius: 300 pikslit;
 teksti joondamine: keskel;
 värvus: valge;
 ekraan: flex;
 joonda-elemendid: keskel;
 õigustama-sisu: keskus;
 asend: suhteline;
 taustavärv: hall;
 piiri raadius: 10 pikslit;
}
.bg-blur {
 ülevool: peidetud;
 taustavärv: läbipaistev;
}
.bg-blur:: enne {
 sisu: '';
 taustapilt: var(--bg-pilt);
 tausta suurus: kaas;
 kõrgus: 100%;
 laius: 100%;
 positsioon: absoluutne;
 filter: hägu (30px);
 z-indeks: -1;
}

7. Gradiendi taustaanimatsioon

Gradiendi taust animatsioone kasutatakse laialdaselt kaasaegsetel veebisaitidel. Püsige trendis ja kasutage taustaga gradient-animatsiooni. Samuti saate kohandada gradiendi värve vastavalt oma vajadustele.

HTML-kood

<div klass="d-flex painduv veerg õigusta sisukeskus w-100 h-100"></div>

CSS-kood

keha {
taustal: lineaarne gradient(-45 kraadi, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 tausta suurus: 400% 400%;
 animatsioon: gradient 15s lihtsus lõpmatu;
 kõrgus: 100vh;
}
@keyframes gradient {
 0% {
 taustapositsioon: 0% 50%;
 }
50% {
 taustapositsioon: 100% 50%;
 }
100% {
 taustapositsioon: 0% 50%;
 }
}

8. Kurvikad lained

Saate luua lihtsa kõverate lainete mustri, kasutades radiaal-gradient CSS-i atribuut.

HTML-kood

<div klass="mustrid pt1"></div>

CSS-kood

keha {
 veeris: 0 pikslit;
}
.mustrid {
 laius: 100vw;
 kõrgus: 100vw;
}
.pt1 {
taustal: -moz-radiaalne gradient(0% 2%, ring, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radiaalne gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), mitte ühtegi;
taustal: -veebikomplekti radiaalne gradient(0% 2%, ring, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -veebikomplekti radiaalne gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), mitte ühtegi;
taustal: -ms-radiaalne gradient(0% 2%, ring, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiaalne gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), mitte ühtegi;
taustal: -o-radiaalne gradient(0% 2%, ring, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radiaalne gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), mitte ühtegi;
taustal: radiaal-gradient(0% 2%, ring, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiaal-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), mitte ühtegi;
 tausta suurus: 20px 20px;
}

9. Laudlina

Kas vajate oma HTML-diivi jaoks standardset taustamustrit? Proovi seda laudlina mustrit.

CSS-kood

keha {
 taust: valge;
taustapilt: lineaarne gradient(90deg, rgba(200,0,0,.5) 50%, läbipaistev 0),
lineaarne gradient(rgba(200,0,0,.5) 50%, läbipaistev 0);
 tausta suurus: 30 pikslit 30 pikslit;
}

10. Libistavad diagonaalid

Selle efekti korral diagonaalvärvid libisevad ja kattuvad üksteisega. Värvide segamise sujuv animatsioon võib teie veebisaidile atraktiivse ilme lisada.

HTML-kood

<div klass="bg"></div>
<div klass="bg bg2"></div>
<div klass="bg bg3"></div>
<div klass="sisu">
<h1>Libistavate diagonaalide taustaefekt</h1>
</div>

CSS-kood

html {
kõrgus:100%;
}
keha {
marginaal:0;
}
.bg {
animatsioon:libisema 3skergus sisse-väljalõpmatuvaheldumisi;
taustapilt: lineaarne gradient(-60 kraadi, # 6c3 50%, #09f 50%);
põhja:0;
vasakule:-50%;
läbipaistmatus:.5;
positsiooni:parandatud;
õige:-50%;
üleval:0;
z-indeks:-1;
}
.bg2 {
animatsioon-režii:alternate-reverse;
animatsioon-kestvus:4s;
}
.bg3 {
animatsioon-kestvus:5s;
}
.sisu {
taustavärv:rgba (255,255,255,.8);
piiriraadius:.25em;
kast-vari:0 0 .25 emrgba(0,0,0,.25);
kasti suuruse määramine:border-box;
vasakule:50%;
polsterdus:10vmin;
positsiooni:parandatud;
teksti joondamine:Keskus;
üleval:50%;
teisendada:translate(-50%, -50%);
}
h1 {
font-perekond:monoruum;
}
@keyframes libisema {
 0% {
teisendada:translateX(-25%);
 }
100% {
teisendada:translateX(25%);
 }
}

Täiustage oma veebisaiti CSS-i abil

Kasutage neid CSS-i taustamustreid oma veebisaidi kujunduse kaunistamiseks. Samuti saate oma CSS-i tootlikkust suurendada, kasutades mõnda lahedat CSS-i näpunäidet ja nippe. Need aitavad teil luua CSS-is libedaid kujundusi vaid mõne koodireaga.

8 olulist CSS-i nõuannet ja nippi, mida iga arendaja peaks teadma

Loe edasi

Autori kohta