CSS `border-radius` kodu oluşturma adımları

Dört köşe değerini doğru sırayla girip birimi belirleyerek CSS border-radius bildirimi oluşturabilirsiniz. Boş bırakılan köşe değerleri için 10, belirtilmeyen birim için px kullanılır.

CSS kenar yuvarlatma bildirimini hazırlama

Yuvarlatılmış köşeler hazırlarken her köşeye aynı yarıçapı vermek istemeyebilirsiniz. Bu araç, bir kutunun dört köşesine ait değerleri ayrı ayrı belirleyerek CSS border-radius bildirimini oluşturmanıza yardımcı olur. Üst sol, üst sağ, alt sağ ve alt sol köşeler için kullanılan sıra, oluşturulan bildirimin içinde de korunur. Böylece simetrik bir tasarım için aynı değeri dört alana yazabilir, asimetrik bir görünüm için köşelere farklı değerler verebilirsiniz.

Aracı kullanırken iki bilgiyi birlikte düşünün: köşe değerleri ve birim. Köşe değerleri tasarımınızda istediğiniz yuvarlatma ölçülerini temsil eder; birim ise bu değerlerin bildirime nasıl ekleneceğini belirler. Bir alanı boş bırakırsanız araç o köşe için 10 değerini kullanır. Birim belirtilmezse varsayılan olarak px kullanılır. Bu varsayılanlar, her alanı doldurmak istemediğiniz veya hızlı bir başlangıç yapmak istediğiniz durumlarda işe yarar.

Sonuç, daha geniş bir stil dosyası ya da tamamlanmış bir bileşen değil, oluşturulan tek bir border-radius bildirimidir. Bu nedenle bildirimi kullanacağınız stil tanımının ilgili yerine aktarmadan önce köşe sırasını, değerlerin görünümünü ve birimlerin yazılışını okuyun. Araç, verdiğiniz birim metnini her köşe değerinin sonuna ekler. Bu davranışı bilmek, sonuçta beklemediğiniz birim yazımı gördüğünüzde bildirimi doğru yorumlamanızı sağlar.

Adım adım kullanım

Dört köşe alanını bulun. İlk alanı üst sol, ikinci alanı üst sağ, üçüncü alanı alt sağ, dördüncü alanı alt sol köşe için kullanın. Bu sırayı, tasarımınızdaki köşeleri düşünürken baştan belirleyin. Dört köşede aynı yuvarlatmayı hedefliyorsanız aynı değeri her alana yazın. Köşelerin görünümünü birbirinden ayırmak istiyorsanız her alana kendi değerini girin.
Değerleri alanlara yerleştirdikten sonra birim seçimini yapın. Seçtiğiniz birim metni, oluşturulan bildirimin içindeki her köşe değerinin sonuna eklenir. Örneğin rem seçildiğinde, dört değer de rem ekiyle bildirimde görünür. Birim belirtmezseniz sonuçta px kullanılır. Birim seçimini, değerleri girdikten sonra kontrol etmek okunabilirliği artırır; böylece üretimden önce hangi ölçü biçimini istediğinizi netleştirmiş olursunuz.
Varsayılan değerden yararlanmak istediğiniz köşe alanını boş bırakın. Belirtilmeyen her köşe değeri için 10 kullanılır. Bir alanı boş bırakırken bunun bilinçli bir seçim olduğundan emin olun; çünkü boş alan, o köşe için sizin ayrıca yazdığınız bir değer yerine varsayılan değerin kullanılacağı anlamına gelir. Diğer alanlarda verdiğiniz değerler ise kendi sıralarındaki köşelere taşınır.
Üretim işlemini başlatın ve oluşturulan bildirimi okuyun. Önce dört değerin bildirime hangi sırayla geçtiğini kontrol edin: üst sol, üst sağ, alt sağ ve alt sol. Ardından her değerin sonunda seçtiğiniz birimin bulunup bulunmadığına bakın. Boş bıraktığınız alanlar varsa ilgili yerde 10 değerini, birim belirtilmemişse px ekini arayın.
Bildirimi, yuvarlatma tanımını kullanacağınız stil bölümüne aktarın. Aktarım sırasında yalnızca oluşturulan border-radius bildirimini kullanın; araç daha geniş bir stil kuralı üretmez. Aynı işlemi başka bir köşe düzeni için tekrarlayacaksanız yeni değerleri ilgili dört alana yerleştirip birim seçimini yeniden gözden geçirin. Üretimden sonra yaptığınız bu kısa okuma, değerlerin yanlış köşeye gitmesini veya birimin beklediğiniz biçimde görünmemesini fark etmenize yardımcı olur.

