Merhaba,

Bu dersimizde Css konularında incelediğimiz Background özelliklerini birde Css3 olarak derinlemesine inceleyeğiz. Konumuz içerisinde inceleyeceğimiz özellikler ;

• Gölgelendirme (Shadow)
• Gradient Renklendirme (Gradient)

Gölgelendirme Box Shadow

Şu ana kadarki bilgilerimiz ile div elementine background ataması yapabiliriz. Hemen Css3 kodumuzu yazmaya başlayalım.

Box-shadow özelliği ile div elementimizin altına bir adet gölge efekti eklemiş oldu. İlk parametre gölgeninin sağa ve sola doğru olan ayarıdır. Gölge ne kadar sağda olsun istiyor isek değeri o kadar büyük tutuyoruz. İkinci parametre gölgenin y eksenindeki konumudur. 3. Parametre ise gölgenin netliğidir. Sıfıra yaklaştıkça netlik artmaktadır.

Background Color Gradient (Geçişli renk)

Linear-Gradient (Düz çizgiler)

Background color olarak düz renk tanımlaması yapmayı daha önceki derslerimizde incelemiştik. Şimdi arka plan rengi olarak geçişli bir rengi Css3 kullanarak yapacağız. Bunun için linear-gradient özelliğimizi kullanacağız. Bir önceki örnekte olan yapıyı kullanacak olup oradaki background rengini değiştireceğim.

Yukarıda background: linear-gradient(blue,white); tanımlamasını yaparak maviden beyaza geçiş yaptık.Burada sadece iki renk kullanacağız diye bir durum bulunmamaktadır. Dilediğimiz kadar renk kullanabiliriz. Örn : (blue,white,red,black,brown,yellow,green); Tabi bu renkleri kullanırken elementin içerisine yazı yazabileceğimiz gerçeğinide atlamamak lazım. Sonra yazımız okunmaz J.

Renkleri tanımladık ancak renk geçişleri default ayarları ile yapıldı. Geçişi dilersek istediğimiz yönde ayarlayabiliriz.

Backgroud: linear-gradient(to right, blue,white);

bu sayede soldan saÄŸa doÄŸru bir akış saÄŸlamış olduk bunu bildiÄŸimiz tüm yön yönergeleri ile kullanabiliriz. Örn: (to, left, bottom,) to(to,right, top) gibi…

Aynı zamanda bu yöne derece bilgiside verebiliriz. Örn: (90deg,blue,white,red); gibi..

Linear-gradient özelliğini kullanırken renklere yoğunluk atamasıda yapabileceğimizi unutmamak gerekir. Bir rengin çok yoğun diğer rengin daha az (ağırlıklı renk seçimi) gözükmesini istiyorsak value% gibi bir tanımlama yapabiliriz.

Örn :

(90deg, blue %60,white%40) gibi bir tanımlama ile yoğunluk belirleyebiliriz.

Radial-Gradient(Oval Çizgiler)

Yukarıda linear-gradient de çalışma şeklini anladığımız yapı radial-gradient tede aynı şekildedir.

Background: radial-gradient(blue,red);

şeklinde bir işlem yaptığımızda içi mavi dışı kırmızı ovalli bir renk geçişi yakalmış olacağız. Renkler yazım sırasına göre içten dışa doğru işleme alınmaktadır. Aynı şekilde birden fazla renk kullanabildiğimiz gibi renklerin ağırlık ayarlamalarınıda yapabilmekteyiz.

Radial-gradientte oval yapımızı 2 farklı şekilde kullanabiliriz. Bunlardan biri default olarak gelen elips diğeri ise tamamen yuvarlak olan çember şeklidir.

Tanımlaması şu şekilde yapılmaktadır.

Background: radial-gradient(circle,blue,red);

Bu sayede geçişli renklermiz tam bir çember şeklinde olacaktır.

Bu dersimizinde sonuna geldik. Anlaşılmayan bir yer ya da daha fazla örnek isterseniz benimle iletişime geçmeniz yeterli olacaktır. Elimden geldiğinde örnek eklemeye çalışırım.

İyi Günler Dilerim,