CSS'nin yeni `shape()` fonksiyonu nasıl kullanılır: kısa özet

• CSS shape() fonksiyonu Chromium ve WebKit tarayıcılarında desteklenmeye başladı
• Mevcut path() yaklaşımından farklı olarak, daha okunabilir CSS söz dizimi ve birimleriyle karmaşık şekiller tanımlamayı mümkün kılıyor
• clip-path içinde karmaşık biçimler oluştururken SVG koordinatları yerine İngilizce komut tabanlı bir yaklaşımla uygulama yapılabiliyor
• line, arc, curve gibi yeni komutlarla çizgiler, eğriler ve arklar kısa ve anlaşılır şekilde yazılabiliyor
• shape() için animasyon desteği henüz sınırlı, ancak hover/focus'a tepki veren dinamik değişiklikler mümkün

---

Genel Bakış

• CSS shape() fonksiyonu, clip-path ile birlikte kullanılarak tarayıcıda karmaşık şekil kırpmayı mümkün kılan bir özellik
• Daha önce circle, ellipse, polygon gibi temel şekiller mümkündü, ancak serbest biçimli şekiller yalnızca path() ile yapılabiliyordu
• path() içinde SVG koordinatları ve komutlarının aynen girilmesi gerektiğinden okunabilirlik düşüyor ve öğrenme eğrisi yükseliyordu

shape() fonksiyonunun özellikleri

• CSS tarzında vektör şekiller oluşturmayı mümkün kılar
• Başlangıç noktası yön anahtar sözcükleriyle (from top left) veya koordinat değerleriyle (from 0 0) belirlenir
• Şekil bir dizi komuttan oluşur. Örnekler: line, vline, arc, curve, smooth

Temel komutların açıklaması

• line
  • Anlamı: başlangıç noktasından itibaren bir çizgi çizer
  • Kullanım: by anahtar sözcüğüyle göreli konum belirtilir
  • Örnek: line by -2px 3px
• vline
  • Anlamı: dikey bir çizgi çizer
  • Kullanım: mutlak konum için to, göreli konum için by kullanılır
  • Örnek: vline to 50px
• hline
  • Anlamı: yatay bir çizgi çizer
  • Kullanım: mutlak konum için to, göreli konum için by kullanılır
  • Örnek: hline to 95%
• arc
  • Anlamı: eliptik bir eğri çizer
  • Kullanım:
    • to: arkın bitiş noktası
    • with: arkın eğim yönü (yatay/dikey)
    • of: arkın ait olduğu elipsin yarıçapı (yatay/dikey)
  • Örnek: arc to 10% 50% of 1%
• curve
  • Anlamı: bir Bézier eğrisi çizer
  • Kullanım:
    • to: eğrinin bitiş noktası
    • with: eğrinin kontrol noktası (eğriliği ayarlar)
  • Örnek: curve to 0% 100% with 50% 0%
• smooth
  • Anlamı: yumuşak bir eğri (bağlantılı Bézier eğrisi) çizer
  • Kullanım:
    • to: bitiş noktası
    • by: göreli koordinat
    • with: kontrol noktası

Diğer notlar

• shape() hover/focus durumlarında dinamik olarak değiştirilebilir
• Mevcut tarayıcılarda transition animasyonları çalışmıyor
• calc() hesaplama fonksiyonu da kullanılabiliyor

Referans bağlantıları

• Resmî spesifikasyon