10 CSS fona modeļi, kurus varat izmantot savā vietnē

Fona modeļi var radikāli mainīt jūsu vietnes izskatu. Izmantojot CSS, varat viegli izveidot elegantus fona modeļus, kas paaugstinās jūsu vietnes dizainu uz nākamo līmeni.

Zemāk ir saraksts ar 10 fona modeļiem, kurus varat izmantot savos projektos.

1. Melnais sešstūris

Kods šajos piemēros ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licence.

Šis melnais sešstūra raksts nodrošina ļoti glītu sešstūra tīkla fonu. Uz šī fona ir skaidri redzams nosaukums. Varat izmantot šo modeli, ja veidojat kādas tehnoloģiskas vai arhitektūras vietnes.

HTML kods

<h1>Melnais sešstūris</h1>

CSS kods

body {
 fontu ģimene: 'Share Tech', sans serif;
 fonta izmērs: 68 pikseļi;
 krāsa: balta;
 displejs: flex;
 jsutify-content: centrs;
 izlīdzināt vienumus: centrs;
 piemale: 0;
 platums: 100vw;
 augstums: 100vh;
 teksta ēna: 8px 8px 10px #0000008c;
 fona krāsa: #343a40;
 fona attēls: url("dati: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' platums='28' augstums ='49' viewBox='0 0 28 49'%3E%3Cg fill-rule=





instagram viewer

'Evenodd'%3E%3Cg id='sešstūri' aizpildīt='%239C92AC' fill-capacity='0.25' fill-rule='nav nulles'%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-6.35V17.9l-11-6.35V17.9l-11-6.5h 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-29zm 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineārs gradients (labajā augšā, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 piemale: 20 pikseļi;
}

2. Zilās joslas

Zilo joslu fona raksts izmanto lineārs-gradients CSS rekvizīts, lai izveidotu gradienta joslas uz fona. Jūs varat mainīt fona krāsu un gradienta krāsa, lai atbilstu jūsu prasībām.

HTML kods

<div klase="modeļi pt1"></div>

CSS kods

body {
 piemale: 0px;
}
.raksti {
 platums: 100vw;
 augstums: 100vw;
}
.pt1 {
 fona izmērs: 50 pikseļi 50 pikseļi;
 fona krāsa: #0ae;
fona attēls: -Webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, caurspīdīgs 50%, caurspīdīgs);
fona attēls: -moz-lineārais gradients(rgba(255, 255, 255, .2) 50%, caurspīdīgs 50%, caurspīdīgs);
fona attēls: -ms-lineārais gradients(rgba(255, 255, 255, .2) 50%, caurspīdīgs 50%, caurspīdīgs);
fona attēls: -o-lineārais gradients(rgba(255, 255, 255, .2) 50%, caurspīdīgs 50%, caurspīdīgs);
fona attēls: lineārs-gradients(rgba(255, 255, 255, .2) 50%, caurspīdīgs 50%, caurspīdīgs);
}

3. Šaha galds

Izmantojot CSS, varat viegli izveidot šaha galda fona dizaina modeli. Mēģiniet pielāgot krāsas, lai mainītu šo dizainu.

HTML kods

<div klase="modeļi pt1"></div>

CSS kods

body {
 piemale: 0px;
}
.raksti {
 platums: 100vw;
 augstums: 100vw;
}
.pt1 {
 fona krāsa: #eee;
 fona izmērs: 60 pikseļi 60 pikseļi;
 fona pozīcija: 0 0, 30 pikseļi 30 pikseļi;
 fona attēls: -webkit-linear-gradient (45grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns), -webkit-linear-gradient (45grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns);
 fona attēls: -moz-lineārais gradients (45 grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns), -moz-lineārs-gradients (45grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns);
 fona attēls: -ms-lineārs gradients (45 grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns), -ms-lineārs gradients (45 grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns);
 fona attēls: -o-lineārais gradients (45grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns), -o-lineārais gradients (45grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns);
 fona attēls: lineārais gradients (45 grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns), lineārs gradients (45 grādi, melns 25%, caurspīdīgs 25%, caurspīdīgs 75%, melns 75%, melns);
}

4. Klusā jūra

Varat izmantot šos vienkāršos horizontālo līniju modeļus, lai pievienotu statisku fonu jebkuram HTML elementam.

HTML kods

<div klase="modeļi pt1"></div>

CSS kods

body {
 piemale: 0px;
}
.raksti {
 platums: 100vw;
 augstums: 100vw;
}
.pt1 {
 fona krāsa: #026873;
 fona izmērs: 13 pikseļi 13 pikseļi, 29 pikseļi 29 pikseļi, 37 pikseļi 37 pikseļi, 53 pikseļi 53 pikseļi;
fona attēls: -Webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, caurspīdīgs 50%), -Webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, caurspīdīgs 50%), -Webkit-linear-gradient(0, caurspīdīgs 50%, rgba(255, 255, 255, .17) 50%), -Webkit-linear-gradient(0, caurspīdīgs 50%, rgba(255, 255, 255, .19) 50%);
fona attēls: -moz-lineārais gradients(0, rgba(255, 255, 255, .07) 50%, caurspīdīgs 50%), -moz-lineārais gradients(0, rgba(255, 255, 255, .13) 50%, caurspīdīgs 50%), -moz-lineārais gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .17) 50%), -moz-lineārais gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .19) 50%);
fona attēls: -ms-lineārais gradients(0, rgba(255, 255, 255, .07) 50%, caurspīdīgs 50%), -ms-lineārais gradients(0, rgba(255, 255, 255, .13) 50%, caurspīdīgs 50%), -ms-lineārais gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .17) 50%), -ms-lineārais gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .19) 50%);
fona attēls: -o-lineārais gradients(0, rgba(255, 255, 255, .07) 50%, caurspīdīgs 50%), -o-lineārais gradients(0, rgba(255, 255, 255, .13) 50%, caurspīdīgs 50%), -o-lineārais gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .17) 50%), -o-lineārais gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .19) 50%);
fona attēls: lineārs-gradients(0, rgba(255, 255, 255, .07) 50%, caurspīdīgs 50%), lineārs-gradients(0, rgba(255, 255, 255, .13) 50%, caurspīdīgs 50%), lineārs-gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .17) 50%), lineārs-gradients(0, caurspīdīgs 50%, rgba(255, 255, 255, .19) 50%);
}

