10 CSS-taustamallia, joita voit käyttää verkkosivustollasi

Taustakuviot voivat muuttaa verkkosivustosi ulkoasua radikaalisti. Voit luoda helposti tyylikkäitä taustakuvioita CSS: n avulla, mikä vie sivustosi suunnittelun uudelle tasolle.

Alla on luettelo 10 taustakuviosta, joita voit käyttää projekteissasi.

1. Musta kuusikulmio

Näissä esimerkeissä oleva koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssi.

Tämä musta kuusikulmiokuvio tarjoaa erittäin siistin kuusikulmioverkkotaustan. Otsikko näkyy selvästi tätä taustaa vasten. Voit käyttää tätä mallia, jos suunnittelet teknisiä tai arkkitehtonisia verkkosivustoja.

HTML-koodi

<h1>Musta kuusikulmio</h1>

CSS-koodi

body {
 font-family: 'Jaa Tech', sans-serif;
 fonttikoko: 68px;
 väri valkoinen;
 näyttö: flex;
 jsutify-sisältö: keskus;
 kohdista kohteet: keskellä;
 marginaali: 0;
 leveys: 100vw;
 korkeus: 100vh;
 tekstivarjo: 8px 8px 10px #0000008c;
 taustaväri: #343a40;
 taustakuva: url("tiedot: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' leveys ='28' korkeus ='49' viewBox='0 0 28 49





instagram viewer

'%3E%3Cg fill-rule='tasainen'%3E%3Cg id='kuusikulmiot' täytä ='%239C92AC' fill-opasiteetti='0.25' fill-rule='nollasta poikkeava'%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.35V17.9l-11-6.35V17.9l-11-6.30v.307v. 12,69v2,3zm0 18,5L12,98 41v8h-2v-6,85L0 35,81v-2,3zM15 0v7,5L27,99 15H28v-2,31h-,01L17 6,35V0h-1h-27-9v8-l. 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineaarinen gradientti (oikealle ylhäällä, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 marginaali: 20px;
}

2. Siniset nauhat

Sinisten kaistaleiden taustakuvio käyttää lineaarinen gradientti CSS-ominaisuus, jolla voit luoda gradienttiliuskoja taustan päälle. Sinä pystyt vaihtaa taustaväriä ja gradienttiväri tarpeidesi mukaan.

HTML-koodi

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

CSS-koodi

body {
 marginaali: 0px;
}
.kuviot {
 leveys: 100vw;
 korkeus: 100vw;
}
.pt1 {
 taustan koko: 50px 50px;
 taustaväri: #0ae;
taustakuva: -webkit-lineaarinen-gradientti(rgba(255, 255, 255, .2) 50%, läpinäkyvä 50%, läpinäkyvä);
taustakuva: -moz-lineaarinen gradientti(rgba(255, 255, 255, .2) 50%, läpinäkyvä 50%, läpinäkyvä);
taustakuva: -ms-lineaarinen gradientti(rgba(255, 255, 255, .2) 50%, läpinäkyvä 50%, läpinäkyvä);
taustakuva: -o-lineaarinen gradientti(rgba(255, 255, 255, .2) 50%, läpinäkyvä 50%, läpinäkyvä);
taustakuva: lineaarinen gradientti(rgba(255, 255, 255, .2) 50%, läpinäkyvä 50%, läpinäkyvä);
}

3. Shakkilautakunta

Voit helposti luoda shakkilaudan taustakuvion CSS: n avulla. Kokeile muuttaa tätä mallia säätämällä värejä.

HTML-koodi

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

CSS-koodi

body {
 marginaali: 0px;
}
.kuviot {
 leveys: 100vw;
 korkeus: 100vw;
}
.pt1 {
 taustaväri: #eee;
 taustan koko: 60px 60px;
 taustan sijainti: 0 0, 30px 30px;
 taustakuva: -webkit-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta), -webkit-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta);
 taustakuva: -moz-linear-gradient (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta), -moz-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta);
 taustakuva: -ms-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta), -ms-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta);
 taustakuva: -o-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta), -o-lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä) 75%, musta 75%, musta);
 taustakuva: lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta), lineaarinen gradientti (45 astetta, musta 25%, läpinäkyvä 25%, läpinäkyvä 75%, musta 75%, musta);
}

4. Hiljainen meri

