10 vzorů pozadí CSS, které můžete použít na svém webu

Vzory na pozadí mohou radikálně změnit vzhled vašeho webu. Pomocí CSS můžete snadno vytvořit elegantní vzory pozadí, které posunou design vašeho webu na další úroveň.

Níže je uveden seznam 10 vzorů pozadí, které můžete použít ve svých projektech.

1. Černý šestiúhelník

Kód v těchto příkladech je dostupný v a úložiště GitHub a je zdarma k použití pod licence MIT.

Tento černý šestiúhelníkový vzor poskytuje velmi elegantní šestiúhelníkové síťové pozadí. Na tomto pozadí je název jasně viditelný. Tento vzor můžete použít, pokud navrhujete jakékoli technologické nebo architektonické webové stránky.

HTML kód

<h1>Černý šestiúhelník</h1>

CSS kód

tělo {
 rodina písem: 'Share Tech', bezpatkové;
 velikost písma: 68px;
 barva bílá;
 displej: flex;
 jsutify-content: centrum;
 align-items: center;
 okraj: 0;
 šířka: 100vw;
 výška: 100vh;
 stín textu: 8px 8px 10px #0000008c;
 barva pozadí: #343a40;
 obrázek na pozadí: url("data: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' šířka='28' výška ='49' viewBox='0 0 28 49





instagram viewer

'%3E%3Cg pravidlo plnění='i lichý'%3E%3Cg id='šestiúhelníky' vyplnit='%239C92AC' fill-opacity='0.25' fill-rule='nenulová'%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-13127018 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V9170h-5.01Lh 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineární gradient (sprava nahoru, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 okraj: 20px;
}

2. Modré proužky

Vzorek pozadí modrých proužků používá lineární gradient Vlastnost CSS pro vytvoření pruhů přechodu na pozadí. Můžeš změnit barvu pozadí a barvu přechodu podle vašich požadavků.

HTML kód

<div třída="vzory pt1"></div>

CSS kód

tělo {
 okraj: 0px;
}
.vzory {
 šířka: 100vw;
 výška: 100vw;
}
.pt1 {
 background-size: 50px 50px;
 barva pozadí: #0ae;
obrázek na pozadí: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, průhledný 50%, průhledný);
obrázek na pozadí: -moz-lineární-gradient(rgba(255, 255, 255, .2) 50%, průhledný 50%, průhledný);
obrázek na pozadí: -ms-lineární-gradient(rgba(255, 255, 255, .2) 50%, průhledný 50%, průhledný);
obrázek na pozadí: -o-lineární-gradient(rgba(255, 255, 255, .2) 50%, průhledný 50%, průhledný);
obrázek na pozadí: lineární gradient(rgba(255, 255, 255, .2) 50%, průhledný 50%, průhledný);
}

3. šachovnice

Pomocí CSS můžete snadno vytvořit vzor návrhu pozadí šachovnice. Zkuste upravit barvy, abyste změnili tento design.

HTML kód

<div třída="vzory pt1"></div>

CSS kód

tělo {
 okraj: 0px;
}
.vzory {
 šířka: 100vw;
 výška: 100vw;
}
.pt1 {
 barva pozadí: #eee;
 background-size: 60px 60px;
 background-position: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45 stupňů, černá 25 %, průhledná 25 %, průhledná 75 %, černá 75%, černá), -webkit-linear-gradient (45°, černá 25%, transparentní 25%, transparentní 75%, černá 75%, Černá);
 background-image: -moz-linear-gradient (45 stupňů, černá 25 %, průhledná 25 %, průhledná 75 %, černá 75%, černá), -moz-lineární-gradient (45°, černá 25%, transparentní 25%, transparentní 75%, černá 75%, Černá);
 background-image: -ms-linear-gradient (45 stupňů, černá 25 %, průhledná 25 %, průhledná 75 %, černá 75 %, černá), -ms-lineární-gradient (45 stupňů, černá 25 %, průhledná 25 %, průhledná 75 %, černá 75 %, Černá);
 background-image: -o-linear-gradient (45deg, černá 25%, transparentní 25%, transparentní 75%, černá 75%, černá), -o-linear-gradient (45deg, černá 25%, transparentní 25%, transparentní 75 %, černá 75 %, černá);
 obrázek na pozadí: lineární gradient (45 stupňů, černá 25 %, průhledná 25 %, průhledná 75 %, černá 75 %, černá), lineární gradient (45 stupňů, černá 25 %, průhledná 25 %, průhledná 75 %, černá 75 %, Černá);
}