5. Mūsdienu ķieģelis

Varat izveidot tīru CSS modernu ķieģeļu rakstu, izmantojot lineārs-gradients CSS īpašums.

CSS kods

body {
 fona attēls: lineārs gradients (45 grādi, caurspīdīgs 20%, melns 25%, caurspīdīgs 25%),
 lineārs gradients (-45 grādi, caurspīdīgs 20%, melns 25%, caurspīdīgs 25%),
 lineārs gradients (-45 grādi, caurspīdīgs 75%, melns 80%, caurspīdīgs 0),
 radiālais gradients (pelēks 2 pikseļi, caurspīdīgs 0);
 fona izmērs: 30 pikseļi 30 pikseļi, 30 pikseļi 30 pikseļi;
}

6. Web3 stila fons

Jūs varat izveidot a Web3- stila fons, izmantojot fona attēlu un pievienojot tam izplūduma efektu. Šajā piemērā tiek izmantots galaktikas attēls no Unsplash. Varat būt radošs un izmantot galaktikas, jūras, pieminekļu vai jebko citu attēlu.

HTML kods

<div klase="karte bg-blur">
<h1>Karte ar gradienta fonu</h1>
</div>

CSS kods

:root {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formāts&fit=crop&w=1169&q=80');
}
body {
 fona krāsa: #1D1E22;
 fontu saime: sans-serif;
 displejs: flex;
}
.karte {
 piemale: auto;
 polsterējums: 1rem;
 augstums: 300 pikseļi;
 platums: 300 pikseļi;
 teksta līdzināšana: centrs;
 krāsa: balta;
 displejs: flex;
 izlīdzināt vienumus: centrs;
 attaisnot-saturs: centrs;
 pozīcija: relatīvs;
 fona krāsa: pelēka;
 apmales rādiuss: 10 pikseļi;
}
.bg-blur {
 pārplūde: slēpta;
 fona krāsa: caurspīdīga;
}
.bg-blur::pirms {
 saturs: '';
 fona attēls: var(--bg-attēls);
 fona izmērs: vāks;
 augstums: 100%;
 platums: 100%;
 pozīcija: absolūta;
 filtrs: izplūšana (30 pikseļi);
 z-indekss: -1;
}

