10 modele de fundal CSS pe care le puteți folosi pe site-ul dvs

Modelele de fundal pot schimba radical aspectul site-ului dvs. Puteți crea cu ușurință modele de fundal elegante folosind CSS, care vor duce designul site-ului dvs. la nivelul următor.

Mai jos este o listă cu 10 modele de fundal pe care le puteți folosi în proiectele dvs.

1. Hexagonul Negru

Codul din aceste exemple este disponibil în a Depozitul GitHub și este gratuit pentru tine să îl folosești sub Licență MIT.

Acest model hexagonal negru oferă un fundal de rețea hexagonal foarte îngrijit. Titlul este clar vizibil pe acest fundal. Puteți utiliza acest model dacă proiectați site-uri web tehnologice sau arhitecturale.

Cod HTML

<h1>Hexagonul Negru</h1>

Cod CSS

corp {
 familie de fonturi: 'Distribuie Tech', sans-serif;
 dimensiunea fontului: 68px;
 culoare albă;
 display: flex;
 jstify-conținut: centru;
 alinierea elementelor: centru;
 marja: 0;
 latime: 100vw;
 inaltime: 100vh;
 text-shadow: 8px 8px 10px #0000008c;
 culoare de fundal: #343a40;
 imagine de fundal: url("date: imagine/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg





instagram viewer

' latime='28' inaltime='49' viewBox='0 0 28 49'%3E%3Cg regulă de umplere='chiar ciudat'%3E%3Cg id='hexagoane' umple='%239C92AC' umplere-opacitate='0.25' umplere-regula='diferit de zero'%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.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11.75v-15l12.99-7.5zM3 17.9v12.7l10.99 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2.3zM15 0v7.5L27.99 42,15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), gradient liniar (spre dreapta sus, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 marja: 20px;
}

2. Fâșiile Albastre

Modelul de fundal cu benzi albastre folosește liniar-gradient Proprietate CSS pentru a crea benzi de gradient pe fundal. Poti schimba culoarea de fundal și culoarea gradientului pentru a satisface cerințele dumneavoastră.

Cod HTML

<div class="modele pt1"></div>

Cod CSS

corp {
 marja: 0px;
}
.modele {
 latime: 100vw;
 inaltime: 100vw;
}
.pt1 {
 dimensiunea fundalului: 50px 50px;
 culoare de fundal: #0ae;
imagine de fundal: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
imagine de fundal: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
imagine de fundal: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
imagine de fundal: -o-liniar-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
imagine de fundal: liniar-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

3. Tabla de șah

Puteți crea cu ușurință un model de design de fundal pentru tablă de șah folosind CSS. Încercați să ajustați culorile pentru a varia acest design.

Cod HTML

<div class="modele pt1"></div>

Cod CSS

corp {
 marja: 0px;
}
.modele {
 latime: 100vw;
 inaltime: 100vw;
}
.pt1 {
 culoare de fundal: #eee;
 dimensiunea fundalului: 60px 60px;
 fundal-poziție: 0 0, 30px 30px;
 imagine de fundal: -webkit-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru), -webkit-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru);
 imagine de fundal: -moz-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru), -moz-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru);
 imagine de fundal: -ms-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru), -ms-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru);
 imagine de fundal: -o-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru), -o-linear-gradient (45deg, negru 25%, transparent 25%, transparent 75%, negru 75%, negru);
 imagine de fundal: gradient liniar (45 de grade, negru 25%, transparent 25%, transparent 75%, negru 75%, negru), gradient liniar (45 de grade, negru 25%, transparent 25%, transparent 75%, negru 75%, negru);
}

4. Marea Tăcută

Puteți utiliza aceste modele de linii orizontale simple pentru a adăuga un fundal static oricărui element HTML.

Cod HTML

<div class="modele pt1"></div>

Cod CSS

corp {
 marja: 0px;
}
.modele {
 latime: 100vw;
 inaltime: 100vw;
}
.pt1 {
 culoare de fundal: #026873;
 dimensiunea fundalului: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
imagine de fundal: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
imagine de fundal: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
imagine de fundal: -ms-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -ms-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
imagine de fundal: -o-liniar-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -o-liniar-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -o-liniar-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -o-liniar-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
imagine de fundal: liniar-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), liniar-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), liniar-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), liniar-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
}

5. Cărămida modernă

Puteți crea un model de cărămidă modern CSS pur folosind liniar-gradient proprietate CSS.

Cod CSS

corp {
 imagine de fundal: gradient liniar (45 de grade, transparent 20%, negru 25%, transparent 25%),
 gradient liniar (-45 de grade, transparent 20%, negru 25%, transparent 25%),
 gradient liniar (-45 de grade, transparent 75%, negru 80%, transparent 0),
 radial-gradient (gri 2px, transparent 0);
 dimensiunea fundalului: 30px 30px, 30px 30px;
}

6. Fundal stil Web3

