Etkili Birkaç CSS3 Özelliği

Css web teknolojileri gerliştirmenin en kolay ve etkili yolu olduğunu biliyorsunuzdur. CSS3 ile gelen bir çok güzel özellik Photoshop gibi grafik programı kullanmadan yapmak mümkündür.
İşte bu yazıda bu etkili CSS özelliklerinin bir kaç tanesinden bahsedeceğim.

• Border Radius

• Box Shadow

• Text Shadow

• Çoklu Arkaplan

 

Bu özelliklerin her birini geçmişte Photoshop grafik programını kullanarak hazırlayabiliyordum. CSS3 ile HTML etiketlerine daha rahat müdahale edip  düzenlemek mümkün oluyor.

 

Unutmadan eski bazı tarayıcı sürümleri -webkit- , -moz-, -o- , -ms- ön eklerine ihtiyaç duymaktadır. Aşağıdaki örneklerin bazılarında eski tarayıcı sürümleri ile de uyumlu olması için önek tanımlaması yapılmıştır.( CSS özelliğinin sade kullanımını da önekli kullanımlardan sonra yazmanız doğru kullanım şekli olacaktır.)

[divider]

Border Radius #1

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

 

Örnek:

[divider]

Box Shadow #2

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

HTML etiketlerine gölge efekti vermek için CSS3 ile güzel bir özelliktir.

 

Unutmadan tekrar belirtmek isterim. Bazı eski tarayıcı sürümleri için webkit ve moz öneklerini kullanmak gerekmektedir.

Gelelim Box Shadow (kutu gölge) özelliğinin kullanımına;

1.parametre: soldan gölgenin ne kadar uzakta olacağını gösterir.

2.parametre:üstten gölgenin ne kadar uzakta olacağını gösterir.

3.parametre: gölgenin bulanklığı ne kadar devam edeceğini gösterir.

4. parametre :gölgenin rengini göstermektedir.

 

Örnek:

 

CSS Box Shadow özelliğinin ek bir parametre daha kullanarak gölgeyi dışarı yere içeri vermek mümkün olmaktadır. inset anahtar kelimesini kullanarak gölgeyi dışarı doğru değil içeri doğru vermek mümkündür. Yukarıdaki örneğe inset anahtar kelimesini ekleyerek aşağıdaki görüntüyü elde edebilirsiniz.

 

 

Son kullanım şekli olarakta CSS3 ile bir özelliğe birden fazla tanımlama yapmak mümkündür.  CSS3’ün bu özelliği ile birden fazla etiket kullana derdinden kurtulmuş oluyoruz. Şimdi gelelim yukarıdaki kutuya birden fazla nasıl gölge özelliği ekleyeceğimize bir bakalım.  Her yeni gölge özelliği eklemek için araya virgül kullanmamız gerekir. Yukarıdaki gölge özelliğinin aşağıdaki şekilde değiştirelim.

 

Text Shadows #3

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: 10+

 

Text-shadow özelliği metindeki harflerin çevresine gölge efekti vermektedir.  Kullanımı box-shadow özelliğinde olduğu gibidir. Güzel olan şu her hangi bir önek kullanımına ihtiyaç duyulmaktadır.

 

Örnek:

Box-shadow özelliğinde olduğu gibi birden fazla gölgeyi aynı anda kullanmak mümkündür.

 

 

Text Shadow ile Yapılmış Bir Kaç Güzel Efekt

Örnek 1:

 

Örnek 2:

<style>
#kutu{

width: 600px;
padding:50px;
background: #fff;
}

#kutu h1{
color: rgba(0,0,0,0.6);
text-shadow: 3px 2px 0px #fff, 6px 5px 0px rgba(0,0,0,0.15);
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id=”kutu”>
<h1>YAZILIMBILISIM.NET</h1>
</div>

 

 

Örnek 3:

 

Örnek 4:

 

Örnek 5:

 

Örnek 6:

 

Örnek 7:

Örnek 8:

 

[divider]

Çoklu Arkaplan

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

 

Birden fazla etiket kullanmadan çoklu arkaplan efektleri vermek CSS3 ile artık mümkün.  Bir etikete birden fazla arkplan kullanmak için sadece arkaplan değerlerini virgül ile eklemek gerekir.

CSS Gradient Kullanımı ile ilgili (w3school örnek)

 

Örnek 1:

 

 

Örnek 2:

Örnek 3: