Web Sitenizde Kullanabileceğiniz 10 CSS Arka Plan Deseni

Arka plan desenleri web sitenizin görünümünü kökten değiştirebilir. CSS kullanarak sitenizin tasarımını bir üst seviyeye çıkaracak zarif arka plan desenlerini kolayca oluşturabilirsiniz.

Aşağıda projelerinizde kullanabileceğiniz 10 arka plan deseninin bir listesi bulunmaktadır.

1. Siyah Altıgen

Bu örneklerdeki kod bir GitHub deposu altında kullanmanız için ücretsizdir. MIT lisansı.

Bu siyah altıgen desen, çok düzgün bir altıgen ağ arka planı sağlar. Başlık bu arka plana karşı açıkça görülebilir. Herhangi bir teknolojik veya mimari web sitesi tasarlıyorsanız bu kalıbı kullanabilirsiniz.

HTML Kodu

<h1>Siyah Altıgen</h1>

CSS Kodu

gövde {
 font ailesi: 'Teknolojiyi Paylaşın', sans Serif;
 yazı tipi boyutu: 68 piksel;
 Beyaz renk;
 ekran: esnek;
 jsutify-içeriği: merkez;
 hizalama öğeleri: merkez;
 kenar boşluğu: 0;
 genişlik: 100vw;
 yükseklik: 100vh;
 Metin gölgesi: 8piksel 8piksel 10piksel #0000008c;
 arka plan rengi: #343a40;
 arka plan resmi: url("veri: resim/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg





instagram viewer

' genişlik='28' yükseklik='49' görünüm kutusu='0 0 28 49'%3E%3Cg doldurma kuralı='tek çift'%3E%3Cg kimliği='altıgenler' doldur='%239C92AC' dolgu opaklığı='0.25' doldurma kuralı='sıfırdan farklı'%3E%3Cyol 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.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 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"), doğrusal gradyan (sağ üste, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 kenar boşluğu: 20 piksel;
}

2. Mavi Şeritler

Mavi şeritler arka plan deseni, lineer gradyan Bir arka plan üzerinde degrade şeritler oluşturmak için CSS özelliği. Yapabilirsin arka plan rengini değiştir ve gereksinimlerinizi karşılamak için degrade rengi.

HTML Kodu

<div sınıfı="desenler pt1"></div>

CSS Kodu

gövde {
 kenar boşluğu: 0 piksel;
}
.desenler {
 genişlik: 100vw;
 yükseklik: 100vw;
}
.pt1 {
 arka plan boyutu: 50 piksel 50 piksel;
 arka plan rengi: #0ae;
arka plan görüntüsü: -webkit-doğrusal-gradyan(rgba(255, 255, 255, .2) 50%, şeffaf 50%, şeffaf);
arka plan görüntüsü: -moz-doğrusal-gradyan(rgba(255, 255, 255, .2) 50%, şeffaf 50%, şeffaf);
arka plan görüntüsü: -ms-doğrusal-gradyan(rgba(255, 255, 255, .2) 50%, şeffaf 50%, şeffaf);
arka plan görüntüsü: -o-doğrusal-gradyan(rgba(255, 255, 255, .2) 50%, şeffaf 50%, şeffaf);
arka plan görüntüsü: lineer gradyan(rgba(255, 255, 255, .2) 50%, şeffaf 50%, şeffaf);
}

3. satranç tahtası

CSS kullanarak kolayca bir satranç tahtası arka plan tasarım deseni oluşturabilirsiniz. Bu tasarımı çeşitlendirmek için renkleri ayarlamayı deneyin.

HTML Kodu

<div sınıfı="desenler pt1"></div>

CSS Kodu

gövde {
 kenar boşluğu: 0 piksel;
}
.desenler {
 genişlik: 100vw;
 yükseklik: 100vw;
}
.pt1 {
 arka plan rengi: #eee;
 arka plan boyutu: 60 piksel 60 piksel;
 arka plan konumu: 0 0, 30 piksel 30 piksel;
 arka plan görüntüsü: -webkit-doğrusal-gradyan (45 derece, siyah %25, şeffaf %25, şeffaf %75, siyah %75, siyah), -webkit-doğrusal-gradyan (45 derece, siyah %25, şeffaf %25, şeffaf %75, siyah %75, siyah);
 arka plan görüntüsü: -moz-doğrusal-gradyan (45 derece, siyah %25, saydam %25, saydam %75, siyah %75, siyah), -moz-doğrusal-gradyan (45 derece, siyah %25, saydam %25, saydam %75, siyah %75, siyah);
 arka plan görüntüsü: -ms-doğrusal-gradyan (45 derece, siyah %25, saydam %25, saydam %75, siyah %75, siyah), -ms-doğrusal-gradyan (45 derece, siyah %25, saydam %25, saydam %75, siyah %75, siyah);
 arka plan görüntüsü: -o-doğrusal-gradyan (45 derece, siyah %25, şeffaf %25, şeffaf %75, siyah %75, siyah), -o-doğrusal-gradyan (45 derece, siyah %25, şeffaf %25, şeffaf %75, siyah %75, siyah);
 arka plan görüntüsü: doğrusal gradyan (45 derece, siyah %25, şeffaf %25, şeffaf %75, siyah %75, siyah), doğrusal gradyan (45 derece, siyah %25, şeffaf %25, şeffaf %75, siyah %75, siyah);
}

4. Sessiz Deniz

Herhangi bir HTML öğesine statik bir arka plan eklemek için bu basit yatay çizgi desenlerini kullanabilirsiniz.

HTML Kodu

<div sınıfı="desenler pt1"></div>

CSS Kodu

gövde {
 kenar boşluğu: 0 piksel;
}
.desenler {
 genişlik: 100vw;
 yükseklik: 100vw;
}
.pt1 {
 arka plan rengi: #026873;
 arka plan boyutu: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
arka plan görüntüsü: -webkit-doğrusal-gradyan(0, rgba(255, 255, 255, .07) 50%, şeffaf 50%), -webkit-doğrusal-gradyan(0, rgba(255, 255, 255, .13) 50%, şeffaf 50%), -webkit-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .17) 50%), -webkit-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .19) 50%);
arka plan görüntüsü: -moz-doğrusal-gradyan(0, rgba(255, 255, 255, .07) 50%, şeffaf 50%), -moz-doğrusal-gradyan(0, rgba(255, 255, 255, .13) 50%, şeffaf 50%), -moz-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .17) 50%), -moz-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .19) 50%);
arka plan görüntüsü: -ms-doğrusal-gradyan(0, rgba(255, 255, 255, .07) 50%, şeffaf 50%), -ms-doğrusal-gradyan(0, rgba(255, 255, 255, .13) 50%, şeffaf 50%), -ms-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .17) 50%), -ms-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .19) 50%);
arka plan görüntüsü: -o-doğrusal-gradyan(0, rgba(255, 255, 255, .07) 50%, şeffaf 50%), -o-doğrusal-gradyan(0, rgba(255, 255, 255, .13) 50%, şeffaf 50%), -o-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .17) 50%), -o-doğrusal-gradyan(0, şeffaf 50%, rgba(255, 255, 255, .19) 50%);
arka plan görüntüsü: lineer gradyan(0, rgba(255, 255, 255, .07) 50%, şeffaf 50%), lineer gradyan(0, rgba(255, 255, 255, .13) 50%, şeffaf 50%), lineer gradyan(0, şeffaf 50%, rgba(255, 255, 255, .17) 50%), lineer gradyan(0, şeffaf 50%, rgba(255, 255, 255, .19) 50%);
}

