Blogger ve CSS3

   Blogger'da CSS3 özelliklerinin kullanıldığını biliyorsunuz. Günümüz tarayıcılarının hemen hemen hepsi CSS3 biçimlendirmelerini destekliyor. Firefox (3.5+), Opera (10.5+), Chrome (5+) Internet Explorer (9+ Kısmi ) ve Webkit/Safari (3.1+) CSS3 biçimlendirmelerinizi sorunsuz yorumlarlar.

Blogger'da CSS3 biçimlendirmelerini nerelerde kullanabilirim?

CSS3 biçimlendirmelerinizi bloğunuzun her noktasında kullanabilirsiniz. CSS3 çok geniş bir konu ve ben bu yazımda en çok kullanılan biçimlendirmeleri örneklerle anlatmaya çalışacağım.

1. Arkaplan renginin değiştirilmesi ve opaklık verilmesi;

Arka plan ve opaklık ataması

background-color: rgba(100, 100, 100, .7);

   Üst satırda bulunan .7 değeri opaklık değeridir, değer ile oynayarak farkları görebilirsiniz.

2. Yuvarlak kenarlı arkaplan;

Yuvarlık kenarlı arkaplan 

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

3. Yuvarlak ve düz kenarlı arkaplan;

Yuvarlık ve düz kenarlı arkaplan

-webkit-border-top-left-radius: 150px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 150px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 150px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 150px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 150px;
border-top-right-radius: 0px;
border-bottom-right-radius: 150px;
border-bottom-left-radius: 0px;

4. Arka plan için gölge efekti (shadow)

Gölge efekti verilmiş arkaplan

-webkit-box-shadow: 10px 10px 2px #969696;
-moz-box-shadow: 10px 10px 2px #969696;
box-shadow: 10px 10px 2px #969696;

   Yukaridaki biçimlendirmeler şu şekildedir; gölge kutunun solundan 10px sağda olsun, yukarıdan 10px aşağıda olsun, 2px blur (bulanık) olsun ve gölge #969696 hex kodlu renkte olsun.

5. Metin (yazı) için gölge efekti (shadow)

Gölge efekti verilmiş yazı (metin)

text-shadow: 5px 5px 3px #b8b8b8;

   Yukarıdaki kodlarda; sırasıyla yazının solundan 5px boşluk, yukarıdan 5px boşluk, 3px blur (bulanık) ve #b8b8b8 hex renk kodu değerleri verilmiştir.

   Açıklamalar; -webkit-border-radius" Webkit-Safari tarayıcılarında, "-moz-border-radius" Firefox tarayıcısında ve "border-radius" Opera tarayıcılarında kullanılmaktadır. Her kullanıcının farklı tarayıcı kullandığını düşünürsek bütün biçimlendirmeleri yapmalıyız.

Daha detaylı CSS3 için W3School sitesini ziyaret edebilirsiniz...

İyi bloglamalar...

Kategori: Blogger,CSS3