4. Tiché moře

Tyto jednoduché vzory vodorovných čar můžete použít k přidání statického pozadí k jakémukoli prvku HTML.

HTML kód

<div třída="vzory pt1"></div>

CSS kód

tělo {
 okraj: 0px;
}
.vzory {
 šířka: 100vw;
 výška: 100vw;
}
.pt1 {
 barva pozadí: #026873;
 background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
obrázek na pozadí: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, průhledný 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, průhledný 50%), -webkit-linear-gradient(0, průhledný 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, průhledný 50%, rgba(255, 255, 255, .19) 50%);
obrázek na pozadí: -moz-lineární-gradient(0, rgba(255, 255, 255, .07) 50%, průhledný 50%), -moz-lineární-gradient(0, rgba(255, 255, 255, .13) 50%, průhledný 50%), -moz-lineární-gradient(0, průhledný 50%, rgba(255, 255, 255, .17) 50%), -moz-lineární-gradient(0, průhledný 50%, rgba(255, 255, 255, .19) 50%);
obrázek na pozadí: -ms-lineární-gradient(0, rgba(255, 255, 255, .07) 50%, průhledný 50%), -ms-lineární-gradient(0, rgba(255, 255, 255, .13) 50%, průhledný 50%), -ms-lineární-gradient(0, průhledný 50%, rgba(255, 255, 255, .17) 50%), -ms-lineární-gradient(0, průhledný 50%, rgba(255, 255, 255, .19) 50%);
obrázek na pozadí: -o-lineární-gradient(0, rgba(255, 255, 255, .07) 50%, průhledný 50%), -o-lineární-gradient(0, rgba(255, 255, 255, .13) 50%, průhledný 50%), -o-lineární-gradient(0, průhledný 50%, rgba(255, 255, 255, .17) 50%), -o-lineární-gradient(0, průhledný 50%, rgba(255, 255, 255, .19) 50%);
obrázek na pozadí: lineární gradient(0, rgba(255, 255, 255, .07) 50%, průhledný 50%), lineární gradient(0, rgba(255, 255, 255, .13) 50%, průhledný 50%), lineární gradient(0, průhledný 50%, rgba(255, 255, 255, .17) 50%), lineární gradient(0, průhledný 50%, rgba(255, 255, 255, .19) 50%);
}

5. Moderní cihla

Můžete vytvořit čistý moderní cihlový vzor CSS pomocí lineární gradient Vlastnost CSS.

CSS kód

tělo {
 obrázek na pozadí: lineární přechod (45 stupňů, průhledný 20 %, černý 25 %, průhledný 25 %),
 lineární gradient (-45 stupňů, transparentní 20 %, černá 25 %, transparentní 25 %),
 lineární gradient (-45 stupňů, transparentní 75 %, černá 80 %, transparentní 0),
 radiální přechod (šedá 2px, průhledná 0);
 background-size: 30px 30px, 30px 30px;
}

6. Pozadí stylu Web3

Můžete vytvořit a Web3-styl pozadí pomocí obrázku na pozadí a přidání efektu rozostření. Tento příklad používá obrázek galaxie z Unsplash. Můžete být kreativní a použít obrázek galaxie, moře, památek nebo čehokoli jiného.

HTML kód

<div třída="karta bg-blur">
<h1>Karta s přechodem pozadí</h1>
</div>

CSS kód

:vykořenit {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formát&fit=plodina&w=1169&q=80');
}
tělo {
 barva pozadí: #1D1E22;
 rodina písem: sans-serif;
 displej: flex;
}
.Kartu {
 okraj: auto;
 polstrování: 1rem;
 výška: 300px;
 šířka: 300px;
 text-align: center;
 barva bílá;
 displej: flex;
 align-items: center;
 justify-content: center;
 poloha: relativní;
 barva pozadí: šedá;
 border-radius: 10px;
}
.bg-blur {
 přepad: skrytý;
 barva pozadí: průhledná;
}
.bg-blur::před {
 obsah: '';
 obrázek na pozadí: var(--bg-image);
 background-size: cover;
 výška: 100 %;
 šířka: 100 %;
 pozice: absolutní;
 filtr: rozostření (30px);
 z-index: -1;
}