5. Modern Tuğla

kullanarak saf bir CSS modern tuğla deseni oluşturabilirsiniz. lineer gradyan CSS özelliği.

CSS Kodu

gövde {
 arka plan görüntüsü: doğrusal gradyan (45 derece, şeffaf %20, siyah %25, şeffaf %25),
 doğrusal gradyan (-45 derece, şeffaf %20, siyah %25, şeffaf %25),
 lineer gradyan(-45deg, şeffaf %75, siyah %80, şeffaf 0),
 radyal gradyan (gri 2 piksel, şeffaf 0);
 arka plan boyutu: 30px 30px, 30px 30px;
}

6. Web3 Tarzı Arka Plan

bir Web3- Arka plan görüntüsü kullanarak ve buna bulanıklık efekti ekleyerek arka plan stili. Bu örnek, Unsplash'tan bir galaksi görüntüsünü kullanır. Yaratıcı olabilir ve bir galaksinin, denizin, anıtların veya başka herhangi bir şeyin görüntüsünü kullanabilirsiniz.

HTML Kodu

<div sınıfı="kart bg-bulanıklaştırma">
<h1>Degrade Arka Plan Ile Kart</h1>
</div>

CSS Kodu

:kök {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&otomatik=biçim&sığdır=kırp&w=1169&q=80');
}
gövde {
 arka plan rengi: #1D1E22;
 yazı tipi ailesi: sans-serif;
 ekran: esnek;
}
.kart {
 kenar boşluğu: otomatik;
 dolgu: 1rem;
 yükseklik: 300 piksel;
 genişlik: 300 piksel;
 metin hizalama: merkez;
 Beyaz renk;
 ekran: esnek;
 hizalama öğeleri: merkez;
 haklı içerik: merkez;
 pozisyon: göreceli;
 arka plan rengi: gri;
 sınır yarıçapı: 10 piksel;
}
.bg-bulanıklaştırma {
 taşma: gizli;
 arka plan rengi: şeffaf;
}
.bg-bulanıklaştırma::önceki {
 içerik: '';
 arka plan görüntüsü: var(--bg-image);
 arka plan boyutu: kapak;
 yükseklik: %100;
 genişlik: %100;
 konum: mutlak;
 filtre: bulanıklık (30 piksel);
 z-endeksi: -1;
}

