CSS3 Dairesel ve Eliptik Degradeler [CSS3 İpuçları]
Bugün tartışmaya devam edeceğiz. CSS3 Degradeleri. Önceki yazıda size nasıl oluşturulacağını gösterdik Doğrusal gradyanlar. Bu sefer akrabalarını koruyacağız, Dairesel ve Eliptik Degradeler.
Gradyan Sözdizimi
CSS3'teki gradyan, arka plan görüntüsü özelliği. Bu, ayrıca eklememiz gerektiğinde daha iyi uyumluluk içindir. arka plan rengi Tek bir kural kümesinde, birbirleriyle çarpışmamaları için. Sonra, radyal degradeyi oluşturmak için buna basitçe diyoruz. radyal gradyan () işlevi. Gradyanı doğru bir şekilde ayarlamak için fonksiyona dahil edilecek dört değer vardır..
İlk değer gradyan konumu. Üst, alt, orta ve sol gibi açıklayıcı bir anahtar kelime kullanabiliriz ya da daha belirgin olabiliriz, % 50% 50 gradyanı ortasına ayarlamak % 0% 0 degradenin başlaması için ayarlamak Sol üst.
İkinci değer, şekil ve gradyan boyutu, degradeleri biçimlendirmek için iki argüman vardır, önce elips hangisi varsayılan, ikincisi ise daire.
Ve için gradyan boyutu, aşağıdaki altı argümandan birini seçebiliriz.
| Değerler | Açıklama |
|---|---|
En yakın-taraf | Degradenin şekli, merkeze en yakın olan kutuyu (daireler için) veya merkeze en yakın olan dikey ve yatay kenarları (elipsler için) karşılar. |
En yakın-köşe | Degradenin şekli, kutunun merkezinden en yakın köşesine tam olarak uyacak şekilde boyutlandırılmıştır. |
en uzak tarafı | En yakın tarafa benzer şekilde, şeklin ortasından en uzak kutunun kenarını (veya dikey ve yatay kenarları) karşılayacak şekilde boyutlandırılması dışında. |
en uzak köşe | Degradenin şekli, kutunun en uzak köşesini tam olarak merkezden karşılayacak şekilde boyutlandırılır. |
içermek | İle eş anlamlı |
kapak | İle eş anlamlı |
Tablo Kaynağı: Mozilla Geliştirici Ağı.
Son olarak, üçüncü ve dördüncü renk kombinasyonu. Yani, burada nasıl sözdizimi oluşturmak için yazıyoruz Eliptik gradyanlar ve bu sefer kullanacağız kapak gradyan boyutu için, bu nedenle kabı örterek geniş çapta yayılacaktır;
gövde background-image: radyal-gradyan (merkez merkez, elips kılıfı, # ffeda3, # ffc800);
Oluşturmak için dairesel gradyan bu şekilde yapabiliriz:
body background-image: radyal-gradyan (merkez merkez, daire kapağı, # ffeda3, # ffc800);
Adından da anlaşılacağı gibi, degrade şekli bir daire olacak.
Tarayıcı Desteği
Yine de dikkat edin, tüm tarayıcılar hala bu özellik için tam destek sağlama sürecindedir, bu nedenle hala satıcı öneklerine ihtiyaçları vardır. Böylece, tüm modern tarayıcılarda çalışacak tam sözdiziminin tamamı - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ ve Opera 11+ - böyle bir şeye benzeyecek;
body background-image: radyal gradyan (orta alt, elips kılıfı, # ffeda3, # ffc800); background-image: -o-radial-gradyan (merkez alt, elips kılıfı, # ffeda3, # ffc800); background-image: -ms-radial-gradyan (orta alt, elips kılıfı, # ffeda3, # ffc800); arka plan görüntüsü: -moz-radyal-gradyan (merkez alt, elips kılıfı, # ffeda3, # ffc800); background-image: -webkit-radial-gradyan (orta alt, elips kılıfı, # ffeda3, # ffc800);
Degradelerle oynamak için demoyu izleyin veya kaynağı indirin.
- gösteri
- Kaynak İndir
Son sözler
CSS3 radyal degrade oluşturmak düşündüğünüz kadar zor değildir ve özellikle de kod üretmek için bu araçlardan yardım aldığınızda:
- Colorzilla Gradyanları
- Gradientoo
Radyal gradyan yalnızca bir CSS3 gadient türüdür, gelecekteki yayınlarda konu ile ilgili tartışmamıza devam edeceğiz, bu yüzden Hongkiat.com'da kalmaya devam edin
