10 CSS fono šablonų, kuriuos galite naudoti savo svetainėje

Fono modeliai gali radikaliai pakeisti jūsų svetainės išvaizdą. Naudodami CSS galite lengvai sukurti elegantiškus fono raštus, kurie pakels jūsų svetainės dizainą į kitą lygį.

Žemiau yra 10 fono modelių, kuriuos galite naudoti savo projektuose, sąrašas.

1. Juodasis šešiakampis

Šiuose pavyzdžiuose esantis kodas yra a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licencija.

Šis juodas šešiakampis raštas suteikia labai tvarkingą šešiakampį tinklo foną. Pavadinimas aiškiai matomas šiame fone. Galite naudoti šį modelį, jei kuriate technologines ar architektūrines svetaines.

HTML kodas

<h1>Juodasis šešiakampis</h1>

CSS kodas

kūnas {
 šrifto šeima: 'Dalintis Tech', sans-serif;
 šrifto dydis: 68 pikseliai;
 spalva: balta;
 ekranas: lankstus;
 jsutify-content: centras;
 sulyginti elementus: centre;
 paraštė: 0;
 plotis: 100vw;
 aukštis: 100vh;
 teksto šešėlis: 8px 8px 10px #0000008c;
 fono spalva: #343a40;
 fono vaizdas: url("duomenys: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' plotis ='28





instagram viewer

' aukštis ='49' viewBox='0 0 28 49'%3E%3Cg užpildymo taisyklė='Evenodd'%3E%3Cg id='šešiakampiai' užpildyti ='%239C92AC' užpildymas-nepermatomumas='0.25' užpildymo taisyklė ='ne nulis'%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.35L 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-1h.17-29v8m 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), tiesinis gradientas (į dešinę viršų, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 paraštė: 20 pikselių;
}

2. Mėlynosios juostelės

Mėlynų juostelių fono raštas naudoja tiesinis-gradientas CSS ypatybė, skirta sukurti gradiento juosteles fone. Tu gali pakeisti fono spalvą ir gradiento spalva, kad atitiktų jūsų reikalavimus.

HTML kodas

<div klasė ="modeliai pt1"></div>

CSS kodas

kūnas {
 paraštė: 0 pikselių;
}
.rašteliai {
 plotis: 100vw;
 aukštis: 100vw;
}
.pt1 {
 fono dydis: 50 piks. 50 piks.;
 fono spalva: #0ae;
fono vaizdas: -Webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, skaidrus 50%, skaidrus);
fono vaizdas: -moz-tiesinis gradientas(rgba(255, 255, 255, .2) 50%, skaidrus 50%, skaidrus);
fono vaizdas: -ms-tiesinis gradientas(rgba(255, 255, 255, .2) 50%, skaidrus 50%, skaidrus);
fono vaizdas: -o-tiesinis gradientas(rgba(255, 255, 255, .2) 50%, skaidrus 50%, skaidrus);
fono vaizdas: tiesinis-gradientas(rgba(255, 255, 255, .2) 50%, skaidrus 50%, skaidrus);
}

3. Šachmatų lenta

Naudodami CSS galite lengvai sukurti šachmatų lentos fono dizaino modelį. Pabandykite pakoreguoti spalvas, kad pakeistumėte šį dizainą.

HTML kodas

<div klasė ="modeliai pt1"></div>

CSS kodas

kūnas {
 paraštė: 0 pikselių;
}
.rašteliai {
 plotis: 100vw;
 aukštis: 100vw;
}
.pt1 {
 fono spalva: #eee;
 fono dydis: 60 piks. 60 piks.;
 fono padėtis: 0 0, 30 taškų 30 taškų;
 Fono vaizdas: -Webkit-linear-gradient (45 laipsnių, juoda 25%, skaidrus 25%, skaidrus 75%, juoda 75%, juoda), -Webkit-linijinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juoda);
 Fono vaizdas: -moz-linear-gradient (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juoda), -moz-tiesinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juoda);
 Fono vaizdas: -ms-tiesinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juoda), -ms-tiesinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juoda);
 Fono vaizdas: -o-tiesinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juodas), -o-linijinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juoda 75%, juoda);
 Fono vaizdas: linijinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juodas), linijinis gradientas (45 laipsnių, juodas 25%, skaidrus 25%, skaidrus 75%, juodas 75%, juoda);
}

4. Tyli jūra

Galite naudoti šiuos paprastus horizontalių linijų šablonus, kad pridėtumėte statinį foną prie bet kurio HTML elemento.

HTML kodas

<div klasė ="modeliai pt1"></div>

CSS kodas

