Nasıl çalışıyor?
Aracımız, border-radius değerlerinizi hem piksel hem de yüzde birimlerinde girmenize izin verir. Dört yatay ve dört dikey olmak üzere sekiz farklı köşe değeri belirleyerek, klasik dikdörtgenlerden asimetrik veya organik blob şekillere kadar geniş bir yelpazede CSS kodu oluşturabilirsiniz.
Canlı önizleme sayesinde, girilen border-radius değerlerinin element üzerinde nasıl göründüğünü anında görebilirsiniz. Oluşturulan CSS kodunu tek tıkla kopyalayarak projelerinize aktarabilirsiniz.
Birimi ve ölçekleme seçenekleri
Border-radius değerlerini piksel veya yüzde olarak seçebilirsiniz. Piksel birimi, köşe yuvarlamasını sabit bir değerde tutar ve elementin boyutu değişse bile aynı kalır. Yüzde birimi ise, elementin boyutuna göre oranlı olarak ölçeklenir; bu sayede responsive tasarımlar için uygundur.
Ek olarak, rastgele veya 'fancy' modunda organik blob şekiller yaratmak mümkün. Yüzde birimiyle çalışırken, element boyutundaki değişiklikler şeklin de değişmesine neden olur.
Sınırlamalar ve tarayıcı uyumu
CSS kuralları gereği, border-radius değeri bir kenarın yarısından fazla ise tarayıcı bu değeri otomatik olarak kısıtlar. Bu nedenle, girilen bazı aşırı değerler beklenenin dışında görünebilir.
Oluşturulan CSS kodu, modern tarayıcıların tamamında uyumludur. Ancak yalnızca dikdörtgen veya kare elementler üzerinde çalışır; resim veya SVG gibi dışa aktarma seçenekleri sunmaz.
Sıkça Sorulan Sorular
Sekiz değerli border-radius nasıl kullanılır?
Sekiz değerli border-radius ile dört köşenin yatay ve dikey yarıçaplarını ayrı ayrı belirleyebilirsiniz. Sintaks 'border-radius: h1 h2 h3 h4 / v1 v2 v3 v4' şeklindedir ve asimetrik blob şekiller oluşturmak için idealdir.
Pixel ve yüzde birimi arasındaki fark nedir?
Pixel birimi sabit bir köşe yuvarlama sağlar ve element boyutu değiştikçe şekil sabit kalır. Yüzde birimi ise yuvarlama oranlıdır ve elementin boyutu değiştikçe köşe şekli de değişir.
Element boyutu değişince neden şekil değişiyor?
Yüzde birimiyle border-radius kullanılırsa, yuvarlama elementin boyutuna göre oranlanır. Responsive tasarımlarda bu nedenle elementin boyutu değiştikçe blob şekli de farklılaşır.
CSS ile blob şekilleri arasında animasyon yapabilir miyim?
Evet, border-radius değerleri arasında geçiş yapmak için CSS animasyonu veya transition kullanılabilir. Farklı blob şekillerini keyframe ile animasyona dönüştürebilirsiniz.
Rastgele veya 'fancy' modunda değerler nasıl oluşuyor?
Aracın rastgele ve 'fancy' algoritmaları, sekiz köşe için organik ve dengeli değerler üretir. Bu sayede doğal görünümlü blob şekiller elde edilir ve değerler tarayıcıda güvenli şekilde hesaplanır.
Oluşturulan CSS tüm tarayıcılarda çalışır mı?
Modern tarayıcıların tamamı sekiz değerli border-radius yapısını destekler. Eski tarayıcılarda yalnızca dört değerli klasik sintaks kullanılabilir; blob şekiller için güncel tarayıcı önerilir.
Bu araçta bir sorun mu var, ya da bir fikriniz mi var? Bize yazın