10 CSS-háttérminta, amelyet a webhelyén használhat

A háttérminták gyökeresen megváltoztathatják webhelye megjelenését. Könnyedén létrehozhat elegáns háttérmintákat a CSS használatával, amelyek a következő szintre emelik webhelye kialakítását.

Az alábbiakban felsorolunk 10 háttérmintát, amelyeket a projektjeiben használhat.

1. A fekete hatszög

A példákban szereplő kód a GitHub adattár alatt ingyenesen használhatja MIT licenc.

Ez a fekete hatszög minta nagyon szép hatszög hálózati hátteret biztosít. A cím jól látható ebben a háttérben. Ezt a mintát akkor használhatja, ha technológiai vagy építészeti webhelyeket tervez.

HTML kód

<h1>A fekete hatszög</h1>

CSS kód

body {
 betűtípus család: 'Share Tech', sans-serif;
 betűméret: 68 képpont;
 fehér szín;
 kijelző: flex;
 jsutify-content: center;
 align-ites: center;
 margó: 0;
 szélesség: 100vw;
 magasság: 100vh;
 szöveg-árnyék: 8px 8px 10px #0000008c;
 háttérszín: #343a40;
 háttérkép: url("adatok: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' szélesség='28' magasság='49' viewBox='0 0 28 49'%3E%3Cg fill-rule=





instagram viewer

'Páros Páratlan'%3E%3Cg id='hatszögek' fill='%239C92AC' fill-opacity='0.25' fill-rule='nem nulla'%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. 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineáris gradiens (jobbra fent, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margó: 20 képpont;
}

2. A kék csíkok

A kék csíkos háttérminta a lineáris-gradiens CSS tulajdonság színátmenet csíkok létrehozásához a háttér felett. tudsz módosítsa a háttérszínt és a színátmenet az Ön igényeinek megfelelő.

HTML kód

<div class="minták pt1"></div>

CSS kód

body {
 margó: 0px;
}
.mintákat {
 szélesség: 100vw;
 magasság: 100vw;
}
.pt1 {
 háttérméret: 50 képpont 50 képpont;
 háttérszín: #0ae;
háttérkép: -webkit-lineáris-gradiens(rgba(255, 255, 255, .2) 50%, átlátszó 50%, átlátszó);
háttérkép: -moz-lineáris-gradiens(rgba(255, 255, 255, .2) 50%, átlátszó 50%, átlátszó);
háttérkép: -ms-lineáris-gradiens(rgba(255, 255, 255, .2) 50%, átlátszó 50%, átlátszó);
háttérkép: -o-lineáris-gradiens(rgba(255, 255, 255, .2) 50%, átlátszó 50%, átlátszó);
háttérkép: lineáris-gradiens(rgba(255, 255, 255, .2) 50%, átlátszó 50%, átlátszó);
}

3. A sakktábla

Könnyedén létrehozhat sakktábla háttérmintát a CSS használatával. Próbálja módosítani a színeket, hogy változtassa ezt a designt.

HTML kód

<div class="minták pt1"></div>

CSS kód

body {
 margó: 0px;
}
.mintákat {
 szélesség: 100vw;
 magasság: 100vw;
}
.pt1 {
 háttérszín: #eee;
 háttérméret: 60 képpont 60 képpont;
 háttér-pozíció: 0 0, 30px 30px;
 háttérkép: -webkit-lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete), -webkit-lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete);
 háttérkép: -moz-linear-gradient (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete), -moz-lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete);
 háttérkép: -ms-lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete), -ms-lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete);
 háttérkép: -o-lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete), -o-lineáris színátmenet (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete);
 háttérkép: lineáris gradiens (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete), lineáris színátmenet (45 fok, fekete 25%, átlátszó 25%, átlátszó 75%, fekete 75%, fekete);
}

4. A csendes tenger

Ezekkel az egyszerű vízszintes vonalmintákkal bármely HTML-elemhez statikus hátteret adhat.