kūnas {
 paraštė: 0 pikselių;
}
.rašteliai {
 plotis: 100vw;
 aukštis: 100vw;
}
.pt1 {
 fono spalva: #026873;
 fono dydis: 13 piks. 13 piks., 29 piks. 29 piks., 37 piks. 37 piks., 53 piks. 53 piks.;
fono vaizdas: -Webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, skaidrus 50%), -Webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, skaidrus 50%), -Webkit-linear-gradient(0, skaidrus 50%, rgba(255, 255, 255, .17) 50%), -Webkit-linear-gradient(0, skaidrus 50%, rgba(255, 255, 255, .19) 50%);
fono vaizdas: -moz-tiesinis gradientas(0, rgba(255, 255, 255, .07) 50%, skaidrus 50%), -moz-tiesinis gradientas(0, rgba(255, 255, 255, .13) 50%, skaidrus 50%), -moz-tiesinis gradientas(0, skaidrus 50%, rgba(255, 255, 255, .17) 50%), -moz-tiesinis gradientas(0, skaidrus 50%, rgba(255, 255, 255, .19) 50%);
fono vaizdas: -ms-tiesinis gradientas(0, rgba(255, 255, 255, .07) 50%, skaidrus 50%), -ms-tiesinis gradientas(0, rgba(255, 255, 255, .13) 50%, skaidrus 50%), -ms-tiesinis gradientas(0, skaidrus 50%, rgba(255, 255, 255, .17) 50%), -ms-tiesinis gradientas(0, skaidrus 50%, rgba(255, 255, 255, .19) 50%);
fono vaizdas: -o-tiesinis gradientas(0, rgba(255, 255, 255, .07) 50%, skaidrus 50%), -o-tiesinis gradientas(0, rgba(255, 255, 255, .13) 50%, skaidrus 50%), -o-tiesinis gradientas(0, skaidrus 50%, rgba(255, 255, 255, .17) 50%), -o-tiesinis gradientas(0, skaidrus 50%, rgba(255, 255, 255, .19) 50%);
fono vaizdas: tiesinis-gradientas(0, rgba(255, 255, 255, .07) 50%, skaidrus 50%), tiesinis-gradientas(0, rgba(255, 255, 255, .13) 50%, skaidrus 50%), tiesinis-gradientas(0, skaidrus 50%, rgba(255, 255, 255, .17) 50%), tiesinis-gradientas(0, skaidrus 50%, rgba(255, 255, 255, .19) 50%);
}

5. Šiuolaikinė plyta

Galite sukurti gryną CSS modernią plytų modelį naudodami tiesinis-gradientas CSS nuosavybė.

CSS kodas

kūnas {
 Fono vaizdas: linijinis gradientas (45 laipsnių, skaidrus 20%, juodas 25%, skaidrus 25%),
 tiesinis gradientas (-45 laipsnių, skaidrus 20%, juodas 25%, skaidrus 25%),
 tiesinis gradientas (-45 laipsnių, skaidrus 75%, juodas 80%, skaidrus 0),
 radialinis gradientas (pilka 2px, skaidrus 0);
 fono dydis: 30 piks. 30 piks., 30 piks. 30 piks.;
}

6. Web3 stiliaus fonas

Galite sukurti a Web3- stiliaus foną naudodami fono vaizdą ir pridedant prie jo suliejimo efektą. Šiame pavyzdyje naudojamas galaktikos vaizdas iš Unsplash. Galite būti kūrybingi ir naudoti galaktikos, jūros, paminklų ar bet ko kito vaizdą.

HTML kodas

<div klasė ="kortelė bg-blur">
<h1>Kortelė su gradiento fonu</h1>
</div>

CSS kodas

:root {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&tinka = apkarpyti&w = 1169&q = 80');
}
kūnas {
 fono spalva: #1D1E22;
 šriftų šeima: sans-serif;
 ekranas: lankstus;
}
.kortelė {
 paraštė: auto;
 paminkštinimas: 1 rem;
 aukštis: 300 pikselių;
 plotis: 300 pikselių;
 teksto lygiavimas: centre;
 spalva: balta;
 ekranas: lankstus;
 sulyginti elementus: centre;
 pateisinti-turinys: centras;
 padėtis: santykinė;
 fono spalva: pilka;
 kraštinės spindulys: 10 pikselių;
}
.bg-blur {
 perteklius paslėptas;
 fono spalva: skaidri;
}
.bg-blur::prieš {
 turinys: '';
 fono vaizdas: var(--bg-vaizdas);
 fono dydis: viršelis;
 aukštis: 100%;
 plotis: 100%;
 padėtis: absoliuti;
 filtras: suliejimas (30 pikselių);
 z indeksas: -1;
}

