CSS3 Tutorials Box Shadow Yapımı

CSS3 Box Shadow olarak adlandırılan CSS3 tekniklerinin en son özellikleri kullanılarak hazırlanmış olan Gölgeli kutular anlamına gelmektedir.
Bu kutularda CSS3 nimetleri'nin son versiyonu olan oval kenarlıklar,gölgelendirme teknikleri ve RGBA renk kodları kullanılıyor.
Bu özellikler yeni kod kümelerinden oluştuğu için Mozilla Firefox , Google Chrome , Safari , İnternet Explorer 8 ve üzerindeki web tarayıcılarında daha iyi görüntülenmektedir.
RGBA renk kodları için Online Generator RGBA adresini ziyaret edebilir dilediğiniz rengin kodlarını rahatlıkla alabilirsiniz.


Dilerseniz fazla zaman kaybetmeden örneklemelerine geçelim ; 




Öncelikle kullanılan öznitelikleri ve açıklamalarını yazalım ; 

Öznitelikler	Açıklamaları
x-offset	Yatay gölge ofseti. Kutusunun sağ tarafındaki gölge düşürmek için pozitif değerler. Gölgeler yapmak için negatif değerler sol tarafta yer almaktadır.
y-offset	Dikey gölge ofseti. Pozitif değerler aşağıdaki kutuya gölge düşürmek için. Kutusunun üstünde gölgeler yapmak için negatif değerler düşer.
Blur distance	Negatif değerler izin verilmez. Değeri sıfır ise, gölge kenarı keskin olacaktır. Değeri, daha olumlu bir gölge daha bulanıklık.
Spread distance	Negatif değerler içe küçültmek için gölge neden olur. Pozitif değer, gölge, tüm yönlere genişletmek için yapar.
Inset	Sözdizimi bu özniteliği ekleme, bir iç gölge etkisi yaratacaktır.
Color	Gölge rengi. HEX kodu, RGB veya RGBA değer olarak kullanılabilir.

CSS Box Shadow Example ;

Bu kutucuk standart ve normal olarak hazırlanmıştır.

Aşağıdaki kod kümesi ile hazırlanmıştır.

<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;”></div>

Bu kodda rounded corners özellikleri kullanılmıştır.

Göründüğü gibi kutu kenarları ovalleştirilmiştir.

Aşağıdaki kod kümesi ile hazırlanmıştır.

<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;”></div>

Shadow ( gölge ) ( x-offset ve y-offset öznitelikleri kullanılarak hazırlanmıştır. ) örnekleri ;

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);

-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);

box-shadow: -5px -5px rgba(0,0,0,0.4);

Blur öznitelikleri için örnekler ;

-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

Spread Distance öznitelikleri için örnekler ;

-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

İnset öznitelikleri için ( gölge içine gölge eklenmiştir.) örnekleri ;

-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);

-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

Blur öznitelikleri için ( inset eklentisi kullanılmıştır.) örnekleri ;

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

Blur ve Spread öznitelikleri için ( 2 özniteliğe inset eklenmiştir. ) örnekleri ;

-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

Evet bütün gölgeli kutularımız bu kadardır.Siz CSS bilgileriniz doğrultusunda bunları dilediğiniz gibi düzenleyebilirsiniz.İsterseniz kenarları oval yapabilir ve ayrıca gölgelendirme kullanabilirsiniz.

Kenarlıklar için ilerideki yazılarımı takip ederseniz CSS3 Border Radius yapımını türkçeleştirip sizlerle paylaşmaya çalışacağım umarım gölgeli kutucuklar hoşunuza gider yazılarınızın içerisinde veya yazı sonlarında dilediğiniz gibi düzenleyip kullanınca çok hoş havaları oluyor.

Kaynak : Bloggermint Orjinal anlatım dili ingilizcedir.Buradan ulaşabilirsiniz.

Hem kenarlık ovalleştirip hemde gölge etkisi kullanmak istiyorsanız örneği aşağıdadır ;

.ovalgölge {
background-color:#F1F1F1;
border:3px solid #DDDDDD;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
}

Bu kodlar işinizi görecektir.Ben Blur ve Spread özniteliklerine İnset eklenmiş şeklini kullandım siz bunu dilediğiniz gibi değiştirebilirsiniz.Değiştireceğiniz kodları mavi renk tonuyla belirttim.

Css kodları içerisindeki "ovalgölge" ismini kendinize göre değiştirebilirsiniz.
Fakat "div class="ovalgölge"diye açmış olduğunuz kodunuzu belirlediğiniz yeni kod ismi ile değiştirmelisiniz.

Kolay gelsin ...

Be a Fan

Bu yazıyı oylamak istermisiniz ?