CSS3 yeniliklerle dolu bir yapı olarak bizim karşımıza geldi..Bana göre çok büyük bir özelliği olan ve heryerde kullanılması gereken bir özelliği sizlere anlatacağım ve sizlerinde kullanmanıza vesile olacağım.CSS3′de Graident Özelliği…
Graidents Nedir?
Graidents’in Türkçe anlamı hemen hemen renk geçişine denk gelmektedir.Biz eskiden(CSS2 kullanırken) bu renk geçişlerini bir resim dosyası ile yapıyorduk onu sitemize çağırıyorduk.Tabi buda sitemize yüklenilmesine sebep oluyordu.Ancak artık CSS3 ile bu işlemi sadece kodları kullanarak yapabileceğiz.Peki nasıl?
Graidents Çeşitleri
Graidents özelliğimiz 2 farklı şekil barındırıyor.Bunlar Linear yani Doğrusal ve Radial yani Dairesel şekiller.İlk olarak Linear Graidents’in kullanımı hakkında ufak 1-2 kod kullanacağım ve açıklamaya çalışacağım.
Linear(Doğrusal) Graident
Bu özelliği anlatmadan önce ön eklerden birazcık bahsetmek istiyorum.Bu ön eklere neler ve ne anlama geliyorlar?
-moz- /* Firefox 3.6 ve üstü tarayıcılar için */
-webkit- /* Chrome10 ve Safari5.1 üstü tarayıcılar için */
-o- /* Opera 11.10 üstü tarayıcılar için */
-ms- /* Internet Explorer 10 ve üstü tarayıcılar için */
filter: /* Internet Explorer 6 ve 9 arasındaki tarayıcılar için */
Bu ön ekler bizim belirttiğimiz parametreleri belirttikleri tarayıcılarda kullanmamızı sağlayacaklar.Evet artık özelliğimizi anlatmaya başlayabilirim.
Linear Graident özelliğini kullanmak için belirli parametrelere ihtiyaç duyarız.Bu parametreler
background: linear-gradient(posizyon,başlangıç renkkodu veya renk değeri saydamlık%,bitiş renk kodu veya renk değeri saydamlık%);
/* Örnek Kullanım */
background: linear-gradient(top, #fff 0%, #000 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
bu şekildedir.Ben burada en basit şekilde anlatmaya çalıştım.
Radial Graident Özelliği
Radial Graident ise bize dairesel alanlar oluşturmamızı sağlayan yapının kodlarını verir.Benim çok kullandığım bir özellik olmasada kullanım alanları ve yerleri mevcut.Bunu kullanmak için bilinmesi gereken kodlarda
background: radial-graident(şekli, etki alanı, başlangıç rengi, bitiş rengi);
Şekil değeri sabit “circle”dır.Ancak Etki alanı fark edebilir.Onları kullanım kodları ve açıklamaları ise
closest-side: Merkez noktadan kutu kenarlarına doğru şekil alan yapı.
closest-corner: Renk geçisi olan elemanın daire köşesine kadar etki yapmasını sağlar.
farthest-side: closest-side yakın kenara etki yaparken bu özellik uzak kenara etki yapar.
farthest-corner: closest-corner yakın köşeye etki yaparken bu özellik uzak köşeye etki yapar.
contain: closest-side ile aynı anlamdadır.
cover: farthest-corner ile aynı anlamdadır.
Şimdi örnek bir kullanım yaparak makalemizi sonlandıralım.
background: radial-graident(circle, cover, #ff0000, #000);
Başta verdiğim ön eklerin ne işe yaradığını merak edebilirsiniz.Onlarda kullanım şeklini belirlerken tarayıcılara uygun hale getiriyor ve onunda kullanımı
background: radial-graident(circle, cover, #ff0000, #000);
-moz-background: radial-graident(circle, cover, #ff0000, #000);
-webkit-background: radial-graident(circle, cover, #ff0000, #000);
-o-background: radial-graident(circle, cover, #ff0000, #000);
-ms-background: radial-graident(circle, cover, #ff0000, #000);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000',GradientType=0 );
Ben kendi açımdan söyleyecek olursam bu kodların hepsini ezberlemekle tabiki uğraşmadım.İlk başlarda elim yaza yaza alıştı ancak artık kendime çeşitli kaynaklar buldum ve hiç zorlanmadan ve vakit kaybetmeden bu işlemleri gerçekleştirebiliyorum.Sizlere “Ultimate CSS Gradient Generator”ı öneririm.Şuan için bende bunu kullanıyorum.
Yararlandığım Kaynak: Fatih Hayrioğlu
Yazar: Eren Keskin
Kategori: CSS3
Web Adresi: ErenKeskin.com