CSS Border-Radius Bunu Yapabilir mi?

Nadiren kullanılan bir özellik ile çok serin efektler nasıl oluşturulur.

Bu yılki Frontend Konferansı’nda Zürih Rachel Andrew, CSS Grid Layout’un Gücünün Kilidini Açmaktan bahsetti. Konuşmasının sonunda, kafamda sıkışmış olan eski bir CSS özelliği hakkında bir şeyden bahsetti:

Görüntü, yalnızca iyi desteklenen sınır yarıçapını kullanarak ayarlanır. Unutmayın ki eski CDS hala var ve faydalıdır. Her etki için süslü bir şey kullanmanıza gerek yok.

 — Rachel Andrew

Bu konuşmayı duyduktan kısa bir süre sonra, kesinlikle çevrelerden daha fazlasını yaratabileceğinizi düşündüm ve sınır yarıçapı kullanılarak yapılabilecekler konusunda daha derinlere inmeye başladım.

Sınır-Yarıçap Mastering

TEK DEĞER

Temel bilgilerle başlayalım. Umarım bu seni sıkmaz. CSS’yi muhtemelen biliyorsunuz ve ayrıca sınır yarıçapını da biliyorsunuz. Birkaç yıldan beri, çoğu zaman bu gibi tek bir değerle kullanıldı: border-radius: 1em ve belki css3please.com en iyi arkadaşınız olduğunda 2010 yılında en çok tartışılan / sevilen CSS3 özelliklerinden biriydi.

Yalnızca tek bir değer kullandığınızda, tüm köşeler bu değere yuvarlanır:

Yukarıdaki örnekte gördüğünüz gibi, px, rem veya em gibi sabit uzunluk değerlerinin yanında yüzdeyi de kullanabilirsiniz. Bunlar çoğunlukla sınır yarıçapını% 50’ye ayarlayarak bir daire oluşturmak için kullanılır. Yüzde değeri, verilen öğenin genişliğine ve yüksekliğine dayanır. Yani bir dikdörtgende kullandığınızda, artık simetrik köşelere sahip olmayacaksınız. Kenarlık yarıçapı: 110px ve kenarlık yarıçapı:% 30’u bir dikdörtgene uygulanan farkı gösteren bir örnek.

border-radius: 110px ve border-radius: 30%

Sağ taraftaki köşelerin simetrik olmadığına dikkat edin ve bunu göz önünde bulundurun. Buna daha sonra geri döneceğiz.

DÖRT FARKLI DEĞERLER

Birden fazla değer kullandığınızda, her bir köşe için değerleri ayarlamaya başlıyorsunuz, sol üst köşeden başlıyorsunuz ve ardından saat yönünde ilerliyorsunuz. Yine yüzdeleri de kullanabilirsiniz, ayrıca yüzdelerini sabit uzunluklu değerler ile de karıştırabilirsiniz.

BİR SLASH İLE GÖRÜLEN SEKİZ DEĞERLER (BU NEDENİYLE İLGİLİ OLAN)

Bence çoğunuz yukarıda açıkladığım her şeyi zaten yapmış. Şimdi heyecan verici kısma geçiyoruz. Bir eğik çizgi ile değerleri ayırır ve sekiz değere kadar belirtirseniz ne olur? Bakalım, bunun hakkında söyledikler neler?

Eğik çizgiden önce ve sonra değerler verilirse, eğik çizgiden önceki değerler yatay yarıçapı ve eğik çizgiden sonraki değerleri dikey yarıçapı ayarlar. Eğik çizgi yoksa, değerler her iki yarıçapı eşit olarak ayarlar.

– W3C

Böylece, eğik çizgiden önceki değerler yatay mesafelerden sorumluyken, eğik çizgiden sonraki değerler dikey uzunlukları tanımlar. Ama bu ne anlama geliyor? Dikdörtgen şekillerdeki yüzde değerlerini hatırlıyor musunuz? Dikey ve yatay mesafeler ve asimetrik olarak yuvarlatılmış köşeler için farklı mutlak değerlerimiz vardı ve bu, eğik çizgi sözdizimini kullandığınızda tam olarak aldığınız şeydir.

Yani sınır yarıçapını karşılaştırdığınızda: 4em 8em sınır yarıçapına: 4em / 8em sonuçları oldukça farklıdır.

 border-radius: 4em 8em to border-radius: 4em / 8em

Sağdaki asimetrik köşeler, bir elipsin bir parçası iken, simetrik köşeler, bir çemberin sol formunun çeyreğidir.

Bununla aldığın şekiller dürüst olmak gerekirse biraz tuhaf görünüyor. Ancak sınır yarıçapı ile oluşturduğunuz çevreleri unutmayın:% 50. Bir çember alırsınız çünkü bir tarafı tanımlayan değerler% 100’e kadar (% 50 +% 50 =% 100) ve düz bir çizgi kalmaz, bu da orijinal kareyi size hatırlatır. Aynı mantığı tam sekiz değerindeki sınır yarıçapı sözdizimine uygularsanız, bir plectrum veya organik hücre gibi görünen bir şekil oluşturabilirsiniz:

Sonunda, son şekli oluşturan dört örtüşen elips. Kolay ha!

PANİK YAPMAYINIZ… SİZİN İÇİN GÖRSEL BİR JENERATÖR YAPTIK

Bu sözdizimine alışmak biraz zamanımı aldı. Her nasılsa bu sezgisel değil. İşleri sizin için biraz kolaylaştırmak için, kendi organik şeklinizi oluşturmanıza yardımcı olan küçük bir araç geliştirdik.

Akışları Geçin

Artık toplam 8 değeri biliyorsunuz, biraz üzgün hissedebilirsiniz, çünkü sınır yarıçapı aracımız size her bir değeri ayrı ayrı ayarlama seçeneği sunmuyor… Sıkıca oturun, işte 8-POINT-FULL- KONTROL sürümü.

Yeterince büyükseniz, 1984 Ghostbusters filminden bu alıntıyı hatırlayabilirsiniz:

“Akışları Çaprazlama.” – “Neden?” – “Kötü olurdu.”

Bu Serin Özelliği

Burada devam eden bir şey var: Bir taraftaki tutamaçları bir tarafa geçerseniz, şekil hareket eder… tahmin edilemez bir şekilde söyleyelim. Ama her şeyden önce, kendiniz için toplam protonik geri dönüş veya bir şeyle sonuçlanmayacaktır, ama söyleme, ben seni uyarmadım.

Photos by gratisography.com

See the Pen border-radius by Nils (@enbee81) on CodePen.