CSS Border Radius Oluşturucu
8 border-radius değerini görsel olarak kontrol edin.
Gerçek zamanlı önizleme ile amorf (blob) şekiller oluşturun.
Hakkında
CSS Border Radius Oluşturucu, 4 köşenin her biri için yatay ve dikey yarıçap olmak üzere toplam 8 border-radius değerini görsel olarak kontrol etmenizi ve sonucu gerçek zamanlı görmenizi sağlar.
Normal yuvarlak köşelerin ötesinde, açılış (hero) sayfalarındaki süslemelerde yaygın olarak kullanılan border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% gibi şekiller (blob) oluşturabilirsiniz. Tüm işlemler tarayıcınızda yerel olarak yapılır.
Nasıl Kullanılır
Ön Ayar Seçin
Başlangıç şeklini hızlıca elde etmek için ön ayarlardan birini (Daire, Yaprak, Amorf vb.) seçin, ardından kaydırıcılarla ince ayar yapın.
Kaydırıcıları Ayarlayın
Her köşe için yatay ve dikey kaydırıcıları sürükleyin. Önizleme anında güncellenir.
CSS Kopyalayın
Oluşturulan CSS'yi panonuza kopyalamak için "Kopyala" düğmesine tıklayın ve stil dosyanıza yapıştırın.
Sözlük
- border-radius
- Bir öğenin köşelerini yuvarlatan bir CSS özelliğidir. Her köşe için px ve % birimlerini bağımsız olarak destekler.
- Yatay / Dikey Yarıçap
- border-radius tarafından tanımlanan elipsin iki yarıçapı. "/" ayırıcısı yatay (önce) ve dikey (sonra) değerleri ayırır.
- Blob (Amorf)
- Tüm 8 eksen için asimetrik border-radius değerleri ayarlanarak oluşturulan organik, düzensiz şekil.
- clip-path
- Öğeleri özel şekillere kırpmak için bir CSS özelliğidir. border-radius'tan daha esnektir ancak sözdizimi daha karmaşıktır.
- Kısaltma (Shorthand)
- border-radius: 10px 20px 30px 40px — dört köşeyi birden tek bir değerde belirtir. Yatay ve dikey değerleri ayırmak için "/" kullanın.
SSS
- Q.8 değer nedir?
- 4 köşeden her birinin yatay ve dikey bir yarıçapı vardır ve bu toplam 8 değer anlamına gelir. Format: border-radius: A B C D / E F G H.
- Q.Amorf (blob) şekilleri ne için kullanabilirim?
- Hero bölümü arka plan süslemeleri, profil görseli maskeleri, çağrı butonu (CTA) şekilleri ve daha fazlası için.
- Q.Veriler bir sunucuya gönderiliyor mu?
- Hayır. Her şey tarayıcınızda yerel olarak oluşturulur.
- Q.IE11'de çalışır mı?
- border-radius IE9'dan itibaren çalışır. Eliptik gösterim ("/" işaretli) de IE9+ ile çalışır.
- Q.Sass veya Less ile kullanabilir miyim?
- Evet. Oluşturulan kod standart CSS'tir, dolayısıyla Sass, Less ve Stylus ile doğrudan çalışır.
Kullanım Senaryoları
Buton ve Kart Tasarımı
Buton ve kart bileşenleri için standart dairelerin ötesinde özgün yuvarlak şekiller oluşturun.
Amorf Arka Plan Süslemesi
Açılış sayfalarındaki ana (hero) bölüm arka planlarında organik amorf şekiller kullanın.
Profil Görseli Maskesi
Standart daire veya karenin dışında profil resimleri için alışılmadık maskeleri keşfedin.
CSS Öğrenimi
Kaydırıcılarla denemeler yaparak border-radius özelliğinin nasıl çalıştığını görsel olarak anlayın.