Voit käyttää näitä yksinkertaisia ​​vaakasuuntaisia ​​viivakuvioita lisätäksesi staattisen taustan mihin tahansa HTML-elementtiin.

HTML-koodi

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

CSS-koodi

body {
 marginaali: 0px;
}
.kuviot {
 leveys: 100vw;
 korkeus: 100vw;
}
.pt1 {
 taustaväri: #026873;
 taustan koko: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
taustakuva: -webkit-lineaarinen-gradientti(0, rgba(255, 255, 255, .07) 50%, läpinäkyvä 50%), -webkit-lineaarinen-gradientti(0, rgba(255, 255, 255, .13) 50%, läpinäkyvä 50%), -webkit-lineaarinen-gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .17) 50%), -webkit-lineaarinen-gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .19) 50%);
taustakuva: -moz-lineaarinen gradientti(0, rgba(255, 255, 255, .07) 50%, läpinäkyvä 50%), -moz-lineaarinen gradientti(0, rgba(255, 255, 255, .13) 50%, läpinäkyvä 50%), -moz-lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .17) 50%), -moz-lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .19) 50%);
taustakuva: -ms-lineaarinen gradientti(0, rgba(255, 255, 255, .07) 50%, läpinäkyvä 50%), -ms-lineaarinen gradientti(0, rgba(255, 255, 255, .13) 50%, läpinäkyvä 50%), -ms-lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .17) 50%), -ms-lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .19) 50%);
taustakuva: -o-lineaarinen gradientti(0, rgba(255, 255, 255, .07) 50%, läpinäkyvä 50%), -o-lineaarinen gradientti(0, rgba(255, 255, 255, .13) 50%, läpinäkyvä 50%), -o-lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .17) 50%), -o-lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .19) 50%);
taustakuva: lineaarinen gradientti(0, rgba(255, 255, 255, .07) 50%, läpinäkyvä 50%), lineaarinen gradientti(0, rgba(255, 255, 255, .13) 50%, läpinäkyvä 50%), lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .17) 50%), lineaarinen gradientti(0, läpinäkyvä 50%, rgba(255, 255, 255, .19) 50%);
}

5. Moderni tiili

Voit luoda puhtaan CSS-modernin tiilikuvion käyttämällä lineaarinen gradientti CSS-ominaisuus.

CSS-koodi

body {
 taustakuva: lineaarinen gradientti (45 astetta, läpinäkyvä 20%, musta 25%, läpinäkyvä 25%),
 lineaarinen gradientti (-45 astetta, läpinäkyvä 20%, musta 25%, läpinäkyvä 25%),
 lineaarinen gradientti (-45 astetta, läpinäkyvä 75%, musta 80%, läpinäkyvä 0),
 säteittäinen gradientti (harmaa 2px, läpinäkyvä 0);
 taustan koko: 30px 30px, 30px 30px;
}

6. Web3-tyylinen tausta

Voit luoda a Web3-tyylinen tausta käyttämällä taustakuvaa ja lisäämällä siihen sumennustehostetta. Tässä esimerkissä käytetään Unsplashin galaksikuvaa. Voit olla luova ja käyttää kuvaa galaksista, merestä, monumenteista tai mistä tahansa muusta.

HTML-koodi

<div class="kortti bg-blur">
<h1>Kortti gradienttitaustalla</h1>
</div>

CSS-koodi

:root {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=muoto&sovi=rajaa&w = 1169&q = 80');
}
body {
 taustaväri: #1D1E22;
 font-family: sans-serif;
 näyttö: flex;
}
.kortti {
 marginaali: auto;
 pehmuste: 1 rem;
 korkeus: 300px;
 leveys: 300px;
 tekstin tasaus: keskellä;
 väri valkoinen;
 näyttö: flex;
 kohdista kohteet: keskellä;
 perustele-sisältö: keskus;
 asema: suhteellinen;
 taustaväri: harmaa;
 reunan säde: 10px;
}
.bg-blur {
 ylivuoto piilotettu;
 taustaväri: läpinäkyvä;
}
.bg-blur::ennen {
 sisältö: '';
 taustakuva: var(--bg-kuva);
 taustan koko: kansi;
 korkeus: 100%;
 leveys: 100 %;
 sijainti: absoluuttinen;
 suodatin: sumeus (30px);
 z-indeksi: -1;
}

7. Gradientti taustaanimaatio

