01/04
CSS3 ile Çapraz Tarayıcı Doğrusal Degradeler Oluşturma
Doğrusal Degradeler
Göreceğiniz en yaygın gradyan türü, iki rengin doğrusal bir gradyanıdır. Bu, eğimin, o satır boyunca ilk rengin ikincisinden kademeli olarak değişen düz bir çizgide hareket edeceği anlamına gelir. Bu sayfadaki görüntü # 999 (koyu gri) ile #fff (beyaz) arasındaki basit bir soldan sağa gradyanı gösterir.
Doğrusal gradyanlar tanımlanması en kolay olanıdır ve tarayıcılarda en fazla desteğe sahiptir. CSS3 doğrusal gradyanları Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ ve Safari 4+ sürümlerinde desteklenir. Internet Explorer bir filtre kullanarak degradeler ekleyebilir ve bunları IE 5.5'e geri döndürür. Bu CSS3 değil, ancak tarayıcılar arası uyumluluk için bir seçenektir.
Bir degrade tanımladığınızda birkaç farklı şey tanımlamanız gerekir:
- Ne tür bir eğim var - doğrusal veya radyal
- Degradenin nerede başlayacağı
- Gradyanın durması gereken yer
- Degradede hangi renkler var ve nerede başlamalı ve durmalı?
CSS3 kullanarak doğrusal degradeleri tanımlamak için şunları yazabilirsiniz:
Doğrusal gradyan ( açı veya yan veya köşe , renk durağı , renk durağı )
- Öncelikle, gradyan türünü doğrusal- gradyan adıyla tanımlarsınız.
- Daha sonra, eğimin başlangıç ve bitiş noktalarını iki yoldan biriyle tanımlarsınız: çizginin açısı 0 ile 359 arasında, 0 derece düz yukarı bakacak şekilde. Ya da sol, sağ, alt ve üst gibi “yan veya köşe” işleviyle. Bunlar bir sonraki sayfada daha ayrıntılı olarak açıklanacaktır. Bunları çıkarırsanız, eğim, üst kısımdan elemanın tabanına doğru akacaktır.
- Sonra renk duraklarını tanımlarsınız. Renk duraklarını renk koduyla ve isteğe bağlı bir yüzde ile tanımlarsınız. Yüzde, tarayıcıya satırın o renkle başlayıp biteceğini söyler. Varsayılan, renkleri hat boyunca eşit olarak yerleştirmektir. 3. sayfadaki renk durakları hakkında daha fazla bilgi edineceksiniz.
Yani, CSS3 ile yukarıdaki gradyanı tanımlamak için şunları yazabilirsiniz:
doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);
Ve yazdığınız bir DIV'nin arka planı olarak ayarlamak için:
div {
arkaplan-görüntü: doğrusal gradyan (sol, # 999999% 0, #ffffff% 100;
}
CSS3 Lineer Degradeler için Tarayıcı Uzantıları
Çapraz tarayıcınızı çapraz tarayıcıya göre çalışmak için, çoğu tarayıcı için tarayıcı uzantıları ve Internet Explorer 9 ve daha düşük bir filtre (aslında 2 filtre) kullanmanız gerekir. Tüm bunlar, gradyanınızı tanımlamak için aynı öğeleri alır (IE'de yalnızca 2 renk gradyanlarını tanımlamanız dışında).
Microsoft Filtreler ve Uzantı — Internet Explorer, desteklemenin en zorudur çünkü farklı tarayıcı sürümlerini desteklemek için üç farklı satıra ihtiyacınız vardır. Yukarıdaki griden beyaza geçişi elde etmek için şunu yazabilirsiniz:
/ * IE 5.5–7 * /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8–9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);
Mozilla Uzantısı - -moz- uzantısı, sadece -moz uzantısı ile CSS3 özelliği gibi çalışır. Firefox için yukarıdaki eğimi almak için şunu yazın:
-moz-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
Opera Extension —The -o- uzantısı Opera 11.1+ 'ye gradyan ekler. Yukarıdaki degradeyi almak için şunu yazın:
-o-doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);
Webkit Uzantısı —Webkit uzantısı, CSS3 özelliği gibi çok çalışır. Safari 5.1+ veya Chrome 10+ için yukarıdaki degradeyi tanımlamak için şunları yazabilirsiniz:
-webkit-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
Ayrıca, Chrome 2+ ve Safari 4+ ile çalışan eski bir Webkit uzantısının sürümü de vardır. İçinde, özellik adı yerine degrade türünü bir değer olarak tanımlarsınız. Bu uzantıyla griyi beyaza gradyana almak için şunu yazın:
-webkit-gradient (doğrusal, sol üst, sağ üst, renk durması (% 0, # 999999), renk durması (% 100, # ffffff));
Tam CSS3 Doğrusal Degrade CSS Kodu
Griden beyaza degrade elde etmek için tam tarayıcılar arası destek için öncelikle degradeleri desteklemeyen tarayıcılar için geri dönüş katı bir renk eklemeniz gerekir. Son öğe ise tam uyumlu tarayıcılar için CSS3 stili olmalıdır. Yani, sen yazarsın:
arka plan: # 999999;
arkaplan: -moz-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
arkaplan: -webkit-gradient (doğrusal, sol üst, sağ üst, renk-stop (% 0, # 999999), renk-stop (% 100, # ffffff));
arkaplan: -webkit-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
arkaplan: -o-lineer-gradyan (sol, # 999999% 0, #ffffff% 100);
arkaplan: -ms-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
arkaplan: doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);
Bu eğitimdeki sonraki sayfalar, bir degrade bölümlerini daha ayrıntılı olarak açıklar ve son sayfa, otomatik olarak CSS3 gradyanları oluşturmanın mükemmel bir yolu olan bir araca yönlendirir.
Sadece CSS kullanarak eylemdeki bu doğrusal gradyanı görün.
02/04
Diyagonal Degradeler Oluşturma — Degrade Açısı
Başlangıç ve bitiş noktaları, degradenin açısını belirler. Çoğu doğrusal degradeler yukarıdan aşağıya veya soldan sağa doğrudur. Ancak, diyagonal bir çizgi üzerinde hareket eden bir degrade oluşturmak mümkündür. Bu sayfadaki görüntü, görüntü üzerinde sağdan sola doğru 45 derecelik bir açıda hareket eden basit bir eğriyi gösterir.
Degrade Çizgisini Tanımlama Açıları
Açı, elementin merkezinde bulunan hayali bir daire üzerindeki bir çizgidir. 0deg, 90deg puanı sağa, 180deg puanı aşağı ve 270deg puanı sola döner. Herhangi bir açıyı 0 ila 359 derece arasında tanımlayabilirsiniz.
Bir karede, 45 derecelik bir açının sol üst köşeden sağ alt köşeye doğru hareket ettiğini, ancak bir dikdörtgede görüntünün görebildiğiniz gibi başlangıç ve bitiş noktalarının şeklin biraz dışında olduğunu unutmayın.
Köşegen bir eğimi tanımlamanın en yaygın yolu, sağ üst köşesi gibi bir köşeyi tanımlamak ve eğim bu köşeden karşı köşeye hareket etmektir. Başlangıç gönderiyi aşağıdaki anahtar kelimelerle tanımlayabilirsiniz:
- üst
- sağ
- alt
- ayrıldı
- merkez
Ve daha spesifik olmak için birleştirilebilirler, örneğin:
- sağ üst
- Sol üst
- üst merkez
- sağ alt
- sol alt
- alt merkez
- sağ merkez
- sol merkez
Burada, sağ üst köşeden alt sola doğru hareket eden, resmedilen, kırmızıdan beyaza benzer bir degrade için CSS var:
arkaplan: ## 901A1C;
arkaplan-görüntü: -moz-doğrusal-gradyan (sağ üst, # 901A1C% 0, # FFFFFF% 100);
arkaplan-görüntü: -webkit-gradyan (doğrusal, sağ üst, sol alt, renk-stop (0, # 901A1C), renk-stop (1, # FFFFF));
arkaplan: -webkit-doğrusal-gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
arkaplan: -o-doğrusal-gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
arkaplan: -ms-doğrusal-gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
arkaplan: doğrusal gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
Bu örnekte IE filtresi bulunmadığını fark etmiş olabilirsiniz. Bunun nedeni, IE'nin yalnızca iki filtre türüne izin vermesidir: yukarıdan aşağıya (varsayılan) ve soldan sağa (GradientType = 1 anahtarıyla).
Sadece CSS kullanarak eylemdeki bu çapraz doğrusal eğimi görün.
03/04
Renk durakları
CSS3 doğrusal gradyanlarıyla, daha da meraklı efektler oluşturmak için gradyanıza birden fazla renk ekleyebilirsiniz. Bu renkleri eklemek için, mülkünüzün sonuna, virgülle ayırarak ek renkler eklersiniz. Renklerin nerede başlayacağını veya biteceğini de belirtmelisin.
Internet Explorer filtreleri yalnızca iki renk durağını destekler, bu nedenle bu degradeyi oluşturduğunuzda, görüntülemek istediğiniz ilk ve ikinci renkleri eklemelisiniz.
Yukarıdaki 3 renk gradyanı için CSS:
arkaplan: #ffffff;
arkaplan: -moz-doğrusal-gradyan (sol, #ffffff% 0, # 901A1C% 51, #ffffff% 100);
arkaplan: -webkit-gradyan (doğrusal, sol üst, sağ üst, renk-stop (% 0, # ffffff), renk-stop (% 51, # 901A1C), renk-stop (% 100, # ffffff));
arkaplan: -webkit-doğrusal-gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
arkaplan: -o-lineer-gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
arkaplan: -ms-doğrusal-gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
arkaplan: doğrusal degrade (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
Sadece CSS kullanarak eylemde üç renk durağıyla bu doğrusal gradyanı görün.
04/04
Bina Gradyanlarını Kolaylaştırın
Degradeler oluşturmanıza yardımcı olmak için önerdiğim iki site var, bunların her birinin yararları ve dezavantajları var, henüz her şeyi yapan bir degrade oluşturucu bulamadım.
Ultimate CSS Gradyan Üreticisi
Bu degrade jeneratörü çok popülerdir çünkü Photoshop gibi programlarda gradyan oluşturuculara benzer şekilde çalışır. Ayrıca bunu beğendim çünkü sadece Webkit ve Mozilla için değil, tüm CSS uzantılarını size sunuyor. Bu jeneratörle ilgili problem, sadece yatay ve dikey degradeleri desteklemesidir. Çapraz geçiş yapmak isterseniz, önerdiğim diğer jeneratöre gitmelisiniz.
CSS3 Gradyan Üreticisi
Bu jeneratör, ilkinden daha fazlasını anlamamı sağladı, ama yön değiştirmeyi destekliyor.
Bunlardan daha iyi beğeneceğiniz başka bir CSS Gradyan Üreteci biliyorsanız , lütfen bize bildirin .