Cuma , 17 Kasım 2017
Anasayfa » WEB » CSS » Etkili Birkaç CSS3 Özelliği

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.)

Border Radius #1

Destekleyen Tarayıcılar:

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

 

Örnek:

Screenshot_5

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:

Screenshot_6

 

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.

 

Screenshot_8

 

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.

Screenshot_9

 

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:

Screenshot_10

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

 

Screenshot_11

 

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

Örnek 1:

Screenshot_12

 

Ö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>

 

Screenshot_13

 

Örnek 3:

Screenshot_14

 

Örnek 4:

Screenshot_15

 

Örnek 5:

Screenshot_16

 

Örnek 6:

Screenshot_17

 

Örnek 7:

Screenshot_18

Örnek 8:

Screenshot_23

 

Ç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:

 

Screenshot_19

 

Örnek 2:

Screenshot_20

Örnek 3:

 

Screenshot_21

Hakkında Hayri

İlginizi Çekebilir

CSS Font Kullanımı

CSS, sayfadaki metnin görünümünü ve biçimini düzenlemek için birçok farklı özellik sunar. Bu özelliklerden biri de …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir