CSS3 Tutorials Rounded Corners Yapımı

CSS3 nimetleri sınırlamakla kalmıyor artık İnternet Explorer 9'un kesinlikle izin verdiği ve desteklediği bir sistem olan CSS3 biz kullanıcıları için bulunmaz bir hint kumaşı oluyor inanın CSS3 nimetleri hergün daha fazla bilgi edinmenize ve birçok yenilik ile karşılaşmanıza sebep oluyor.
Daha önceki  yazımda CSS3 Box Shadow yapımını sizlerle paylaşmıştım,ve kenarlıklarınızı düzenlemeniz için bu yazıyı yazacağımdan bahsetmiştim şimdi birkaç kenarlık örnekleriyle ve açılımlarıyla artık dahada basit ve görsellik alanında yüksek bir bloğa sahip olacağız,öncelikle şunu belirtmeliyimki bu CSS3 nimeti olan Border Radius bizleri photoshop derdinden tamamen kurtarıyor.Saatlerce oval kenarlıklı vs. .png resimleri hazırlamak yerine sadece birkaç kod yazımı ile bu sorunumuza derman oluyor.İE9 CSS3 desteği için bu sayfaya bakabilirsiniz.
İE9 test sayfasını görmek için tıklayınız.

CSS3 özellikleri Google Chrome , Safari , Opera , Mozilla Firefox , İnternet Explorer 8 ve üstü web tarayıcılarında geçerlidir.

Dip not : İnternet Explorer 8 bile bazen müsade vermemektedir.

Evet bunları göz önünde bulundurarak sitenize bu tarz kenarlıklar eklemek istiyorsanız biz örneklendirmeye geçelim.

Bu kodları tanımak isterseniz aşağıdaki resmi inceleyiniz.

Yukarıda da belirtildiği gibi her tarayıcıda gözükebilmesi için bizim bütün kodları birleştirmemiz gerekiyor ;

Border Radius Örnek 1 ;

Hafif ovalleştirilmiştir.
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Border Radius Örnek 2 ;

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

Border Radius Örnek 3 ;

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

Border Radius Örnek 4 ;

-webkit-border-radius: 24px 0;
-moz-border-radius: 24px 0;
border-radius: 24px 0;

Border Radius Örnek 5 ;

-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;

Border Radius Örnek 6 ;

-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;

Border Radius Örnek 7 ;

-webkit-border-top-left-radius: 50px 30px;
-webkit-border-top-right-radius: 50px 30px;
-moz-border-radius-topleft:50px 30px;
-moz-border-radius-topright: 50px 30px;
border-top-left-radius: 50px 30px;
border-top-right-radius: 50px 30px;

Hepsi bu kadar CSS bilgisine sahip arkadaşlarımız istedikleri gibi bir kutucuk yapabilir ve içerisine bu kodlardan dilediğini ekleyip köşeleri ovalleştirebilir.

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

Son olarak hazırladığımız örnek aşağıdadır.

Bu kodlarda Text Shadow

Box Shadow

Rounded Corners Kullanılmıştır.

.textbordershadowörnek {
text-shadow: rgba(64, 64, 64, 0.496094) 6px 7px 5px;
-webkit-box-shadow: rgba(0, 0, 128, 0.246094) 8px 6px 3px;
-moz-box-shadow: rgba(0, 0, 128, 0.246094) 8px 6px 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
height: auto;
padding: 10px;
font-size: 14px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;
}​

Siz dilediğiniz gibi kendinize göre düzenleyebilirsiniz.

Kolay gelsin ...

Be a Fan

Bu yazıyı oylamak istermisiniz ?