CSS3 Border Radius ile Yuvarlak Köşeler

CSS3 Yuvarlatılmış köşeler, kenarlık yarıçapı özelliğini kullanarak gövdeye veya metne özel renkli köşe eklemek için kullanılır. Görüntünün tüm köşelerini yuvarlayabilir veya yalnızca köşeleri seçebilir, yarıçapı farklı köşelerde değiştirebilir veya görüntüyü oval veya daire şeklinde görüntüleyebilirsiniz.

Daha önceki CSS sürümlerini, görüntüleri ve HTML tablolarını kullanarak köşeleri yuvarlatılmış bir kutu oluşturduysanız, bunun ne kadar zor ve yorucu olduğunu biliyorsunuz, Daha önce dört resim oluşturmak zorunda kaldınız (her köşe için bir tane) ve köşeler aynı hizada dizmek için her şeyi dikkatlice nasıl ayarlamak zorunda kaldınığızı Bilirsiniz.

Eski tekniği denemiş olsanız da olmasanız da, CSS3 border-radius kullandığınızda, yuvarlatılmış köşeleri oluşturmanın ne kadar kolay olduğunu takdir edersiniz.

border-radius kullandığınızda, yuvarlatılmış köşeleri oluşturmak için yarıçapın uzunluğunu değer olarak belirtirsiniz. Daha sonra yuvarlak köşelerinizi istediğiniz kadar yuvarlak hale getirebilir ve stili kutunun herhangi bir köşesine veya tümüne uygulayabilirsiniz. Aşağıda ki görüntü, yarıçapı değiştirmenin eğri köşeyi nasıl değiştirdiğini görmenize yardımcı olmak için tasarlanmış bir şema görüyorsunuz.

css border-radius

border-radius , <div> etiketi veya <h1> etiketi gibi herhangi bir kutu nesnesine uygulayabilirsiniz . CSS3'te yuvarlatılmış köşeler oluşturma sözdizimi ( r , yarıçapı, dairenin merkezinden kavisli köşeye kadar olan mesafeyi gösterir):

CSS border-radius Özellik


CSS border-radius özelliği, bir elemanın köşelerinin yarıçapını tanımlar.

İpucu: Bu özellik, öğelere yuvarlatılmış köşeler eklemenizi sağlar!

Bununla ilgili üç özellik yapalım.

1. Belirtilen arka plan rengine sahip bir eleman için yuvarlatılmış köşeler:


#test1{

  border-radius: 25px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}
	

ÇIKTI:

Yuvarlatılmış köşeler!

2. Kenarlıklı bir eleman için yuvarlatılmış köşeler:


#test2 {
  border-radius: 25px;

  border: 2px solid #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}


ÇIKTI:

Yuvarlatılmış köşeler!

3. Arka plan görüntüsü olan bir eleman için yuvarlatılmış köşeler:


#test3 {
  border-radius: 25px;

  background: url(morocco.jpg);

  background-position: left top;

  background-repeat: repeat;

  padding: 20px;

  width: 200px;

  height: 150px; 
}

ÇIKTI:

CSS Yuvarlatılmış Köşeler:İpuçları


Köşeleri yuvarlatmak için kullanılan tüm CSS kenarlık stili özellikleri ile aşağıdaki tabloya bir göz atın:

Özellik Açıklama
border-radius Dört eleman yarıçapı özelliğini ayarlamak için bu elemanı kullanın.
border-top-left-radius Sol üst kenarlık şeklini belirler
border-top-right-radius Sağ üst kenarlık şeklini belirler
border-bottom-right-radius Sağ alt kenarlık şeklini belirler
border-bottom-left-radius Sol alt kenarlık şeklini belirler

CSS Yuvarlatılmış Köşeler: Her Köşeyi Belirtin


border-radius değeri belirtildiğinde, CSS yuvarlatılmış köşeleri 4 kenara da uygulanır. Ancak, her köşe bu kurallarla ayrı ayrı belirlenebilir:

Dört değer: border-radius:15px 50px 30px 5px (sol üst, sağ üst, sağ alt ve sol alt köşe):

Üç değer: border-radius:15px 50px 30px; (ilk değer sol üst köşeye uygulanır, ikinci değer sağ üst ve sol alt köşelere uygulanır ve üçüncü değer sağ alt köşeye uygulanır):

İki değer: border-radius:15px 50px; (ilk değer, sol üst ve sağ alt köşelere uygulanır ve ikinci değer sağ üst ve sol alt köşelere uygulanır):

Bir değer: border-radius:15px; (Değer, eşit olarak yuvarlanmış dört köşeye uygulanır.)

Eliptik Köşeler Oluşturma


Eliptik köşeler ayrıca CSS border-radius kullanılarak da oluşturulabilir. Değerler arasında boşluk karakteri bırakmak yerine, iki değer arasına eğik çizgi sembolü (/) eklemeniz gerekir.

Örnekler verirsek:


#eliptik1 {

  border-radius: 50px / 15px;

  background: #3498db;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}	

ÖRNEK 2:


#eliptik2 {
  border-radius: 15px / 50px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}

ÖRNEK 3:


#eliptik3 {

  border-radius: 50%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

Bazı Örnekler:


#test1 {

  border-radius: 25% 10%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 2:


#test2 {

  border-radius: 10% 30% 50% 70%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 3:


#test2 {

  border-radius: 10% / 50%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 4:


#test3 {

  border-radius: 10px 100px / 120px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 4:


#test4 {

  border-radius: 50% 20% / 10% 40%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

CSS border-radius Özet


Artık herhangi bir elemanı kolaylıkla yuvarlayabilirsiniz. Henüz okumadıysanız, CSS borders ve CSS backgrounds konularını okuyun. Şimdilik bilgileri özetleyelim:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9106

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.