Sonucu okuma

Oluşturulan sonuç, yuvarlatılmış köşeleri tanımlayan bir CSS border-radius bildirimi biçimindedir. Bildirimdeki ilk değer üst solu, ikinci değer üst sağı, üçüncü değer alt sağı, dördüncü değer alt solu temsil eder. Bu nedenle değerleri yalnızca sayısal büyüklüklerine göre değil, ait oldukları köşeye göre de değerlendirin. Dört alana aynı değeri verdiğinizde sonuçta aynı değer sıralı biçimde yer alır; farklı değerler verdiğinizde her köşe için ayrı bir değer görünür.

Birim, her değerin sonuna eklenir. Örneğin dört köşe için sırasıyla 12, 8, 4 ve 0 verip rem birimini seçtiğinizde beklenen bildirim şekli border-radius: 12rem 8rem 4rem 0rem; olur. Burada önemli olan, değerlerin girildiği sıranın korunması ve rem metninin dört değere de eklenmesidir. Sıfır içeren bir giriş de başarılı sonuç örnekleri arasındadır; sonuçta ilgili konumda sıfır değeri ve seçilen birim görülür.

Sonucu okurken aracın yalnızca kenar yuvarlatma bildirimini ürettiğini unutmayın. Bu çıktı tek başına tamamlanmış bir stil dosyası değildir. Ayrıca verilen değer veya birim metninin doğrulandığı, dönüştürüldüğü ya da belirli bir birim listesiyle sınırlandığı belirtilmemiştir. Bu yüzden bildirimi kullanacağınız CSS bağlamında, özellikle birim metninin ve dört değerin kendi beklentinize uyduğunu ayrıca inceleyin.

Uygulamalı örnek

Asimetrik bir kart tasarımında üst sol, üst sağ, alt sağ ve alt sol köşelere sırasıyla 12, 8, 4 ve 0 değerlerini vermek istiyorsunuz.

Dört köşe alanına sırasıyla 12, 8, 4 ve 0 yazın; birim olarak rem seçin ve üretim işlemini başlatın.

Sonuç, border-radius: 12rem 8rem 4rem 0rem; biçiminde, dört değeri verilen sırayla ve rem birimiyle içeren bir CSS bildirimidir.

Sınırlamalar

Sonuç yalnızca oluşturulan border-radius bildirimidir. Verilen değer ve birim metninin doğrulandığı, normalleştirildiği veya sabit birim listesiyle sınırlandığı belirtilmemiştir.

Sık yapılan hatalar

Köşe değerlerini üst sol, üst sağ, alt sağ ve alt sol sırasını gözetmeden girmek, değerlerin beklenmeyen köşelere karşılık gelmesine yol açabilir. Alanları bu sıraya göre yeniden düzenleyin ve seçtiğiniz birimin dört değerin sonunda göründüğünü kontrol edin.

Sık sorulan sorular

Dört köşeye aynı yarıçap değeri nasıl verilir?

Dört köşe alanına aynı değeri girin. Araç bu değerleri üst sol, üst sağ, alt sağ ve alt sol sırasıyla oluşturulan bildirime yerleştirir.

Bir köşe alanını boş bırakırsam ne olur?

Bir köşe alanı boş bırakılırsa o köşe için 10 kullanılır. Birim belirtilmezse oluşturulan bildirimin içinde px yer alır.

Seçilen birim sonuçta nasıl kullanılır?

Seçtiğiniz birim metni her köşe değerinin sonuna eklenir. Sonucu kullanmadan önce dört değerin sonunda birimin beklediğiniz biçimde göründüğünü kontrol edin.