CSS3 Doğrusal Degradeler [CSS3 İpuçları]
meyil CSS3'te harika bir renk özelliğidir. Artık tek bir renk eklemek yerine, görüntülere güvenmeden tek bir bildiri bloğuna birden fazla renk kombinasyonu ekleyebiliriz, bu da web sitemizdeki HTTP isteğini azaltabilir ve web sitesinin daha hızlı yüklenmesini sağlar.
CSS3'te degradelerle oynadıysanız, muhtemelen iki yönteme aşinasınız: radyal ve doğrusal degrade. Bugünün yazısı ikinci olacak.
Degradeler Yaratmak
Spesifikasyonun CSS3'teki degradelerin bir resim olduğunu söylediği gibi, diğer yeni özellik eklemeleri gibi özel bir özelliği yoktur, bu yüzden arka plan görüntüsü özellik yerine.
Gradyan için tüm sözdizimine bakarsak, biraz görünüyor doldurularak kaplanmış, bazı insanlar için kafa karışıklığına neden olabilir.
div background-image: -webkit-linear-gradyan (üst, # FF5A00% 0, # FFAE00% 100); background-image: -moz-linear-gradyan (üst, # FF5A00% 0, # FFAE00% 100); background-image: -ms-linear-gradyan (üst, # FF5A00% 0, # FFAE00% 100); arka plan görüntüsü: -o-doğrusal-gradyan (üst, # FF5A00% 0, # FFAE00% 100); arka plan görüntüsü: doğrusal gradyan (üst, # FF5A00% 0, # FFAE00% 100);
Öyleyse olayları daha net hale getirmek için sözdiziminin her bir bölümünü tek tek inceleyelim.
Her şeyden önce, doğrusal gradyan ile bildirilir lineer gradyan () işlevi. İşlev üç birincil değere sahiptir. İlk değer, gradyan başlangıç konumunu tanımlar. Açıklayıcı bir anahtar kelimeyi kullanabilirsiniz. üst içinden akan gradyanı başlatmak için üst;
div background-image: doğrusal degrade (üst, # FF5A00, # FFAE00);
Yukarıdaki kod parçası, gradyanlar oluşturmak için W3C'nin resmi sürümüdür. Aslında daha basit ve oldukça açıklayıcıdır ve aşağıdaki gradyanı yaratacaktır..
Ayrıca kullanabilirsiniz alt tersini yapmak sağ ve ayrıldı.
Ayrıca kullanarak bir çapraz degrade oluşturabiliriz. açı derecesi gradyan başlangıç konumu olarak. İşte bir örnek:
div background-image: doğrusal gradyan (45deg, # FF5A00, # FFAE00);
Yukarıdaki kod parçası, aşağıdaki renk gradyanını oluşturur:
İşlevin ikinci değeri ilk renk bilgi ve durma pozisyonu yüzde olarak belirtilir. Durma konumu aslında isteğe bağlıdır; tarayıcı doğru konumu belirleyecek kadar akıllıdır, bu nedenle ilk rengin durmasını belirtmediğimizde tarayıcı 0% varsayılan olarak.
Ve, bir sonraki değer ikinci renk kombinasyon. Önceki değer gibi çalışır, yalnızca uygulanan son renk ise ve durma pozisyonu, değeri 100% varsayılan olarak alınacaktır. Şimdi, aşağıdaki örneğe bakalım:
div background-image: doğrusal gradyan (üst, # FF5A00% 0, # FFAE00% 100);
Yukarıdaki snippet, daha önce gördüğümüz gibi bir degrade oluşturur (fark yok) ancak şimdi renk durma konumunu belirtiriz;
Şimdi değiştirelim renk durağı, ve bu sefer belirleyeceğiz % 50 ilk renk için ve % 51 ikinci renk için ve nasıl sonuçlandığını görelim;
div background-image: doğrusal gradyan (üst, # FF5A00% 50, # FFAE00% 51);
şeffaflık
oluşturma şeffaflık Gradyan da mümkündür. Efekti oluşturmak için rengi çevirmemiz gerekir büyü içine RGBA modu ve alfa kanalı düşürmek.
div background-image: doğrusal gradyan (üst, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Yukarıdaki snippet, renk yoğunluğunu azaltacaktır % 20, ve gradyan bu şekilde ortaya çıkacaktır:
Birden çok renk
Daha fazla renk eklenmesini istiyorsanız, sadece virgül sınırlayıcıyla yan yana renkleri ekleyin ve tarayıcının her bir renk durağının konumunu belirlemesini sağlayın.
div background-image: doğrusal gradyan (üst, kırmızı, turuncu, sarı, yeşil, mavi, çivit mavisi);
Yukarıdaki snippet, aşağıdaki gökkuşağı oluşturur.
Tarayıcı Uyumluluğu
Maalesef, bu yazının yazıldığı sırada, mevcut tarayıcıların tümü standart sözdizimini desteklememiştir. Hala satıcı önekine ihtiyaçları var (-webkit-, -moz-, -MS- ve -O-). Bu yüzden, söz diziminin tamamı şöyle görünmektedir:
div background-image: -webkit-linear-gradyan (üst, # FF5A00% 0, # FFAE00% 100); background-image: -moz-linear-gradyan (üst, # FF5A00% 0, # FFAE00% 100); background-image: -ms-linear-gradyan (üst, # FF5A00% 0, # FFAE00% 100); arka plan görüntüsü: -o-doğrusal-gradyan (üst, # FF5A00% 0, # FFAE00% 100); arka plan görüntüsü: doğrusal gradyan (üst, # FF5A00% 0, # FFAE00% 100);
Öte yandan, Internet Explorer, özellikle sürüm 9 ve altı, standarttan uzak. Degrade IE9 ve altı ile ilan edilir filtre, bu tarayıcılara degrade eklemek istiyorsak, bunun gibi bir şey yazmalıyız;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
filtre sınırlamaları var: ilk olarak, üçten fazla renk eklenmesine izin vermiyor ve şeffaflık efekti oluşturmak da biraz zor - izin vermiyor RGBA, ama IE filtre kullanımları #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
İşte dönüştürmenize yardımcı olacak bir araçtır RGBA için #ARGB.
- gösteri
- Kaynak İndir
Sözdizimini Daha Hızlı Yazma
Yukarıda görebileceğiniz gibi, tarayıcılar arasındaki gradyan uyumluluğunu korumak için, verimsiz olan beş kod satırı eklememiz gerekir.
Görevi basitleştirmek için yapabileceğimiz birçok yol var; Kodları derlemeye yardımcı olmak için Önek ücretsiz, Önek, LESS veya Sass kullanma gibi, ancak hepsinden önemlisi, bu aracı ColorZilla Gradient kullanmanızı öneririz. Bu araç, degradelerin tüm tarayıcılarda çalışması için gerekli tüm kodları oluşturacaktır.
Son sözler
Bugün degradeler oluşturma konusunda epeyce tartıştık, sözdiziminin her bir bölümüne baktık, şeffaf efektler yarattık ve tarayıcı uyumluluğunu koruduk. Dolayısıyla, bu noktada, konuyla ilgili daha iyi bir anlayışa sahip olduğunuzu umuyoruz..
Hala araştırmayı planladığımız birçok şey var. CSS3 Degradeleri Gelecekteki yayınlarımızda, bu yüzden Hongkiat.com'u takip etmeye devam edin. Son olarak, bu yazıyı okuduğunuz için teşekkür ederiz, hoşunuza gittiğini umuyoruz.
Daha fazla okuma
- Kurşun geçirmez çapraz tarayıcı RGBA arka planlar - Lea Verou
- CSS3 Görüntü - W3.org
- CSS3 Gradyanlarını ne zaman kullanabilirim - CanIUse.com
