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

CSS Şekillerini Kullanmaya Başlama

Özel yolların etrafındaki içeriği sarmalama

Razvan Caliman

Uzun bir süredir, web tasarımcıları dikdörtgenin sınırları içinde içerik oluşturmak zorunda kalmıştır. Web'deki çoğu içerik hâlâ basit kutularda hapsolmuş durumda. Dikdörtgen olmayan düzenlere karışan çoğu yaratıcı girişim, hayal kırıklığıyla son buluyor. Bu durum, Chrome 37 sürümünden itibaren kullanıma sunulan CSS Şekilleri'nin kullanıma sunulmasıyla birlikte değişecek. CSS Şekilleri, web tasarımcılarının içeriği özel yolların (daire, elips ve çokgenler) etrafında sarmasına olanak tanıyarak dikdörtgenin kısıtlamalarından kurtulmalarını sağlar.

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

Çok basit bir örneği inceleyelim.

İçeriğin boşlukları doldurmasını ve boşluğu doldurmasını umarak şeffaf parçalar içeren bir resmi ilk kez hareket ettirirken öğenin etrafında sürekli olarak kalan dikdörtgen sarmalama şekli sizi hayal kırıklığına uğratabilir. 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 bildirimi, tarayıcıya resimden bir şekil çıkarmasını bildirir.

shape-image-threshold özelliği, ş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ındaki aralıkta olmalıdır. Dolayısıyla, shape-image-threshold: 0.5, şekli oluşturmak için yalnızca% 50 ve üzeri opaklığa sahip piksellerin kullanılacağı anlamına gelir.

Bu durumda float özelliği çok önemlidir. shape-outside özelliği, içeriğin sarmalanacağı alanın şeklini kayma olmadan tanımlar ancak şeklin etkilerini görmezsiniz.

Öğelerin, float değerlerinin karşı tarafında bir kayan alan vardır. Örneğin, kahve fincanı resmi içeren bir öğe sola doğru kaydırılıyorsa bardağın sağ tarafında kayan bir alan oluşturulur. Her iki tarafında boşluklar olan bir görüntü üzerinde çalışabilseniz bile, içerik yalnızca bolluk özelliği tarafından belirtilen karşı tarafta (solda veya sağda) şeklin etrafını sarmalar; her ikisi birden olmaz.

İleride, kullanıma sunulan CSS Hariç Tutmaları sayesinde kayan olmayan öğelerde shape-outside kullanılabilecektir.

Manuel olarak şekil oluşturma

Resimlerden şekilleri ayıklamanın yanı sıra, bunları 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 dizi koordinat kabul eder ve koordinat sistemini oluşturan bir başvuru kutusuyla eşleştirilir. Birazdan referans kutuları hakkında daha fazla bilgi edinebilirsiniz.

daire() işlevi

Çember şekli değerinin tam gösterimi circle(r at cx cy) şeklindedir; burada r dairenin yarıçapıdır, cx ve cy ise X ekseni ve Y eksenindeki daire merkezinin koordinatlarıdır. Çember merkezinin koordinatları isteğe bağlıdır. Bunları çıkarırsanız öğenin merkezi (köşegenlerinin kesişimi) varsayılan olarak kullanılır.

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

Yukarıdaki örnekte, içerik, dairesel bir yolun dışına çıkar. Tek bağımsız değişken 50%, dairenin yarıçapını belirtir ve bu özel örnekte, öğenin genişliği veya yüksekliğinin yarısına karşılık gelir. Öğenin boyutlarının değiştirilmesi daire şeklinin yarıçapını etkiler. Bu, CSS Şekillerinin nasıl duyarlı olabileceğini gösteren temel bir örnektir.

Devam etmeden önce, CSS Şekillerinin yalnızca bir öğenin etrafındaki kayan alanın şeklini etkilediğini unutmayın. Öğenin arka planı varsa şekle göre kırpılmaz. Bu efekti elde etmek için CSS Maskeleme'deki özellikleri (clip-path veya mask-image) kullanmanız gerekir. clip-path özelliği, CSS Şekilleri ile aynı gösterimi kullandığından değerleri yeniden kullanabilmeniz için kullanışlıdır.

Bu dokümandaki resimlerde, şekli vurgulamak ve efektleri anlamanıza yardımcı olmak için kırpma kullanılmıştır.

Daire şekline dönün.

Çemberin yarıçapı için yüzdeler kullanılırken, değer aslında biraz daha karmaşık bir formülle hesaplanır: karekök(genişlik^2 + yükseklik^2) / kare(2). Bu yöntemi anlamak, öğenin boyutları eşit olmadığında ortaya çıkacak daire şeklinin nasıl olacağını hayal etmenize yardımcı olur.

Tüm CSS birim türleri şekil işlevi koordinatlarında kullanılabilir: px, em, rem, vw, vh vb. İhtiyaçlarınız için yeterince esnek veya sert olan modeli seçebilirsiniz.

Çemberin konumunu, merkezinin koordinatları için açık değerler ayarlayarak ayarlayabilirsiniz.

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

Böylece, çember merkezi koordinat sisteminin merkezinde konumlandırılır. Koordinat sistemi nedir? Bu noktada referans kutularını kullanıma sunuyoruz.

CSS Şekilleri için referans kutuları

Referans kutusu öğenin etrafında sanal bir kutudur. Bu kutu, şekli çizmek ve konumlandırmak için kullanılan koordinat sistemini oluşturur. Koordinat sisteminin başlangıcı sol üst köşesindedir. X ekseni sağı, Y ekseni de aşağıyı gösterir.

shape-outside işlevinin, içeriğin sarılacağı kayan alanın şeklini değiştirdiğini unutmayın. Kayan alan, margin özelliği tarafından tanımlanan kutunun dış kenarlarına uzanır. Bu, margin-box olarak adlandırılır ve açıkça belirtilmediği takdirde şekiller için varsayılan referans kutusudur.

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

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

Öğe için henüz bir kenar boşluğu belirlemedik. Bu noktada, koordinat sisteminin başlangıç noktasıyla çember merkezinin, öğenin içerik alanının sol üst köşesinde olduğunu varsaymak güvenlidir. Bir kenar boşluğu ayarladığınızda bu durum değişir:

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

Koordinat sisteminin kökeni, dairenin merkezi gibi, şimdi öğenin içerik alanının dışındadır (100 piksel yukarı ve 100 piksel sol). Çember yarıçapının hesaplanan değeri de margin-box referans kutusu tarafından oluşturulan koordinat sisteminin artan yüzeyini hesaba katacak şekilde büyütülür.