CodeKitHubBu Araç Nedir?
border-radius, bir öğenin köşelerini yuvarlayan CSS özelliğidir. Elle yazıldığında, sabit bir sırayla dört değer alır — sol üst, sağ üst, sağ alt, sol alt — ve özellikle dört köşe birbirinden farklı olduğunda bu sırayı karıştırmak kolaydır.
Bu araç, tahmin yürütme ihtiyacını ortadan kaldırır: kaydırıcıyı hareket ettirin, canlı önizlemede köşenin yuvarlanmasını izleyin ve oluşturulan kod kutusundan tam CSS kodunu okuyun. Tek bir kilit düğmesi, tek tip yarıçap (dört köşenin de aynı olması, en yaygın durum) ile organik, asimetrik şekiller için dört bağımsız kaydırıcı arasında geçiş yapmanızı sağlar.
Neden Kullanmalısınız?
- Canlı önizleme, sürüklediğiniz anda anında güncellenir — sonucu görmek için CSS'yi düzenlemenize veya sayfayı yenilemenize gerek yoktur.
- "Her köşede aynı yarıçap" gibi yaygın durumlar için tek tıklamayla kilitleme; hap şeklindeki düğmeler, konuşma balonları ve damla şekilleri için kilidi açma.
- Tüm köşeler eşleştiğinde tek değerli kısaltılmış biçimi, eşleşmediğinde ise dört değerli tam biçimi verir — her iki durumda da kopyala-yapıştır için hazırdır.
- Tamamen tarayıcınızda çalışır. Girdiğiniz hiçbir bilgi başka bir yere gönderilmez.
- Ücretsiz, kayıt gerektirmez, mobil cihazlarda çalışır.
Nasıl Kullanılır
- “Tüm köşeleri kilitle” seçeneğini işaretli bırakın ve herhangi bir kaydırma çubuğunu sürükleyerek kutunun tamamı için tek bir yarıçap belirleyin.
- Her bir köşeyi ayrı ayrı kontrol etmek için kilit işaretini kaldırın — hap şekilli, damla şekilli ve asimetrik kartlar için kullanışlıdır.
- Her bir kaydırıcıyı ayarladıkça önizleme kutusundaki güncellemeleri canlı olarak izleyin.
- Kod kutusundaki oluşturulan CSS kodunu kopyalayın ve stil sayfanıza yapıştırın.
Örnek
Giriş
Top-left: 40px, Top-right: 8px, Bottom-right: 40px, Bottom-left: 8pxÇıkış
border-radius: 40px 8px 40px 8px;Bunun gibi birbiriyle uyumsuz zıt köşeler, bir yaprak ya da taçyaprağı silueti oluşturur — bu, kart ve rozet tasarımlarında sıkça rastlanan bir etkidir.
px mi, % mi — hangi birimi kullanmalıyım?
Bu oluşturucu piksel değerleri üretir; bu, çoğu kullanıcı arayüzü çalışması için en uygun varsayılan ayardır: düğmeler, kartlar ve giriş alanları gibi, öğenin boyutundan bağımsız olarak sabit ve öngörülebilir köşe yarıçapı istediğiniz yerler.
Yüzdeler farklı şekilde davranır — bunlar öğenin kendi genişliği ve yüksekliğine göre değişir; bu nedenle kare bir öğede %50 yarıçapı mükemmel bir daire oluştururken, kare olmayan bir öğede ise bir elips oluşturur. Bu efekti elde etmek istiyorsanız (avatarlar, kapsayıcıyla birlikte ölçeklenen damla şekilleri gibi), oluşturulan CSS kodunu alın ve px değerlerini manuel olarak % değerleriyle değiştirin — örneğin, border-radius: 50% komutu herhangi bir kare kutuyu daireye dönüştürür.
Yaygın border-radius desenleri
- Yuvarlatılmış kart: tüm köşeler eşit, kullanıcı arayüzü bileşenleri için yaklaşık 8–16 piksel.
- Hap düğmesi: Yarıçapı, öğenin yüksekliğinin yarısı olarak ayarlayın (ya da sadece 9999 piksel değerini kullanın; bu değer, yükseklik ne olursa olsun tam bir hap şekline sınırlandırılır).
- Daire şeklindeki avatar: kenar yuvarlaklığı: %50 (genişlik ve yükseklik eşit olan) kare öğe üzerinde.
- Konuşma balonu: üç köşesi yuvarlak, bir köşesi keskin — üç kaydırıcıyı yüksek ayara, birini ise 0’a getirin.
- Yaprak / taç yaprağı şekli: zıt köşeler birbirine benziyor, bitişik köşeler farklı — örneğin, sol üst ve sağ alt köşeler ikisi de büyük, sağ üst ve sol alt köşeler ikisi de küçük.
Bir gölgeyle eşleştirme
Yuvarlatılmış köşeler nadiren tek başına kullanılır — kartlar ve düğmeler de genellikle derinlik hissi yaratmak için biraz gölgeye ihtiyaç duyar. Kutu Gölgesi Oluşturucu’yu kullanarak bir düşen gölge ayarlayın ve oluşturulan her iki CSS parçasını da aynı öğeye uygulayın.
Sıkça Sorulan Sorular
border-radius ile köşe sıralaması arasındaki fark nedir?
CSS kısaltma biçimi, her zaman sol üst, sağ üst, sağ alt, sol alt sırasıyla, sol üstten başlayarak saat yönünde ilerler. Bu aracın dört kaydırma çubuğu da bu sıraya uygun şekilde etiketlenmiştir; böylece sırayı kendiniz hatırlamanıza gerek kalmaz.
Her köşe için farklı birimler kullanabilir miyim?
Evet, gerçek CSS’te köşelerde px, %, em ve rem birimlerini bir arada kullanabilirsiniz, ancak pratikte bu pek görülmez. Bu araç, basitlik amacıyla tek tip px değerleri üretir — karışık birimler kullanmanız gerekiyorsa, stil sayfanızda herhangi bir değeri doğrudan % veya başka bir birime dönüştürebilirsiniz.
Neden `border-radius: 50%` bazen daire yerine oval bir şekil oluşturuyor?
Çünkü yüzdeler her bir eksene bağımsız olarak görecelidir — yatay yarıçap, öğenin genişliğinin bir yüzdesi; dikey yarıçap ise yüksekliğinin bir yüzdesidir. Genişliği ve yüksekliği eşit olan kare bir öğede bu, mükemmel bir daire oluşturur; dikdörtgende ise bir elips oluşturur.
border-radius özelliği arka plan resimleri ve kenarlıklar üzerinde de çalışıyor mu?
Evet — border-radius, öğenin arka planını, kenarlığını ve (modern tarayıcılarda) box-shadow özelliğini yuvarlak şekle göre kırpar. Üst öğeye overflow: hidden ayarını da yapmadığınız sürece, taşan alt öğelerin içeriğini kırpmaz.
Yarıçapın ulaşabileceği en büyük değere ilişkin bir sınır var mı?
Kesin bir sınır yoktur — yarıçap, öğenin genişliğinin veya yüksekliğinin yarısını aşarsa, tarayıcılar bu değeri sınırlayarak o taraftaki iki eğrinin tam ortada birleşmesini sağlar; işte bu sayede bir kare, mükemmel bir daireye veya hap şekline dönüşür.