CSS dünyası son zamanlarda şekillendirme konusunda büyük adımlar atıyor. Geçtiğimiz aylarda shape() fonksiyonu ve corner-shape özelliğiyle tanışmıştık. Şimdi ise sırada border-shape var! Peki bu yeni özellik tam olarak ne işe yarıyor ve neden bu kadar heyecan verici? Gelin birlikte keşfedelim.
Öncelikle, shape() ve corner-shape kavramlarını kısaca hatırlayalım. shape() fonksiyonu, SVG sözdizimini kullanarak CSS'de kolayca şekiller oluşturmamızı sağlıyor. clip-path ve offset-path için yeni bir değer olarak karşımıza çıkan bu fonksiyon, path() yöntemine göre çok daha basit bir kullanım sunuyor. Hatta herhangi bir SVG şeklini CSS şekline dönüştürebilen bir dönüştürücü bile mevcut. corner-shape ise border-radius ile birlikte çalışarak köşelerin şeklini belirlememize olanak tanıyor. round, scoop, bevel, notch ve squircle gibi önceden tanımlı değerlerle köşeleri şekillendirebiliyoruz.
corner-shape'in en büyük avantajı, şekillendirilmiş köşelere border ve box-shadow gibi dekoratif özellikler ekleyebilmesi. clip-path veya mask ile oluşturduğumuz şekillerde kenarlık eklemek neredeyse imkansızken, corner-shape bu sorunu çözüyor. Ancak corner-shape yalnızca köşeleri şekillendirmekle sınırlı. Ya tüm elementi şekillendirmek istersek? İşte tam da bu noktada border-shape devreye giriyor.
Gelecekte Ne Bekleniyor?
border-shape özelliği, clip-path ile aynı değerleri kabul ediyor, hatta yeni shape() fonksiyonunu da destekliyor. Ancak border-shape'i clip-path'ten ayıran en önemli fark, dekoratif özelliklerin şekli takip etmesi. clip-path, elementi ve tüm dekorasyonlarını kırparken, border-shape elementi şekillendiriyor ve border, box-shadow, outline gibi özelliklerin bu şekle uyum sağlamasına izin veriyor. Yani CSS şekillerine kenarlık eklemek artık çok kolay!
Sistem Güvenliği
border-shape kullanımı oldukça basit. clip-path ile nasıl şekil oluşturacağınızı biliyorsanız, zaten işin yarısını halletmişsiniz demektir. Tek yapmanız gereken clip-path özelliğini border-shape ile değiştirmek. Örneğin: border-shape: polygon(0 0, 100% 0, 50% 100%); gibi bir kod ile üçgen bir element oluşturabilir ve buna border ekleyebilirsiniz. Ayrıca iki farklı şekil değeri kullanarak 'kesik' (cutout) şekiller de oluşturabilmek mümkün. Örneğin, border-shape: inset(0) polygon(...); ile dışarıda dikdörtgen bir çerçeve, içeride ise istediğiniz şekli elde edebilirsiniz.
border-shape'in bir diğer güzel yanı, yalnızca kenarlık değil, aynı zamanda border-only (sadece kenarlık) şekiller oluşturmaya da imkan tanıması. border özelliğini kullanarak şeklin yalnızca çerçevesini görüntüleyebilirsiniz. Bu, özellikle logo, ikon veya vurgu öğeleri tasarlarken çok kullanışlı. Ayrıca, yuvarlak kesik şekiller oluşturmak da oldukça basit: border-shape: circle() polygon(...); yeterli.
Unutmamak gerekir ki, border-shape özelliği henüz deneysel aşamada ve şu an için yalnızca Chromium tabanlı tarayıcılarda (Chrome, Edge, Opera) destekleniyor. Ancak bu, özelliğin potansiyelini keşfetmek için bir engel değil. Gelecekte diğer tarayıcıların da desteğiyle birlikte border-shape, CSS şekillendirme konusunda devrim yaratabilir.
Nasıl Önlem Alınmalı?
Sonuç olarak, border-shape özelliği, CSS ile şekil oluşturma konusunda yeni ufuklar açıyor. clip-path'in sınırlamalarını aşarak, şekillere kenarlık ve diğer dekoratif özellikleri kolayca eklememizi sağlıyor. Henüz yaygın olmasa da, bu özelliği öğrenmek ve denemek, gelecekteki projelerinizde size büyük avantaj sağlayacak. CSS şekillerine meraklıysanız, border-shape'i yakından takip etmenizi öneririm!
Kaynak: css-tricks.com