HTML kód

<div class="minták pt1"></div>

CSS kód

body {
 margó: 0px;
}
.mintákat {
 szélesség: 100vw;
 magasság: 100vw;
}
.pt1 {
 háttérszín: #026873;
 háttérméret: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
háttérkép: -webkit-lineáris-gradiens(0, rgba(255, 255, 255, .07) 50%, átlátszó 50%), -webkit-lineáris-gradiens(0, rgba(255, 255, 255, .13) 50%, átlátszó 50%), -webkit-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .17) 50%), -webkit-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .19) 50%);
háttérkép: -moz-lineáris-gradiens(0, rgba(255, 255, 255, .07) 50%, átlátszó 50%), -moz-lineáris-gradiens(0, rgba(255, 255, 255, .13) 50%, átlátszó 50%), -moz-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .17) 50%), -moz-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .19) 50%);
háttérkép: -ms-lineáris-gradiens(0, rgba(255, 255, 255, .07) 50%, átlátszó 50%), -ms-lineáris-gradiens(0, rgba(255, 255, 255, .13) 50%, átlátszó 50%), -ms-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .17) 50%), -ms-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .19) 50%);
háttérkép: -o-lineáris-gradiens(0, rgba(255, 255, 255, .07) 50%, átlátszó 50%), -o-lineáris-gradiens(0, rgba(255, 255, 255, .13) 50%, átlátszó 50%), -o-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .17) 50%), -o-lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .19) 50%);
háttérkép: lineáris-gradiens(0, rgba(255, 255, 255, .07) 50%, átlátszó 50%), lineáris-gradiens(0, rgba(255, 255, 255, .13) 50%, átlátszó 50%), lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .17) 50%), lineáris-gradiens(0, átlátszó 50%, rgba(255, 255, 255, .19) 50%);
}

5. A modern tégla

Tiszta CSS modern téglamintát hozhat létre a lineáris-gradiens CSS tulajdonság.

CSS kód

body {
 háttérkép: lineáris gradiens (45 fok, átlátszó 20%, fekete 25%, átlátszó 25%),
 lineáris gradiens (-45 fok, átlátszó 20%, fekete 25%, átlátszó 25%),
 lineáris gradiens (-45 fok, átlátszó 75%, fekete 80%, átlátszó 0),
 radiális gradiens (szürke 2px, átlátszó 0);
 háttérméret: 30 képpont 30 képpont, 30 képpont 30 képpont;
}

6. Web3 stílusú háttér

Létrehozhat a Web3-stílusú háttér egy háttérkép használatával, és elmosódási hatást ad hozzá. Ez a példa az Unsplash galaxis képét használja. Lehet kreatív, és használhat galaxist, tengert, emlékműveket vagy bármi mást.

HTML kód

<div class="kártya bg-blur">
<h1>Kártya színátmenetes háttérrel</h1>
</div>

CSS kód

:gyökér {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formátum&fit=termés&w=1169&q=80');
}
body {
 háttérszín: #1D1E22;
 font-family: sans-serif;
 kijelző: flex;
}
.kártya {
 margó: auto;
 párnázás: 1 rem;
 magasság: 300 képpont;
 szélesség: 300 képpont;
 szöveg igazítása: középre;
 fehér szín;
 kijelző: flex;
 align-ites: center;
 indokol-tartalom: center;
 pozíció: relatív;
 háttérszín: szürke;
 határsugár: 10 képpont;
}
.bg-blur {
 túlcsordulás: rejtett;
 háttérszín: átlátszó;
}
.bg-blur::előtt {
 tartalom: '';
 háttérkép: var(--bg-kép);
 háttér-méret: borító;
 magasság: 100%;
 szélesség: 100%;
 pozíció: abszolút;
 szűrő: blur (30px);
 z-index: -1;
}

7. Gradiens háttér animáció

