CSS 3 Teknikleri 8 -> Gradyan Efektler

Bu özelliği artık bir çok programda kullanmışızdır.Özellikle Fireworks ve Photoshop ' un renklendirme metodlarından en kullanışlı olanlarındandır.Css e ile bu işlemleri yapmaya başlıyoruz.Radial (Oval) Linear (Dikey) ' da efekt vermek istiyorsak aşağıda ki kod parçacıklarını kullanacağız.

Bu özelliği artık bir çok programda kullanmışızdır.Özellikle Fireworks ve Photoshop ' un renklendirme metodlarından en kullanışlı olanlarındandır.Css e ile bu işlemleri yapmaya başlıyoruz.Radial (Oval)
Linear (Dikey) ' da efekt vermek istiyorsak aşağıda ki kod parçacıklarını kullanacağız.

Destekleyen tarayıcılar

[list]
Firefox 3.6+
Chrome 2+
Safari 3.1+
[/list]

Kod kullanım örneğine geçiş yapalım.Burada önemli bir konuya değinmek isterim , aşağıda ki kod örneği IE'için özel fltreler içermektedir.

#gradyan {
background-image: -moz-linear-gradient(top, #4477a1, #81a8cb); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Saf4+, Chrome */
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8 */
}

Background image olarak üst ten başlayacak şekilde linear efektimizi uyguladık.
4 Farklı tarayıcıda rahat çalışması için 4 ayrı şekilde kod yazdık.

background-image: -moz-linear-gradient(top, #4477a1, #81a8cb);

Bu satırda üstten ' #4477a1 ' dan bu #81a8cb ' renk koduna doğru geçiş sağladık.

Radial (oval) bir efekt uygulamak istersek ;


#oval {
        background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #cae0f2 10%, #4477a1 70%); //Ortada 45 derece konumunda  ilk renk 10 % alpha değerinde ikinci renk 70% alpha değerinde  bir efekt verdik */
        background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#cae0f2), to(#4477a1));
}



Fakat bu işlem IE için özel filtreler içermemektedir.


Bir sonraki teknikte görüşmek üzere hoşça kalın.
  • Etiketler;
Arda Kazancı
Makul fiyatlara proje fikirleriniz için benimle iletişime geçebilirsiniz. - Web , Mobil
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Değerli bilgi paylaşımcı arkadaşım yazdığınız kodların birde görünümünü küçük bir görüntüde olsa hemen altına iliştirseniz ne güzel olacak tasarım ve kod bütünlüğü sağlanmış olacak yani
Teşekkürler, normalde ben bunu her katmanın yükseliğindeki boşluğunu (top) ayarlayaraktan yapıyordum :)

Yukarı Git