7. Gradyan Arka Plan Animasyonu

gradyan arka plan animasyonlar modern web sitelerinde yaygın olarak kullanılmaktadır. Trendde kalın ve gradyan animasyonunu arka planla birlikte kullanın. Gradyan renklerini ihtiyaçlarınıza göre de özelleştirebilirsiniz.

HTML Kodu

<div sınıfı="d-flex esnek sütun yaslama-içerik merkezi w-100 h-100"></div>

CSS Kodu

gövde {
arka fon: lineer gradyan(-45 derece, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 arka plan boyutu: %400 %400;
 animasyon: gradyan 15'ler sonsuz kolaylık;
 yükseklik: 100vh;
}
@ana kareler gradyan {
 0% {
 arka plan konumu: %0 %50;
 }
50% {
 arka plan konumu: %100 %50;
 }
100% {
 arka plan konumu: %0 %50;
 }
}

8. Kıvrımlı Dalgalar

kullanarak basit bir kıvrımlı dalga deseni oluşturabilirsiniz. radyal gradyan CSS özelliği.

HTML Kodu

<div sınıfı="desenler pt1"></div>

CSS Kodu

gövde {
 kenar boşluğu: 0 piksel;
}
.desenler {
 genişlik: 100vw;
 yükseklik: 100vw;
}
.pt1 {
arka fon: -moz-radyal-gradyan(0% 2%, daire, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), -moz-radyal-gradyan(100% 100%, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), Yok;
arka fon: -webkit-radyal-gradyan(0% 2%, daire, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), -webkit-radyal-gradyan(100% 100%, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), Yok;
arka fon: -ms-radyal-gradyan(0% 2%, daire, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), -ms-radyal-gradyan(100% 100%, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), Yok;
arka fon: -o-radyal-gradyan(0% 2%, daire, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), -o-radyal-gradyan(100% 100%, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), Yok;
arka fon: radyal gradyan(0% 2%, daire, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), radyal gradyan(100% 100%, rgba(96, 16, 48, 0) 9piksel, #661133 10piksel, rgba(96, 16, 48, 0) 11piksel), Yok;
 arka plan boyutu: 20 piksel 20 piksel;
}

9. masa örtüsü

HTML div'iniz için standart bir arka plan desenine mi ihtiyacınız var? Bu masa örtüsü modelini deneyin.

CSS Kodu

gövde {
 arka plan: beyaz;
arka plan görüntüsü: lineer gradyan(90derece, rgba(200,0,0,.5) 50%, şeffaf 0),
lineer gradyan(rgba(200,0,0,.5) 50%, şeffaf 0);
 arka plan boyutu: 30 piksel 30 piksel;
}

10. Kayan Köşegenler

Bu efektte çapraz renkler kayar ve birbiriyle örtüşür. Renkleri karıştırmanın pürüzsüz animasyonu, web sitenize çekici bir dokunuş katabilir.

HTML Kodu

<div sınıfı="erkek arkadaş"></div>
<div sınıfı="bg bg2"></div>
<div sınıfı="bg bg3"></div>
<div sınıfı="içerik">
<h1>Kayan Köşegenler Arka Plan Etkisi</h1>
</div>

CSS Kodu

html {
yükseklik:100%;
}
gövde {
marj:0;
}
.bg {
animasyon:kaymak 3sgiriş-çıkış kolaylığısonsuzalternatif;
arka plan görüntüsü: lineer gradyan(-60 derece, #6c3 50%, #09f 50%);
alt kısım:0;
sol:-50%;
opaklık:.5;
konum:sabit;
Sağ:-50%;
üst:0;
z-endeksi:-1;
}
.bg2 {
animasyon yönü:alternatif-ters;
animasyon süresi:4s;
}
.bg3 {
animasyon süresi:5s;
}
.içerik {
arka plan rengi:rgba (255,255,255,.8);
sınır yarıçapı:.25em;
kutu-gölge:0 0 .25emrgba(0,0,0,.25);
kutu boyutu:sınır kutusu;
sol:50%;
dolgu malzemesi:10vdk;
konum:sabit;
Metin hizalama:merkez;
üst:50%;
dönüştürmek:çevir(-50%, -50%);
}
h1 {
font ailesi:tek boşluk;
}
@ana kareler kaymak {
 0% {
dönüştürmek:translateX(-25%);
 }
100% {
dönüştürmek:translateX(25%);
 }
}

CSS Kullanarak Web Sitenizi Güzelleştirin

Web sitenizin tasarımını güzelleştirmek için bu CSS arka plan desenlerini kullanın. Ayrıca bazı harika CSS ipuçlarını ve püf noktalarını kullanarak CSS üretkenliğinizi artırabilirsiniz. Yalnızca birkaç satır kodla CSS'de şık tasarımlar oluşturmanıza yardımcı olabilirler.

Her Geliştiricinin Bilmesi Gereken 8 Temel CSS İpuçları ve Püf Noktaları

Sonrakini Oku

Yazar hakkında