Gradiens háttér az animációkat széles körben használják a modern weboldalakon. Maradjon a trendben, és használja a gradiens animációt a háttérrel. A színátmenet színeit igényei szerint is testreszabhatja.

HTML kód

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

CSS kód

body {
háttér: lineáris-gradiens(-45 fok, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 háttér-méret: 400% 400%;
 animáció: gradiens 15s könnyű végtelen;
 magasság: 100vh;
}
@keyframes gradiens {
 0% {
 háttérpozíció: 0% 50%;
 }
50% {
 háttérpozíció: 100% 50%;
 }
100% {
 háttérpozíció: 0% 50%;
 }
}

8. kanyargós hullámok

A segítségével egyszerű görbe hullámmintát hozhat létre radiális-gradiens CSS tulajdonság.

HTML kód

<div class="minták pt1"></div>

CSS kód

body {
 margó: 0px;
}
.mintákat {
 szélesség: 100vw;
 magasság: 100vw;
}
.pt1 {
háttér: -moz-radial-gradiens(0% 2%, kör, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradiens(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), egyik sem;
háttér: -webkit-radial-gradiens(0% 2%, kör, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradiens(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), egyik sem;
háttér: -ms-radiális gradiens(0% 2%, kör, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiális gradiens(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), egyik sem;
háttér: -o-radiális-gradiens(0% 2%, kör, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radiális-gradiens(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), egyik sem;
háttér: radiális-gradiens(0% 2%, kör, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiális-gradiens(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), egyik sem;
 háttérméret: 20 képpont 20 képpont;
}

9. Asztalterítő

Szabványos háttérmintára van szüksége a HTML div-hez? Próbáld ki ezt az asztalterítő mintát.

CSS kód

body {
 háttér: fehér;
háttérkép: lineáris-gradiens(90deg, rgba(200,0,0,.5) 50%, átlátszó 0),
lineáris-gradiens(rgba(200,0,0,.5) 50%, átlátszó 0);
 háttérméret: 30 képpont 30 képpont;
}

10. Csúszó átlók

Ebben a hatásban az átlós színek elcsúsznak és átfedik egymást. A színkeverés egyenletes animációja vonzó megjelenést kölcsönöz webhelyének.

HTML kód

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="tartalom">
<h1>Csúszó átlók háttérhatás</h1>
</div>

CSS kód

html {
magasság:100%;
}
body {
árrés:0;
}
.bg {
élénkség:csúszik 3skönnyedség be-kivégtelenváltakozó;
háttérkép: lineáris-gradiens(-60 fok, #6c3 50%, #09f 50%);
alsó:0;
bal:-50%;
átlátszatlanság:.5;
pozíció:rögzített;
jobb:-50%;
tetejére:0;
z-index:-1;
}
.bg2 {
animációs rendezés:alternate-reverse;
animáció-időtartam:4s;
}
.bg3 {
animáció-időtartam:5s;
}
.tartalom {
háttérszín:rgba (255,255,255,.8);
határ-sugár:.25em;
doboz-árnyék:0 0 .25emrgba(0,0,0,.25);
doboz-méretezés:border-box;
bal:50%;
párnázás:10vmin;
pozíció:rögzített;
szöveg igazítás:központ;
tetejére:50%;
átalakítani:translate(-50%, -50%);
}
h1 {
betűtípus család:monospace;
}
@keyframes slide {
 0% {
átalakítani:translateX(-25%);
 }
100% {
átalakítani:translateX(25%);
 }
}

Fejtse fel webhelyét CSS használatával

Használja ezeket a CSS-háttérmintákat, hogy feldobja webhelye dizájnját. Néhány remek CSS-tipp és trükk segítségével növelheti a CSS termelékenységét. Segítségükkel egyszerű terveket hozhat létre CSS-ben, mindössze néhány sornyi kóddal.

8 alapvető CSS-tipp és trükk, amelyet minden fejlesztőnek tudnia kell

Olvassa el a következőt

A szerzőről