Yazıma Başlarken Gayet Uzun Bir Yazı Olacağını belirtmek istiyorum.Bu Yazımızda CSS 3 ile gelen yeniliklerden bahsedeceğim.Bu yazıyı yazmakta biraz geçikiyo olsamda güzel bir yazı olacağına inanıyorum.
CSS 3 İle Gelen Yeni ve Belli Başlı Özellikler:
1.border-radius
2.text-shadow
3.box-shadow
4.background-clip
5.border-image
Bunları Açıklamaya Başlayacak Olursak;
1.border-radius
Border-radius özelliği bize oluşturduğumuz kutucukların köşelerini kıvırmamızda yardımcı olur.Bu Özelliği nasıl kullanacağız derseniz:
border-"top/bottom"-"left/right"-radius: yada yani örnek bir görünüm olarak:
border-top-left-radius: 15px; border-top-right-radius: 5px;
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
Bu nedir diye soracak olursanız, 1.yazdığımız koddaki border=”kenar” , top=”yukarı”, left=”sol”, radius=”verilen eğiklik” anlamlarına geliyor.Yani “Sol Üst Köşeden 15px’lik bir kıvrım” verilmesini sağlıyor.Bu özelliği tek başına kullanmak isterseniz yani direk olarak bir köşeye değilde tüm köşelere aynı anda hükmetmek isterseniz
border-radius: yazmanız gerekmektedir.
2.text-shadow
Text-shadow bir CSS2 özelliği olmasına rağmen burada olmasının sebebi bu özelliğinde bir fütüristik özellik olmasıdır.Text-shadow ile kelimelere gölge verilmesi işlemi sağlanır.Kullanımına bakacak olursak:
text-shadow: şeklinde kullanılır.Örnek kullanım şeklide
text-shadow: 1px 1px 3px #000;şeklindedir.
3.box-shadow
Bu özellik ile Oluşturulan Kutulara gölge verilmesi sağlanır.Kullanımı ise şu şekildedir.
box-shadow: inset bu kullanım şekline örnek olarak hazırlanmış kod ise
box-shadow: inset 1px 1px 3px 4px #000;bu şekildedir.
Kullanılan Değerlerin açıklaması şu şekildedir.
1. değer kutunun içine doğru gölge verir,(inset,outset)
2. değer gölgenin sağ tarafa olan kalınlığını verir,
3. değer gölgenin alt tarafa olan kalınlığını verir,
4. değer gölgeye bulanıklık verir,
5. değer gölge verilen kutunun border kalınlığını arttırır,
6. değer renk kodu.
box-shadow: 0 0 10px #000,
20px 15px 30px #ff0,
-20px 15px 30px #0ff,
-20px -15px 30px #00F,
20px -15px 30px #f00; yukarıdaki gibi bir kullanım sonrası birden fazla bulanıklık,renk ve kalınlık vermeniz sağlanmıştır.
4.background-clip
Background-clip ile ardalanın nerede gösterileceğini tanımlanır. Daha önce padding dahil içerik alanı sabit olarak geliyorken, artık border alanıda dahil edilebiliyor veya padding alanı kapsamdan çıkarılabiliyor.
Kullanım Şekli
background-clip: Ardalan değeri ne diye soracak olursanız:
border-box: Ardalan içerik alanı + padding alanı + border alanını kapsar.
padding-box: Ardalan içerik alanı + padding alanını kapsar.
content-box: Ardalan sadece içerik alanını kapsar.
5.border-image
Border-image oluşturulan kutucukların kenarlıklarına resim verilmesini sağlar.Bu Özelliğin geniş bir kapsamı vardır.
border-image-source: “Resmin kaynağı belirtir.”
border-image-slice: “Resmi 9 ayrı dilime ayırarak inceler”
border-image-width: “Kenarlıktaki resmin genişliğini belirler”
border-image-outset: ” Dış hat çizgisi kutunun dışına taşan kısmı belirtir. Şuan Tarayıcılar tarafından desteklenmiyor.”
border-image-repeat; “Resmin Tekrarlılığını ayarlanızı sağlar”
CSS3 ‘ün belli başlı özelliklerinden oluşan yazımı okudunuz.
Bu yazıyı yazarken yararlandığım kaynaklar
http://www.fatihhayrioglu.com/css3-background-origin-ve-background-clip-ozellikleri/
http://codersgrave.com/579-css3-temel-futuristik-ozellikler/
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
Kaynak: http://www.erenkeskin.com/css3un-getirdigi-ozellikler/