10 wzorów tła CSS, których możesz użyć w swojej witrynie

Wzory tła mogą radykalnie zmienić wygląd Twojej witryny. Możesz łatwo tworzyć eleganckie wzory tła za pomocą CSS, które przeniosą projekt Twojej witryny na wyższy poziom.

Poniżej znajduje się lista 10 wzorów tła, które możesz wykorzystać w swoich projektach.

1. Czarny Sześciokąt

Kod w tych przykładach jest dostępny w Repozytorium GitHub i jest bezpłatny do użytku w ramach Licencja MIT.

Ten czarny sześciokątny wzór zapewnia bardzo schludne sześciokątne tło sieci. Tytuł jest wyraźnie widoczny na tym tle. Możesz użyć tego wzorca, jeśli projektujesz dowolne strony technologiczne lub architektoniczne.

Kod HTML

<h1>Czarny Sześciokąt</h1>

Kod CSS

ciało {
 rodzina czcionek: 'Udostępnij technologię', bezszeryfowy;
 rozmiar czcionki: 68px;
 kolor biały;
 wyświetlacz: elastyczny;
 jsutify-treść: centrum;
 wyrównaj-elementy: środek;
 margines: 0;
 szerokość: 100vw;
 wysokość: 100vh;
 cień tekstu: 8px 8px 10px #0000008c;
 kolor tła: #343a40;
 obraz w tle: url("dane: obraz/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg





instagram viewer

' szerokość='28' wysokość='49' viewBox='0 0 28 49'Reguła wypełniania %3E%3Cg='nawet dziwne'%3E%3Cg id='sześciokąty' wypełnienie='%239C92AC' krycie wypełnienia='0.25' reguła-wypełniania='niezerowe'%3E%3Cścieżka d='M13,99 9,25 l13 7,5–15 l-13 7,5 l1 31,75–15 l 12,99–7,5 zM3 17,9–12,7–10,99 6,34 11–6,35–17,9–11–6,34 L3 17,9 zM0 15–12,98–7,5–0 h–2–6,35 L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2,3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), gradient liniowy (do prawej góry, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margines: 20px;
}

2. Niebieskie paski

Wzór tła niebieskich pasków wykorzystuje gradient liniowy Właściwość CSS do tworzenia pasków gradientu na tle. Możesz zmień kolor tła i kolor gradientu, aby spełnić Twoje wymagania.

Kod HTML

<klasa div="wzory pkt1"></div>

Kod CSS

ciało {
 margines: 0px;
}
.wzory {
 szerokość: 100vw;
 wysokość: 100vw;
}
.pt1 {
 rozmiar tła: 50px 50px;
 kolor tła: #0ae;
zdjęcie w tle: -webkit-linear-gradient(RGB(255, 255, 255, .2) 50%, przezroczysty 50%, przezroczysty);
zdjęcie w tle: -moz-liniowy-gradient(RGB(255, 255, 255, .2) 50%, przezroczysty 50%, przezroczysty);
zdjęcie w tle: -ms-liniowy-gradient(RGB(255, 255, 255, .2) 50%, przezroczysty 50%, przezroczysty);
zdjęcie w tle: -o-liniowy-gradient(RGB(255, 255, 255, .2) 50%, przezroczysty 50%, przezroczysty);
zdjęcie w tle: gradient liniowy(RGB(255, 255, 255, .2) 50%, przezroczysty 50%, przezroczysty);
}

3. Szachownica

Możesz łatwo stworzyć wzór tła szachownicy za pomocą CSS. Spróbuj dostosować kolory, aby urozmaicić ten projekt.

Kod HTML

<klasa div="wzory pkt1"></div>

Kod CSS

ciało {
 margines: 0px;
}
.wzory {
 szerokość: 100vw;
 wysokość: 100vw;
}
.pt1 {
 kolor tła: #eee;
 rozmiar tła: 60px 60px;
 pozycja w tle: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45deg, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny), -webkit-linear-gradient (45st, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny);
 background-image: -moz-linear-gradient (45deg, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny), -moz-linear-gradient (45st, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny);
 background-image: -ms-linear-gradient (45deg, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny), -ms-linear-gradient (45deg, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny);
 background-image: -o-linear-gradient (45st, czarny 25%, transparent 25%, transparent 75%, czarny 75%, czarny), -o-linear-gradient (45st, czarny 25%, transparent 25%, transparent 75%, czarny 75%, czarny);
 background-image: liniowy-gradient (45°, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny), liniowy-gradient (45 stopni, czarny 25%, przezroczysty 25%, przezroczysty 75%, czarny 75%, czarny);
}

4. Ciche morze

Możesz użyć tych prostych wzorców linii poziomych, aby dodać statyczne tło do dowolnego elementu HTML.

Kod HTML

<klasa div="wzory pkt1"></div>

Kod CSS

ciało {
 margines: 0px;
}
.wzory {
 szerokość: 100vw;
 wysokość: 100vw;
}
.pt1 {
 kolor tła: #026873;
 rozmiar tła: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
zdjęcie w tle: -webkit-linear-gradient(0, RGB(255, 255, 255, .07) 50%, przezroczysty 50%), -webkit-linear-gradient(0, RGB(255, 255, 255, .13) 50%, przezroczysty 50%), -webkit-linear-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .19) 50%);
zdjęcie w tle: -moz-liniowy-gradient(0, RGB(255, 255, 255, .07) 50%, przezroczysty 50%), -moz-liniowy-gradient(0, RGB(255, 255, 255, .13) 50%, przezroczysty 50%), -moz-liniowy-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .17) 50%), -moz-liniowy-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .19) 50%);
zdjęcie w tle: -ms-liniowy-gradient(0, RGB(255, 255, 255, .07) 50%, przezroczysty 50%), -ms-liniowy-gradient(0, RGB(255, 255, 255, .13) 50%, przezroczysty 50%), -ms-liniowy-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .17) 50%), -ms-liniowy-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .19) 50%);
zdjęcie w tle: -o-liniowy-gradient(0, RGB(255, 255, 255, .07) 50%, przezroczysty 50%), -o-liniowy-gradient(0, RGB(255, 255, 255, .13) 50%, przezroczysty 50%), -o-liniowy-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .17) 50%), -o-liniowy-gradient(0, przezroczysty 50%, RGB(255, 255, 255, .19) 50%);
zdjęcie w tle: gradient liniowy(0, RGB(255, 255, 255, .07) 50%, przezroczysty 50%), gradient liniowy(0, RGB(255, 255, 255, .13) 50%, przezroczysty 50%), gradient liniowy(0, przezroczysty 50%, RGB(255, 255, 255, .17) 50%), gradient liniowy(0, przezroczysty 50%, RGB(255, 255, 255, .19) 50%);
}

5. Nowoczesna cegła

Możesz stworzyć czysty nowoczesny wzór cegły CSS za pomocą gradient liniowy Właściwość CSS.

Kod CSS

ciało {
 tło-obraz: liniowy-gradient (45deg, transparentny 20%, czarny 25%, transparentny 25%),
 gradient liniowy (-45°, transparentny 20%, czarny 25%, transparentny 25%),
 gradient liniowy (-45°, transparentny 75%, czarny 80%, transparentny 0),
 gradient radialny (szary 2px, przezroczysty 0);
 rozmiar tła: 30px 30px, 30px 30px;
}

6. Tło w stylu Web3

Możesz stworzyć Sieć3w stylu tła przy użyciu obrazu tła i dodanie do niego efektu rozmycia. W tym przykładzie użyto obrazu galaktyki z Unsplash. Możesz być kreatywny i użyć obrazu galaktyki, morza, pomników lub czegokolwiek innego.

Kod HTML

<klasa div="karta bg-blur">
<h1>Karta z gradientowym tłem</h1>
</div>

Kod CSS

:źródło {
 --bg-obraz: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=przytnij&w=1169&q=80');
}
ciało {
 kolor tła: #1D1E22;
 rodzina czcionek: bezszeryfowa;
 wyświetlacz: elastyczny;
}
.karta {
 margines: auto;
 wypełnienie: 1rem;
 wysokość: 300px;
 szerokość: 300px;
 wyrównanie tekstu: środek;
 kolor biały;
 wyświetlacz: elastyczny;
 wyrównaj-elementy: środek;
 uzasadnić-treść: centrum;
 pozycja: względna;
 kolor tła: szary;
 promień obramowania: 10px;
}
.bg-rozmycie {
 przelew: ukryty;
 kolor tła: przezroczysty;
}
.bg-rozmycie::zanim {
 zawartość: '';
 zdjęcie w tle: var(--bg-obraz);
 rozmiar tła: okładka;
 wzrost: 100%;
 szerokość: 100%;
 pozycja: bezwzględna;
 filtr: rozmycie (30px);
 indeks z: -1;
}

7. Gradientowa animacja tła

Tło gradientowe animacje są szeroko stosowane w nowoczesnych serwisach internetowych. Bądź na czasie i używaj animacji gradientu z tłem. Możesz także dostosować kolory gradientu do swoich potrzeb.

Kod HTML

<klasa div="d-flex flex-kolumna justuj-centrum-treści w-100 h-100"></div>

Kod CSS

ciało {
tło: gradient liniowy(-45 stopni, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 rozmiar tła: 400% 400%;
 animacja: gradient 15s ułatwia nieskończoność;
 wysokość: 100vh;
}
@klatki kluczowe gradient {
 0% {
 pozycja tła: 0% 50%;
 }
50% {
 pozycja tła: 100% 50%;
 }
100% {
 pozycja tła: 0% 50%;
 }
}

8. Krzywe fale

Możesz stworzyć prosty wzór krzywych fal za pomocą gradient promienisty Właściwość CSS.

Kod HTML

<klasa div="wzory pkt1"></div>

Kod CSS

ciało {
 margines: 0px;
}
.wzory {
 szerokość: 100vw;
 wysokość: 100vw;
}
.pt1 {
tło: -moz-radial-gradient(0% 2%, okrąg, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), Żaden;
tło: -webkit-radial-gradient(0% 2%, okrąg, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), Żaden;
tło: -ms-radial-gradient(0% 2%, okrąg, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), Żaden;
tło: -o-radial-gradient(0% 2%, okrąg, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), Żaden;
tło: gradient promienisty(0% 2%, okrąg, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), gradient promienisty(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), Żaden;
 rozmiar tła: 20px 20px;
}

9. Obrus

Potrzebujesz standardowego wzoru tła dla swojego div HTML? Wypróbuj ten wzór obrusu.

Kod CSS

ciało {
 tło: białe;
zdjęcie w tle: gradient liniowy(90stopnie, RGB(200,0,0,.5) 50%, przezroczysty 0),
gradient liniowy(RGB(200,0,0,.5) 50%, przezroczysty 0);
 rozmiar tła: 30px 30px;
}

10. Przesuwne przekątne

W efekcie kolory ukośne przesuwają się i nakładają na siebie. Płynna animacja mieszania kolorów może nadać Twojej witrynie atrakcyjny wygląd.

Kod HTML

<klasa div="bg"></div>
<klasa div="bg bg2"></div>
<klasa div="bg bg3"></div>
<klasa div="zawartość">
<h1>Przesuwne przekątne efekt tła</h1>
</div>

Kod CSS

html {
Wysokość:100%;
}
ciało {
margines:0;
}
.bg {
animacja:ślizgać się 3swyluzowaćnieskończonyalternatywny;
zdjęcie w tle: gradient liniowy(-60 stopni, #6c3 50%, #09f 50%);
na dole:0;
lewy:-50%;
nieprzezroczystość:.5;
pozycja:naprawiony;
Prawidłowy:-50%;
szczyt:0;
indeks z:-1;
}
.bg2 {
kierunek animacji:alternatywny-rewers;
czas trwania animacji:4s;
}
.bg3 {
czas trwania animacji:5s;
}
.zawartość {
kolor tła:rgba (255,255,255,.8);
promień-granicy:.25em;
cień pudełka:0 0 .25emRGB(0,0,0,.25);
rozmiar pudełka:obramowanie-pudełko;
lewy:50%;
wyściółka:10 min;
pozycja:naprawiony;
wyrównanie tekstu:Centrum;
szczyt:50%;
przekształcać:tłumacz (-50%, -50%);
}
h1 {
rodzina czcionek:monoprzestrzeń;
}
@klatki kluczowe ślizgać się {
 0% {
przekształcać:translateX(-25%);
 }
100% {
przekształcać:translateX(25%);
 }
}

Udekoruj swoją witrynę za pomocą CSS

Użyj tych wzorców tła CSS, aby urozmaicić projekt swojej witryny. Możesz także zwiększyć produktywność CSS, korzystając z kilku fajnych porad i sztuczek CSS. Mogą pomóc w tworzeniu zgrabnych projektów w CSS za pomocą zaledwie kilku linijek kodu.

8 podstawowych wskazówek i sztuczek CSS, które powinien znać każdy programista

Czytaj dalej

O autorze