7. Přechod na pozadí animace

Přechodové pozadí animace jsou široce používány v moderních webových stránkách. Zůstaňte v trendu a použijte přechodovou animaci s pozadím. Barvy přechodu si také můžete přizpůsobit podle svých potřeb.

HTML kód

<div třída="d-flex flex-column justify-content-center w-100 h-100"></div>

CSS kód

tělo {
Pozadí: lineární gradient(-45 stupňů, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 velikost pozadí: 400 % 400 %;
 animace: přechod 15s snadnost nekonečný;
 výška: 100vh;
}
@klíčové snímky spád {
 0% {
 pozice pozadí: 0 % 50 %;
 }
50% {
 pozice pozadí: 100 % 50 %;
 }
100% {
 pozice pozadí: 0 % 50 %;
 }
}

8. Zakřivené vlny

Můžete vytvořit jednoduchý vzor zakřivených vln pomocí radiální gradient Vlastnost CSS.

HTML kód

<div třída="vzory pt1"></div>

CSS kód

tělo {
 okraj: 0px;
}
.vzory {
 šířka: 100vw;
 výška: 100vw;
}
.pt1 {
Pozadí: -moz-radiální-gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radiální-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žádný;
Pozadí: -webkit-radial-gradient(0% 2%, kruh, 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), žádný;
Pozadí: -ms-radiální-gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiální-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žádný;
Pozadí: -o-radiální-gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radiální-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žádný;
Pozadí: radiální gradient(0% 2%, kruh, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiální gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), žádný;
 background-size: 20px 20px;
}

9. Ubrus

Potřebujete standardní vzor pozadí pro svůj HTML div? Vyzkoušejte tento vzor ubrusu.

CSS kód

tělo {
 pozadí: bílé;
obrázek na pozadí: lineární gradient(90stupně, rgba(200,0,0,.5) 50%, průhledný 0),
lineární gradient(rgba(200,0,0,.5) 50%, průhledný 0);
 background-size: 30px 30px;
}

10. Posuvné úhlopříčky

V tomto efektu se diagonální barvy posouvají a vzájemně se překrývají. Hladká animace míchání barev může dodat vašemu webu atraktivní nádech.

HTML kód

<div třída="bg"></div>
<div třída="bg bg2"></div>
<div třída="bg bg3"></div>
<div třída="obsah">
<h1>Efekt pozadí posuvné úhlopříčky</h1>
</div>

CSS kód

html {
výška:100%;
}
tělo {
okraj:0;
}
.bg {
animace:skluzavka 3seasy-in-outnekonečnýstřídat;
obrázek na pozadí: lineární gradient(-60 stupňů, #6c3 50%, #09f 50%);
dno:0;
vlevo, odjet:-50%;
neprůhlednost:.5;
pozice:pevný;
že jo:-50%;
horní:0;
z-index:-1;
}
.bg2 {
animace-režie:střídavě-zpětně;
délka animace: 4s;
}
.bg3 {
délka animace:5s;
}
.obsah {
barva pozadí:rgba (255,255,255,.8);
hraniční poloměr:.25 em;
box-shadow:0 0 0,25 emrgba(0,0,0,.25);
box-size:border-box;
vlevo, odjet:50%;
vycpávka:10vmin;
pozice:pevný;
zarovnání textu:centrum;
horní:50%;
přeměnit:přeložit(-50%, -50%);
}
h1 {
rodina písem: monoprostor;
}
@klíčové snímky snímek {
 0% {
přeměnit:translateX(-25%);
 }
100% {
přeměnit:translateX(25%);
 }
}

Vylepšete svůj web pomocí CSS

Použijte tyto vzory pozadí CSS k vylepšení designu vašeho webu. Svou produktivitu CSS můžete také zvýšit pomocí skvělých tipů a triků CSS. Mohou vám pomoci vytvořit úhledné návrhy v CSS pomocí několika řádků kódu.

8 základních CSS tipů a triků, které by měl znát každý vývojář

Přečtěte si další

O autorovi