Puteți crea un Web3-stil de fundal folosind o imagine de fundal și adăugându-i un efect de estompare. Acest exemplu folosește o imagine galaxie de la Unsplash. Puteți fi creativ și puteți utiliza o imagine a unei galaxii, a unei mări, a monumentelor sau a oricăror altceva.

Cod HTML

<div class="card bg-blur">
<h1>Card cu fundal gradient</h1>
</div>

Cod CSS

:rădăcină {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&potrivi = crop&w=1169&q=80');
}
corp {
 culoare de fundal: #1D1E22;
 familie de fonturi: sans-serif;
 display: flex;
}
.card {
 margine: auto;
 captuseala: 1rem;
 înălțime: 300px;
 latime: 300px;
 text-align: centru;
 culoare albă;
 display: flex;
 alinierea elementelor: centru;
 justificare-conținut: centru;
 poziție: relativă;
 culoare de fundal: gri;
 chenar-rază: 10px;
}
.bg-blur {
 preaplin: ascuns;
 culoare de fundal: transparent;
}
.bg-blur::inainte de {
 conţinut: '';
 imagine de fundal: var(--bg-image);
 dimensiunea fundalului: coperta;
 inaltime: 100%;
 latime: 100%;
 poziție: absolută;
 filtru: estompare (30px);
 indicele z: -1;
}

7. Animație de fundal cu gradient

Fundal gradient animațiile sunt utilizate pe scară largă în site-urile web moderne. Rămâneți în tendințe și utilizați animația gradient cu fundalul. De asemenea, puteți personaliza culorile gradientului în funcție de nevoile dvs.

Cod HTML

<div class="d-flex flex-coloana justify-content-center w-100 h-100"></div>

Cod CSS

corp {
fundal: liniar-gradient(-45 de grade, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 dimensiunea fundalului: 400% 400%;
 animație: gradient 15s ease infinit;
 inaltime: 100vh;
}
@keyframes gradient {
 0% {
 fundal-poziție: 0% 50%;
 }
50% {
 fundal-poziție: 100% 50%;
 }
100% {
 fundal-poziție: 0% 50%;
 }
}

8. Valuri curbate

Puteți crea un model simplu de valuri curbate folosind radial-gradient proprietate CSS.

Cod HTML

<div class="modele pt1"></div>

Cod CSS

corp {
 marja: 0px;
}
.modele {
 latime: 100vw;
 inaltime: 100vw;
}
.pt1 {
fundal: -moz-radial-gradient(0% 2%, cerc, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nici unul;
fundal: -webkit-radial-gradient(0% 2%, cerc, 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), nici unul;
fundal: -ms-radial-gradient(0% 2%, cerc, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nici unul;
fundal: -o-radial-gradient(0% 2%, cerc, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nici unul;
fundal: radial-gradient(0% 2%, cerc, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nici unul;
 dimensiunea fundalului: 20px 20px;
}

9. Față de masă

Aveți nevoie de un model de fundal standard pentru div-ul dvs. HTML? Încercați acest model de față de masă.

Cod CSS

corp {
 fundal: alb;
imagine de fundal: liniar-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
liniar-gradient(rgba(200,0,0,.5) 50%, transparent 0);
 dimensiunea fundalului: 30px 30px;
}

10. Diagonale de alunecare

În acest efect, culorile diagonale alunecă și se suprapun între ele. Animația lină a amestecării culorilor poate adăuga o notă atractivă site-ului dvs.

Cod HTML

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="conţinut">
<h1>Efect de fundal cu diagonale glisante</h1>
</div>

Cod CSS

html {
înălţime:100%;
}
corp {
marginea:0;
}
.bg {
animaţie: slide 3sușurință-in-outinfinitalterna;
imagine de fundal: liniar-gradient(-60 de grade, #6c3 50%, #09f 50%);
partea de jos:0;
stânga:-50%;
opacitate:.5;
poziţie:fix;
dreapta:-50%;
top:0;
z-index:-1;
}
.bg2 {
regia-animatie:alternativ-invers;
animatie-durata:4s;
}
.bg3 {
animatie-durata:5s;
}
.conţinut {
culoare de fundal:rgba (255,255,255,.8);
hotar-raza:.25em;
cutie-umbră:0 0 .25emrgba(0,0,0,.25);
dimensionarea cutiei:border-box;
stânga:50%;
căptușeală:10vmin;
poziţie:fix;
aliniere text:centru;
top:50%;
transforma:traduce(-50%, -50%);
}
h1 {
familie de fonturi:monospace;
}
@keyframes slide {
 0% {
transforma:translateX(-25%);
 }
100% {
transforma:translateX(25%);
 }
}

Îmbunătățiți-vă site-ul folosind CSS

Utilizați aceste modele de fundal CSS pentru a îmbunătăți designul site-ului dvs. web. De asemenea, vă puteți crește productivitatea CSS folosind câteva sfaturi și trucuri interesante CSS. Ele vă pot ajuta să creați modele elegante în CSS cu doar câteva linii de cod.

8 sfaturi și trucuri esențiale CSS pe care fiecare dezvoltator ar trebui să le cunoască

Citiți în continuare

Despre autor