7. Gradiento fono animacija

Gradiento fonas animacijos plačiai naudojamos šiuolaikinėse svetainėse. Sekite tendencijas ir naudokite gradiento animaciją su fonu. Taip pat galite tinkinti gradiento spalvas pagal savo poreikius.

HTML kodas

<div klasė ="d-flex flex-colum Justify-content-center w-100 h-100"></div>

CSS kodas

kūnas {
fone: tiesinis-gradientas(-45 laipsniai, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 fono dydis: 400 % 400 %;
 animacija: gradientas 15s lengvas begalinis;
 aukštis: 100vh;
}
@keyframes gradientas {
 0% {
 fono padėtis: 0% 50%;
 }
50% {
 fono padėtis: 100 % 50 %;
 }
100% {
 fono padėtis: 0% 50%;
 }
}

8. Kreivios bangos

Galite sukurti paprastą kreivių bangų modelį naudodami radialinis gradientas CSS nuosavybė.

HTML kodas

<div klasė ="modeliai pt1"></div>

CSS kodas

kūnas {
 paraštė: 0 pikselių;
}
.rašteliai {
 plotis: 100vw;
 aukštis: 100vw;
}
.pt1 {
fone: -moz-radialinis gradientas(0% 2%, ratas, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radialinis gradientas(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nė vienas;
fone: -Webkit-radial-gradient(0% 2%, ratas, 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), nė vienas;
fone: -ms-radialinis gradientas(0% 2%, ratas, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radialinis gradientas(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nė vienas;
fone: -o-radialinis gradientas(0% 2%, ratas, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radialinis gradientas(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nė vienas;
fone: radialinis gradientas(0% 2%, ratas, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radialinis gradientas(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nė vienas;
 fono dydis: 20px 20px;
}

9. Staltiesė

Reikia standartinio fono rašto savo HTML div? Išbandykite šį staltiesės modelį.

CSS kodas

kūnas {
 fonas: baltas;
fono vaizdas: tiesinis-gradientas(90deg, rgba(200,0,0,.5) 50%, skaidrus 0),
tiesinis-gradientas(rgba(200,0,0,.5) 50%, skaidrus 0);
 fono dydis: 30 piks. 30 piks.;
}

10. Stumdomos įstrižainės

Dėl šio efekto įstrižainės spalvos slenka ir persidengia viena su kita. Sklandi spalvų maišymo animacija gali suteikti jūsų svetainei patrauklumo.

HTML kodas

<div klasė ="bg"></div>
<div klasė ="bg bg2"></div>
<div klasė ="bg bg3"></div>
<div klasė ="turinys">
<h1>Slenkančių įstrižainių fono efektas</h1>
</div>

CSS kodas

html {
aukščio:100%;
}
kūnas {
marža:0;
}
.bg {
animacija: skaidrė 3slengvumas į išorębegalinisAlternatyva;
fono vaizdas: tiesinis-gradientas(-60 laipsnių, #6c3 50%, #09f 50%);
apačioje:0;
paliko:-50%;
neskaidrumas:.5;
padėtis:fiksuotas;
teisingai:-50%;
viršuje:0;
z indeksas:-1;
}
.bg2 {
animacija-režisūra:alternate-reverse;
animacija-trukmė:4s;
}
.bg3 {
animacija-trukmė:5s;
}
.turinys {
fono spalva:rgba (255,255,255,.8);
pasienio spindulys:.25em;
dėžutė-šešėlis:0 0 .25emrgba(0,0,0,.25);
dėžutės dydžio:border-box;
paliko:50%;
kamšalas:10vmin;
padėtis:fiksuotas;
teksto lygiavimas:centras;
viršuje:50%;
transformuoti:translate(-50%, -50%);
}
h1 {
šrifto šeima: monospace;
}
@keyframes skaidrė {
 0% {
transformuoti:translateX(-25%);
 }
100% {
transformuoti:translateX(25%);
 }
}

Patobulinkite savo svetainę naudodami CSS

Naudokite šiuos CSS fono modelius, kad patobulintumėte savo svetainės dizainą. Taip pat galite padidinti savo CSS produktyvumą naudodami keletą puikių CSS patarimų ir gudrybių. Jie gali padėti jums sukurti gražų CSS dizainą naudojant tik kelias kodo eilutes.

8 pagrindiniai CSS patarimai ir gudrybės, kuriuos turėtų žinoti kiekvienas kūrėjas

Skaitykite toliau

Apie autorių