Gradientti tausta animaatioita käytetään laajasti nykyaikaisilla verkkosivuilla. Pysy trendissä ja käytä gradienttianimaatiota taustalla. Voit myös muokata gradienttivärejä tarpeidesi mukaan.

HTML-koodi

<div class="d-flex flex-sarake tasaus-sisältökeskus w-100 h-100"></div>

CSS-koodi

body {
tausta: lineaarinen gradientti(-45 astetta, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 taustan koko: 400 % 400 %;
 animaatio: gradientti 15s helppous ääretön;
 korkeus: 100vh;
}
@keyframes gradientti {
 0% {
 tausta-sijainti: 0 % 50 %;
 }
50% {
 tausta-asento: 100 % 50 %;
 }
100% {
 tausta-sijainti: 0 % 50 %;
 }
}

8. Kaarevia aaltoja

Voit luoda yksinkertaisen kaarevan aaltokuvion käyttämällä säteittäinen gradientti CSS-ominaisuus.

HTML-koodi

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

CSS-koodi

body {
 marginaali: 0px;
}
.kuviot {
 leveys: 100vw;
 korkeus: 100vw;
}
.pt1 {
tausta: -moz-säteittäinen gradientti(0% 2%, ympyrä, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-säteittäinen gradientti(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ei mitään;
tausta: -webkit-radial-gradient(0% 2%, ympyrä, 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), ei mitään;
tausta: -ms-radiaalinen gradientti(0% 2%, ympyrä, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiaalinen gradientti(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ei mitään;
tausta: -o-säteittäinen gradientti(0% 2%, ympyrä, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-säteittäinen gradientti(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ei mitään;
tausta: säteittäinen gradientti(0% 2%, ympyrä, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), säteittäinen gradientti(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ei mitään;
 taustan koko: 20px 20px;
}

9. Pöytäliina

Tarvitsetko vakiotaustakuvion HTML-div-tiedostollesi? Kokeile tätä pöytäliinakuviota.

CSS-koodi

body {
 tausta: valkoinen;
taustakuva: lineaarinen gradientti(90deg, rgba(200,0,0,.5) 50%, läpinäkyvä 0),
lineaarinen gradientti(rgba(200,0,0,.5) 50%, läpinäkyvä 0);
 taustan koko: 30px 30px;
}

10. Liukuvat diagonaalit

Tässä tehosteessa diagonaaliset värit liukuvat ja menevät päällekkäin. Tasainen animaatio värien sekoitus voi lisätä houkutteleva silauksen verkkosivuilla.

HTML-koodi

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="sisältö">
<h1>Liukuva diagonaali taustatehoste</h1>
</div>

CSS-koodi

html {
korkeus:100%;
}
body {
marginaali:0;
}
.bg {
animaatio:dia 3shelppous sisään-ulosääretönvaihtoehtoinen;
taustakuva: lineaarinen gradientti(-60 astetta, #6c3 50%, #09f 50%);
pohja:0;
vasemmalle:-50%;
opasiteetti:.5;
asemaa:korjattu;
oikein:-50%;
alkuun:0;
z-indeksi:-1;
}
.bg2 {
animaatio-ohjaus:alternate-reverse;
animaatio-kesto:4s;
}
.bg3 {
animaatio-kesto:5s;
}
.sisältö {
taustaväri:rgba (255,255,255,.8);
raja-säde:.25em;
laatikko-varjo:0 0 .25 emrgba(0,0,0,.25);
laatikon kokoinen:border-box;
vasemmalle:50%;
pehmuste:10vmin;
asemaa:korjattu;
tekstin tasaus:keskusta;
alkuun:50%;
muuttaa:translate(-50%, -50%);
}
h1 {
font-perhe:monospace;
}
@keyframes dia {
 0% {
muuttaa:translateX(-25%);
 }
100% {
muuttaa:translateX(25%);
 }
}

Piristä verkkosivustoasi CSS: n avulla

Käytä näitä CSS-taustakuvioita piristääksesi verkkosivustosi suunnittelua. Voit myös lisätä CSS-tuottavuuttasi käyttämällä hienoja CSS-vinkkejä ja temppuja. Niiden avulla voit luoda hienoja malleja CSS: ssä vain muutamalla koodirivillä.

8 tärkeää CSS-vinkkiä ja temppuja, jotka jokaisen kehittäjän tulisi tietää

Lue Seuraava

Kirjailijasta