Bu sayfa, Cloud Translation API ile çevrilmiştir.

CSS Şekillerini Kullanmaya Başlama

İçeriği özel yollar etrafında sarmalama

Razvan Caliman

Web tasarımcıları uzun süredir dikdörtgenin kısıtlamaları içinde tasarım yapmak zorunda kalıyordu. Dikdörtgen olmayan düzenlerde yapılan çoğu reklam öğesi girişimi hüsranla sonuçlandığından, web'deki içeriklerin çoğu hâlâ basit kutulara hapsolmuş durumda. Bu durum, Chrome 37'den itibaren kullanılabilen CSS Şekilleri'nin kullanıma sunulmasıyla değişecek. CSS Şekiller, web tasarımcılarının içeriği daireler, elipsler ve poligonlar gibi özel yollar etrafına sarmasına olanak tanır. Böylece, dikdörtgenin kısıtlamalarından kurtulabilirler.

Şekiller manuel olarak tanımlanabilir veya resimlerden çıkarılabilir.

Çok basit bir örneğe bakalım.

Şeffaf bölümleri olan bir resmi ilk kez kayan hale getirirken içeriğin sarmalanıp boşlukları doldurmasını beklerken öğenin etrafında dikdörtgen sarma şeklinin kalmasından hayal kırıklığına uğramış olabilirsiniz. Bu sorunu çözmek için CSS Şekilleri kullanılabilir.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

shape-outside: url(image.png) CSS beyanı, tarayıcıya resimden bir şekil çıkarmasını söyler.

shape-image-threshold mülkü, şekli oluşturmak için kullanılacak piksellerin minimum opaklık düzeyini tanımlar. Değeri 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında olmalıdır. Dolayısıyla shape-image-threshold: 0.5, şekli oluşturmak için yalnızca opaklığı% 50 ve üzeri olan piksellerin kullanılacağı anlamına gelir.

Burada float mülkü önemlidir. shape-outside mülkü, içeriğin etrafına sarıldığı alanın şeklini tanımlar. Ancak float olmadan şeklin etkilerini görmezsiniz.

Öğelerin float değerlerinin karşısında bir kayan nokta alanı var. Örneğin, kahve fincanı resmi içeren bir öğe sola kaydırılıyorsa kaydırma alanı fincanın sağında oluşturulur. Her iki tarafı boşluk olan bir resim tasarlayabilseniz de içerik, float mülkü tarafından belirlenen karşı taraftaki şeklin etrafında sarılır (sol veya sağ). İçerik hiçbir zaman her iki tarafta da sarılmaz.

Gelecekte, CSS hariç tutmalarının kullanıma sunulmasıyla birlikte, sabitlenmemiş öğelerde shape-outside kullanılabilir.

Şekilleri manuel olarak oluşturma

Şekilleri resimlerden ayıklamanın yanı sıra manuel olarak da kodlayabilirsiniz. Şekil oluşturmak için birkaç işlevsel değer arasından seçim yapabilirsiniz: circle(), ellipse(), inset() ve polygon(). Her şekil işlevi bir koordinat kümesi kabul eder ve koordinat sistemini oluşturan bir referans kutusuyla eşlenir. Referans kutuları hakkında daha fazla bilgiyi birazdan vereceğiz.

circle() işlevi

Bir daire şekli değerinin tam gösterimi circle(r at cx cy) şeklindedir. Burada r dairenin yarıçapı, cx ve cy ise X ekseni ve Y eksenindeki daire merkezinin koordinatlarıdır. Daire merkezinin koordinatları isteğe bağlıdır. Bu değerleri atlarsanız varsayılan olarak öğenin merkezi (köşegenlerinin kesişimi) kullanılır.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

Yukarıdaki örnekte içerik, dairesel bir yolun etrafına sarılır. Tek bağımsız değişken 50%, dairenin yarıçapını belirtir. Bu durumda, yarıçap öğenin genişliğinin veya yüksekliğinin yarısına eşittir. Öğenin boyutları değiştirildiğinde daire şeklinin yarıçapı etkilenir. Bu, CSS şekillerinin nasıl duyarlı olabileceğine dair temel bir örnektir.

Devam etmeden önce kısa bir not: CSS Şekilleri'nin yalnızca bir öğenin etrafındaki yüzen alanın şeklini etkilediğini unutmayın. Öğenin arka planı varsa bu arka plan şekil tarafından kırpılmaz. Bu efekti elde etmek için CSS maskeleme özelliklerini (clip-path veya mask-image) kullanmanız gerekir. clip-path özelliği, CSS Şekilleri ile aynı gösterimi kullandığından değerleri yeniden kullanabileceğiniz için çok kullanışlıdır.

Bu dokümanda yer alan görsellerde, şekli vurgulamak ve efektleri anlamanıza yardımcı olmak için kırpma işlemi kullanılmıştır.

Yuvarlak şekle geri dönün.

Çember yarıçapı için yüzdeler kullanıldığında değer aslında biraz daha karmaşık bir formülle hesaplanır: sqrt(width^2 + height^2) / sqrt(2). Bu, öğenin boyutları eşit değilse ortaya çıkacak daire şeklini hayal etmenize yardımcı olacağından bunu anlamanız yararlıdır.

Tüm CSS birim türleri şekil işlevi koordinatlarında kullanılabilir: px, em, rem, vw, vh vb. İhtiyaçlarınıza uygun olan esnek veya katı bir plan seçebilirsiniz.

Dairenin merkezinin koordinatları için açık değerler ayarlayarak dairenin konumunu ayarlayabilirsiniz.

.element{
  shape-outside: circle(50% at 0 0);
}

Bu işlem, daire merkezini koordinat sisteminin ortasına yerleştirir. Koordinat sistemi nedir? Bu noktada referans kutularını kullanırız.

CSS Şekilleri için referans kutuları

Referans kutusu, öğenin etrafındaki sanal bir kutudur. Bu kutu, şekli çizmek ve konumlandırmak için kullanılan koordinat sistemini belirler. Koordinat sisteminin başlangıç noktası sol üst köşesidir. X ekseni sağa, Y ekseni ise aşağı doğru bakar.

shape-outside özelliğinin, içeriğin sarmalandığı yüzen alanın şeklini değiştirdiğini unutmayın. Yüzen alan, margin mülkü tarafından tanımlanan kutunun dış kenarlarına kadar uzanır. Buna margin-box denir ve açıkça belirtilmediği takdirde bir şekil için varsayılan referans kutusudur.

Aşağıdaki iki CSS beyanı aynı sonuçlara sahiptir:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Öğede henüz bir marj ayarlamadık. Bu noktada, koordinat sisteminin orijininin ve daire merkezinin öğenin içerik alanının sol üst köşesinde olduğunu varsayabiliriz. Kenarlık ayarladığınızda bu durum değişir:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

Koordinat sisteminin başlangıç noktası artık dairenin merkezi gibi öğenin içerik alanının dışında (100 piksel yukarı ve 100 piksel sola) yer alıyor. Çember yarıçapının hesaplanan değeri de margin-box referans kutusu tarafından oluşturulan koordinat sisteminin artan yüzeyini hesaba katmak için büyür.