Border Radius Oluşturucu
Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
8 değerli border-radius sözdizimi ne anlama gelir?
border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 sözdiziminde eğik çizgiden önceki değerler yatay yarıçaplardır (sol üst, sağ üst, sağ alt, sol alt), sonrakiler dikey yarıçaplardır. Her yönde farklı değerler kullanmak organik blob şekillerini oluşturan şeydir.
Üretilen CSS'yi nasıl kullanırım?
border-radius satırını kopyalayın ve şekillendirmek istediğiniz öğenin herhangi bir CSS kuralına yapıştırın, örneğin .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Saf CSS, Sass, Tailwind özel değerleri ve satır içi stillerde çalışır.
Blob şekilleri nerede kullanılır?
Blob şekilleri; hero illüstrasyonlarda, avatarlarda, profil fotoğraflarında, özellik kartlarında, düğmelerde ve modern web ve uygulama tasarımındaki dekoratif arka planlarda popülerdir.
Yuvarlatılmış köşeler tüm tarayıcılarda çalışır mı?
Evet. border-radius; Chrome, Firefox, Safari, Edge ve mobil tarayıcılar dahil tüm modern tarayıcılar tarafından desteklenir, satıcı öneki gerekmez.
Blob şeklini animasyonlu yapabilir miyim?
Evet. border-radius animasyonlanabilir bir özelliktir; CSS geçişi ekleyerek şekiller arasında yumuşak geçişler yapabilirsiniz, örneğin .blob { transition: border-radius .8s ease; }.
4 değerli ve 8 değerli sözdizimi arasındaki fark nedir?
4 değerli biçim her köşeye aynı yatay ve dikey yarıçapı atar; hap veya daire biçimleri için yeterlidir. 8 değerli biçim yatay ve dikey yarıçapları ayırır; asimetrik, organik şekilleri mümkün kılan budur.
Mükemmel bir daire nasıl oluşturulur?
Kare bir öğede sekiz değeri de %50 yapın ya da kısaca border-radius: 50% kullanın. Daireye yakın bir hazır şekilden başlayıp ince ayar da yapabilirsiniz.
Verilerim bir yere yükleniyor mu?
Hayır. Oluşturucu tamamen tarayıcınızda saf CSS ve JavaScript ile çalışır. Sürüklediğiniz, yazdığınız veya kopyaladığınız hiçbir şey sunucuya gönderilmez.
Kare olmayan öğelerde kullanabilir miyim?
Evet, ancak yüzde değerli yarıçaplar öğenin boyutlarına görelidir; dikdörtgende elips köşeler oluşur ve kare önizlemeden farklı görünür. Üretilen değerleri başlangıç noktası alıp ayarlayın.
Border Radius Oluşturucu Nasıl Kullanılır
Sekiz değerli border-radius, sıradan yuvarlatılmış bir dikdörtgenin ulaşamayacağı eliptik köşeli organik blob şekilleri üretir. Şekli kulplarla yontun ve hazır CSS'yi kopyalayın — her şey tarayıcınızda canlı olarak işlenir.
- Şeklin kenarlarındaki sekiz kulaptan birini tutup sürükleyin — üst ve alt kenardakiler yatay yarıçapları, yanlardakiler dikey yarıçapları ayarlar.
- Hazır şekillerden biri olan altı kareye tıklayarak tasarlanmış bir blobtan başlayın, ardından Yatay yarıçaplar ve Dikey yarıçaplar sayı alanlarındaki değerleri ince ayarla yapın (her köşe için biri, %0–100).
- Tek tıkla yeni bir organik şekil üretmek için Rastgele'ye, varsayılan şekil ve renklere dönmek için Sıfırla'ya basın.
- Blobu hedef paletiniz üzerinde görmek için bir Şekil rengi ve Arka plan seçin — ikisi de anında güncellenir.
- Alttaki çubukta canlı gösterilen border-radius bildirimini almak için CSS'yi kopyala'ya basın ve herhangi bir öğeye yapıştırın.
Klasik blob görünümü için kodu overflow: hidden ile birlikte kare bir öğeye uygulayın; yüzdeler eğriyi her boyutta akıcı tutar ve sözdizimindeki eğik çizgi yatay yarıçapları dikeylerden ayırır.
İlgili Araçlar
- CSS Border Radius Oluşturucu Görsel CSS border radius oluşturucu. Her köşeyi bağımsız ayarlayın, gerçek zamanlı önizleme ile CSS kodunu anında kopyalayın.
- CSS Gradyan Oluşturucu Görsel olarak muhteşem CSS gradyanları oluşturun. Birden fazla renk durağı, açılar ve konumlarla doğrusal, radyal ve konik gradyanlar oluşturun. Üretime hazır CSS kodunu anında kopyalayın.
- CSS Box Shadow Oluşturucu Ücretsiz çevrimiçi CSS box shadow oluşturucu. Ayarlanabilir ofset, bulanıklık, yayılma, renk ve inset ile görsel olarak güzel gölgeler oluşturun. Canlı önizleme ve anında kod kopyalama.
- Renk Paleti Oluşturucu Ücretsiz çevrimiçi oluşturucumuzla anında güzel, uyumlu renk paletleri oluşturun. Monokromatik, analog, tamamlayıcı, triadik, split-tamamlayıcı ve tetradik modları destekler. Renkleri HSL kaydırıcılarıyla ayarlayın, favorileri kilitleyin ve CSS, Tailwind, JSON veya SVG olarak dışa aktarın. %100 tarayıcı tabanlı, verileriniz cihazınızdan asla ayrılmaz.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Easing Oluşturucu Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
- CSS Text Shadow Oluşturucu Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.
- CSS Clip Path Oluşturucu Ücretsiz çevrimiçi CSS clip-path oluşturucu. Sürüklenebilir noktalarla polygon, circle, ellipse ve inset şekilleri tasarlayın, canlı önizleyin ve tek tıkla CSS kodunu kopyalayın.