CSS 3′ün 5 temel yeteneği

29 May 2010 tarihinde eklendi. Blog | 1 yorum

CSS 3′ün 5 temel yeteneği

CSS 3.0 yayınlandığından beri, bir yandan onunla neler yapılabildiğini hayretler içinde izliyorum, bir yandan da öğrenmeye çalışıyorum. Border-radius, box-shadow ve text-shadow özelliklerini zaten artık her projemde kullanıyorum. Ancak bunlardan başka, bütün tarayıcılar tarafından desteklenmediği için henüz kullanmaya alışmadığımız (veya tercih etmediğimiz) sıradışı yetenekleri var. Sıradışı diyorum çünkü bir gün sadece CSS ile nesnelere yansıma  verebileceğimiz aklıma bile gelmezdi.  Artık yavaş yavaş CSS 3′ün 5 yeni özelliğine alışıp, CSS deneyimimizi bir kaç adım daha öteye taşımak iyi olacaktır. Çünkü yakın gelecekte, bu temel özellikleri sık sık kullanmak durumunda kalacağımıza eminim.

1) Gradient

CSS 3.0′ın bize sunduğu en güzel nimetlerden biri olan Gradient özelliğinin Linear Gradient ve Radial Gradient olmak üzere 2 farklı kullanımı var. Ve bu özellikleri DIV, SPAN, P gibi bütün HTML elementlerinde kullanabiliyorsunuz. Bu özellik sayesinde, hiç resim dosyası kullanmadan gradientli butonlar ve arkaplan görüntüleri yapmak  artık mümkün oluyor. Böylece web sitelerinin yüklenme hızları da katbekat artıyor.

Şimdilik destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Linear Gradient

Firefox için kullanım şekli:

1
2
3
background-image: -moz-linear-gradient(top, #F00, #F60)
<img class="size-full wp-image-3522 alignnone" title="css-3-linear-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-linear-gradient.jpg" alt="" width="200" height="150" />

Webkit tarayıcıları için kullanım şekli:

1
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))

Radial Gradient

Firefox için kullanım şekli:

1
background-image: -moz-linear-gradient(top, #F00, #F60)

Webkit tarayıcıları için kullanım şekli:

1
2
3
4
5
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))
<img class="size-full wp-image-3525 alignnone" title="css-3-radial-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-radial-gradient.jpg" alt="" width="200" height="150" />
<strong>Örnekler:</strong> <a href="http://css-tricks.com/examples/CSS3Gradient/">http://css-tricks.com/examples/CSS3Gradient/</a>

2) Açılı Döndürme

CSS 3′ün transform özelliği ile birlikte gelen yeteneklerinden biri de, bütün html elementlerini verilen bir açı değerine göre döndürmesi.

Destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Kullanım Şekli:

1
2
3
4
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
<img class="alignnone size-full wp-image-3526" title="css-3-transform" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-transform.jpg" alt="" width="234" height="197" />

Örnekler: http://css3.bradshawenterprises.com/

3) Yansıma

Favorilerimden biri kesinlikle bu özellik. Yazılara ve DIV’lere yansıma  özelliği vererek harikalar yaratabiliyorsunuz. Şimdilik sadece Chrome ve Safari tarafından destekleniyor. Umarım yakında Firefox tarafından da desteklenir.

Kullanım Şekli:

1
2
3
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
<a href="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg"><img class="alignnone size-full wp-image-3527" title="css-3-reflection" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg" alt="" width="232" height="188" /></a>

Örnek: http://jcargoo.110mb.com/cssreflection/

4) Yeniden Boyutlandırma

CSS 3′ün resize özelliği ile DIV’leri mouse ile tutup sürükleyerek yatay ve dikeyde boyutlandırabiliyoruz. Yani bir kutunun büyüklüğünü gerçek zamanlı olarak istediğimiz kadar değiştirebiliyoruz. Aşağıdaki örnekten ne demek istediğimi daha iyi anlayacaksınız. Bu özelliği de şimdilik sadece Chrome ve Safari destekliyor.

Kullanım Şekli:

1
2
3
4
overflow: hidden;
resize: both;
<img class="alignnone size-full wp-image-3528" title="css-3-resize" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-resize.jpg" alt="" width="223" height="136" />

Örnekler: http://www.css3.info/preview/resize/

5) Kenar Çizgi Aralığı

CSS 3′ün outline-offset özelliği ile sahip olduğu bu yetenek de kutulara verdiğimiz çerçeve çizgisine aralık vermeye yarıyor. Yani kutunun kenar çizgisini belirlediğimiz bir değer kadar kenarlardan uzaklaştırabiliyoruz. Chrome veya Safari ile aşağıdaki örnekte ne demek istediğimi görebilirsiniz.

Kullanım Şekli:

1
2
3
4
5
6
outline: solid 1px #f00;
outline-offset: 5px;
<img class="alignnone size-full wp-image-3530" title="css-3-outline-offset" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-outline-offset.jpg" alt="" width="225" height="167" />
<strong>
</strong>

Örnek: http://www.css3.info/preview/outline/

Benzer Yazılar: