⭐ 0
🔍
Metin Görsel PDF ve Belgeler Ses Müzik Elektronik Zaman Faydalı Araçlar Doğrulayıcılar Ezoterizm Oyunlar

CSS Sincap Oluşturucu - Yuvarlak Kare

CSS kenarlık yarıçapını görsel olarak tasarlayın: piksel veya yüzde cinsinden dört bağımsız köşe kaydırıcısı, anlık daireler ve haplar için tüm köşeleri birbirine bağlayan bir kısayol, ayrıca rastgele şekillere sahip bir organik blob modu.

12px
12px
12px
12px
İşleniyor... 0%

Sonuç

Bu sayfa, keskin bir kare ile tam bir daire arasında yer alan orta dereceli bir yuvarlama olan dört köşenin tamamı %30 oranında bağlantılı olacak şekilde kenarlık yarıçapı oluşturucuyu açar. Bu gerçek bir matematiksel sincap (bir süper elips) değildir, ancak tek bir CSS özelliğinin alabileceği en yakın değerdir ve çoğu tasarım sisteminin bu görünümü istediklerinde ulaşabilecekleri değerdir.

Adı, iOS tarafından popüler hale getirilen yuvarlak kare uygulama simgelerinden geliyor: her köşede yumuşak ve samimi bir his uyandıracak kadar yeterli kıvrım var, ancak hiçbir zaman şeklin yuvarlak olduğu anlaşılacak kadar fazla değil. Simge döşemeleri, kart küçük resimleri ve modern avatar çerçevelerinin tümü, tam da bu nedenle aynı kaba aralıktaki yarıçaplara dayanır.

Bağlantılı kaydırıcıyı daha yumuşak, daha dairesel bir his için yukarıya veya daha keskin, daha kare bir his için aşağıya doğru itin; CSS çizgisi her değişiklikte güncellenir ve eğri simgenize veya kartınıza uygun hissettiğinde kopyalamaya hazırdır.

🛡️
Tarayıcıda Çalıştırıldı

Dosyalarınız ve girdileriniz bu cihazdan asla ayrılmaz. İşlem tamamen çevrimdışı çalışır. %100 Güvenli.

Kabul Edilen Formatlar ve Kurallar

  • Köşe modu: her biri piksel ve yüzde birimleri arasında değiştirilebilen bağımsız sol üst, sağ üst, sağ alt ve sol alt yarıçap kaydırıcıları.
  • Her köşeyi tek bir kaydırıcıdan yönlendiren Tüm köşeleri birbirine bağla onay kutusu ve ayrıca kırpılmış köşelerin görünür kalması için açık veya koyu bir arka planda dama tahtası önizlemesi.
  • Organik sekiz değerli eğik çizgi sözdizimi şekilleri oluşturan, büyük gösterilen ve CSS olarak kopyalamaya hazır olan Rastgeleleştir düğmesine sahip Blob modu.

Temel Faydalar

✓ Her kaydırıcı canlı önizlemeyi ve CSS satırını anında günceller, böylece 12px %40 8px %24'ün gerçekte neye benzediğini asla tahmin etmenize gerek kalmaz.
✓ Tüm köşeleri birbirine bağlama kısayolu, diğer üç köşeye elle dokunmadan bir kaydırıcıyı mükemmel bir daireye, hap veya sincap şekline dönüştürür.
✓ Blob modu, CSS'nin sekiz değerli eğik çizgi sözdizimiyle organik, rastgele şekiller oluşturur; tek bir kenarlık yarıçapı değerinin asla üretemeyeceği bir görünüm.

Kullanım Durumları

  • • Bir kartın dört köşe yarıçapını bağımsız olarak çevirin; açılır panelin yalnızca üst kısmını veya sekmenin yalnızca bir tarafını yuvarlayın.
  • • Mükemmel bir daire, stadyum şeklinde bir hap düğmesi veya iOS tarzı bir sincap oluşturmak için dört köşenin tümünü tek bir kaydırıcıya bağlayın.
  • • Blob moduna geçin ve organik bir şekil, bir kahraman görselinin veya avatarın arkasındaki boş alana sığıncaya kadar Rastgeleleştir'e basın, ardından CSS'yi kopyalayın.