7. Gradienta fona animācija

Gradienta fons animācijas tiek plaši izmantotas mūsdienu vietnēs. Sekojiet tendencēm un izmantojiet gradienta animāciju ar fonu. Varat arī pielāgot gradienta krāsas atbilstoši savām vajadzībām.

HTML kods

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

CSS kods

body {
fons: lineārs-gradients(-45 grādi, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 fona izmērs: 400% 400%;
 animācija: gradients 15s vieglums bezgalīgi;
 augstums: 100vh;
}
@keyframes gradients {
 0% {
 fona pozīcija: 0% 50%;
 }
50% {
 fona pozīcija: 100% 50%;
 }
100% {
 fona pozīcija: 0% 50%;
 }
}

8. Izliekti viļņi

Varat izveidot vienkāršu izliektu viļņu rakstu, izmantojot radiālais gradients CSS īpašums.

HTML kods

<div klase="modeļi pt1"></div>

CSS kods

body {
 piemale: 0px;
}
.raksti {
 platums: 100vw;
 augstums: 100vw;
}
.pt1 {
fons: -moz-radiālais gradients(0% 2%, aplis, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radiālais gradients(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), neviens;
fons: -Webkit-radial-gradient(0% 2%, aplis, 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), neviens;
fons: -ms-radiālais gradients(0% 2%, aplis, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiālais gradients(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), neviens;
fons: -o-radiālais gradients(0% 2%, aplis, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radiālais gradients(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), neviens;
fons: radiālais gradients(0% 2%, aplis, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiālais gradients(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), neviens;
 fona izmērs: 20 pikseļi 20 pikseļi;
}

9. Galdauts

Nepieciešams standarta fona raksts savam HTML div? Izmēģiniet šo galdautu modeli.

CSS kods

body {
 fons: balts;
fona attēls: lineārs-gradients(90gr, rgba(200,0,0,.5) 50%, caurspīdīgs 0),
lineārs-gradients(rgba(200,0,0,.5) 50%, caurspīdīgs 0);
 fona izmērs: 30 pikseļi 30 pikseļi;
}

10. Bīdāmās diagonāles

Šajā efektā diagonālās krāsas slīd un pārklājas viena ar otru. Krāsu sajaukšanas vienmērīga animācija var pievienot jūsu vietnei pievilcīgu pieskārienu.

HTML kods

<div klase="bg"></div>
<div klase="bg bg2"></div>
<div klase="bg bg3"></div>
<div klase="saturu">
<h1>Bīdāmās diagonāles fona efekts</h1>
</div>

CSS kods

html {
augstums:100%;
}
body {
starpība:0;
}
.bg {
animācija:slidkalniņš 3svieglums iekšā-outbezgalīgsaizstājējs;
fona attēls: lineārs-gradients(-60 grādi, #6c3 50%, #09f 50%);
apakšā:0;
pa kreisi:-50%;
necaurredzamība:.5;
pozīciju:labots;
pa labi:-50%;
tops:0;
z-indekss:-1;
}
.bg2 {
animācijas režija:alternate-reverse;
animācijas ilgums:4s;
}
.bg3 {
animācijas ilgums:5s;
}
.saturs {
fona krāsa:rgba (255,255,255,.8);
robeža-rādiuss:.25em;
kaste-ēna:0 0 .25emrgba(0,0,0,.25);
kastes izmēra noteikšana:border-box;
pa kreisi:50%;
polsterējums:10vmin;
pozīciju:labots;
teksta līdzināšana:centrs;
tops:50%;
pārveidot:translate(-50%, -50%);
}
h1 {
fontu ģimene: monospace;
}
@keyframes slidkalniņš {
 0% {
pārveidot:translateX(-25%);
 }
100% {
pārveidot:translateX(25%);
 }
}

Uzlabojiet savu vietni, izmantojot CSS

Izmantojiet šos CSS fona modeļus, lai uzlabotu savas vietnes dizainu. Varat arī palielināt savu CSS produktivitāti, izmantojot dažus lieliskus CSS padomus un trikus. Tie var palīdzēt jums izveidot gludu dizainu CSS, izmantojot tikai dažas koda rindiņas.

8 svarīgi CSS padomi un triki, kas jāzina katram izstrādātājam

Lasiet Tālāk

Par autoru