CSS3 Yinelenen Degradeler [CSS3 İpuçları]
Bir web sitesini dekore etme yöntemimizi değiştiren, biri CSS3 Gradients olan birçok CSS3 özelliği var. CSS3'ten önce, degrade efektini oluşturmak için kesinlikle görüntülere ihtiyacımız var; Şimdi aynı (ve daha iyi) etkileri yalnızca CSS kullanarak sağlayabiliyoruz
Önceki yayınlarımızda, CSS3 ile elde edilebilecek iki tür degradeyi tartıştık:
- Radyal ve
- Doğrusal gradyanlar.
Bu kez kardeşlerine bakacağız: yinelenen gradyanlar.
Temel tekrarlama
Yinelenen Gradyanlar aslında bir uzantısıdır. Sözdizimi, Radyal ve Doğrusal degradeleri nasıl tanımladığımıza benzer, yalnızca adından da anlaşılacağı gibi renkleri belirli bir yönde tekrarlar. Doğrusal degradeleri tekrarlamak için bu işlevi kullanabiliriz: tekrar eden lineer gradyan, radyal veya eliptik gradyanları tekrarlamak için bu işlevi kullanırız: tekrar radyal gradyanlı.
/ * Linear * / .gradient background: yinelenen-doğrusal-gradyan (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: yinelenen-radyal-gradyan (% 50% 50, daire, # f9f9f9, #cccccc 20px);
Kodun geri kalanı için kodun dışında kalan hiçbir fark yoktur. renk tekrarı. Aşağıda bu renk tekrarının nasıl çalıştığını açıklayan basit bir örnek verilmiştir..
Yukarıdaki görüntü yalnızca doğrusal gradyanları tekrarlamak için gösterilmesine rağmen, temel fikir ayrıca renklerin sonsuz bir şekilde, bu durumda, herhangi bir yönde tekrarlanacağı radyal degradelere uygulanır. Demoyu görmek için aşağıdaki linki takip edin..
- Demoyu Gör
Bir sonraki bölümde, CSS3 Yinelenen Gradyanları gerçek örneklerde nasıl kullanabileceğimizi göstereceğiz..
Örnek: Desen Oluşturma
En yaygın uygulama Yinelenen Gradyanlar arka plan desenleri oluşturmaktır. Bu örnekte, basit dikey şerit desenleri oluşturacağız..
.gradyan background: yinelenen-doğrusal-gradyan (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
İki farklı rengi nasıl tanımladığımıza dikkat edin - # f9f9f9 ve #cccccc - aynı noktada, 20px. Bu örnek, bu iki renk arasındaki farkı netleştirecek ve bulanıklığı ortadan kaldıracaktır..
Yönlendirmeyi yönlendirmek için açıyı değiştiririz. - 90deg yatay olarak yönlendirir 45deg çapraz olarak yönlendirir ve benzeri.
- Demoyu Gör
Örnek: Paperline Oluşturma
Bu ikinci örnekte, bir not defterinde sıkça görebileceğiniz bir kağıt çizgisi oluşturacağız. Bu etkiyi yaratmak için sadece div, görüntü yok, sadece CSS.
.gradyan genişlik: otomatik; yükseklik: 500px; marj: 0 50 piksel; arka plan: -webkit-yinelenen-doğrusal-gradyan (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arka plan: -moz-yinelenen-doğrusal-gradyan (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arka plan: -o-yinelenen-doğrusal-gradyan (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arka plan: yinelenen-doğrusal-gradyan (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); arkaplan büyüklüğü:% 100 21 piksel;
CSS3'ü de eklediğimize dikkat edin Arka plan boyutlu arka plan görüntülerinin boyutlarını belirleme özelliği % 100, 20 piksel. CSS3 Gradients 'renkler' göstermesine rağmen, aslında görüntü olarak kategorize edilir, renk değil.
Sonra kullanacağız :önce sözde eleman kağıdın sol tarafına bir şerit eklemek için.
.gradyan: önce content: ""; ekran: satır içi blok; yükseklik: 500px; genişlik: 4px; sınır-sol: 4px çift # FCA1A1; pozisyon: göreceli; sol: 30 piksel;
Ve biz bitti, gerçekten basit değil mi? Şimdi hepsini linklerden görebiliriz..
- Demoyu Gör
- Kaynak İndir
Ek Kaynaklar
- Webkit CSS3 Gradyanları
- Microsoft Geliştirici Ağı'ndaki CSS3 Degradeleri
