Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

CSS Şekilleri'ni kullanmaya başlama

İçeriği özel yolların etrafına sarmalama

Razvan Caliman

Web tasarımcıları uzun bir süre boyunca dikdörtgenin kısıtlamaları dahilinde tasarım yapmak zorunda kaldı. Web'deki çoğu içerik hâlâ basit kutulara hapsolmuş durumda. Bunun nedeni, dikdörtgen olmayan sayfa düzeniyle ilgili çoğu yaratıcı girişimin hüsranla sonuçlanmasıdır. Chrome 37'den itibaren kullanılabilen CSS Şekilleri'nin kullanıma sunulmasıyla bu durum değişecek. CSS Şekilleri, web tasarımcılarının içeriği daire, elips ve çokgen gibi özel yolların etrafına sarmasına olanak tanır. Böylece dikdörtgenin kısıtlamalarından kurtulurlar.

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

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

Belki de şeffaf parçalar içeren bir resmi ilk kez kaydırırken içeriğin boşlukları sarmasını ve doldurmasını bekleyerek benim kadar saf davrandınız. Ancak öğenin etrafındaki dikdörtgen sarmalama şeklinin devam etmesi sizi hayal kırıklığına uğrattı. CSS Şekilleri bu sorunu çözmek için 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ı söyler.

shape-image-threshold özelliği, şekli oluşturmak için kullanılacak piksellerin minimum opaklık seviyesini tanımlar. Değeri 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında olmalıdır. Bu nedenle, shape-image-threshold: 0.5, şekli oluşturmak için yalnızca% 50 ve üzeri opaklığa sahip piksellerin kullanılacağı anlamına gelir.

Burada float özelliği önemlidir. shape-outside özelliği, içeriğin etrafını saracağı alanın şeklini tanımlarken kayan öğe olmadan şeklin etkilerini göremezsiniz.

Öğelerin float değerinin karşı tarafında bir kayan alan vardır. Ö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ında da boşluklar olan bir resim tasarlayabilseniz de içerik, yalnızca kayan öğe özelliği tarafından belirlenen karşı taraftaki şekli (sol veya sağ, hiçbir zaman her ikisi birden değil) sarar.

Gelecekte, CSS Hariç Tutmalar'ın kullanıma sunulmasıyla birlikte, kaydırılmayan öğelerde shape-outside kullanmak mümkün olacaktır.

Şekilleri manuel olarak oluşturma

Resimlerden şekil çıkarmanı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 koordinat kümesini kabul eder ve koordinat sistemini oluşturan bir referans kutusuyla eşleştirilir. Referans kutuları hakkında daha fazla bilgiyi birazdan vereceğiz.

circle() işlevi

Daire şekli değerinin tam gösterimi circle(r at cx cy) şeklindedir. Burada r dairenin yarıçapı, cx ve cy ise daire merkezinin X ve Y eksenindeki koordinatlarıdır. Daire merkezinin koordinatları isteğe bağlıdır. Bunları 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 dışını sarar. Tek bağımsız değişken 50%, dairenin yarıçapını belirtir. Bu özel durumda, öğenin genişliğinin veya yüksekliğinin yarısına karşılık gelir. Öğenin boyutlarını değiştirmek, daire şeklinin yarıçapını etkiler. Bu, CSS şekillerinin nasıl duyarlı olabileceğine dair basit bir örnektir.

Devam etmeden önce kısa bir bilgi verelim: CSS Şekilleri'nin yalnızca bir öğenin etrafındaki kayan alanın şeklini etkilediğini unutmayın. Öğenin arka planı varsa şekil tarafından 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 şekilleriyle aynı gösterimi kullandığından değerleri yeniden kullanabilirsiniz. Bu nedenle, bu özellik oldukça kullanışlıdır.

Bu belgedeki görsellerde, şekli vurgulamak ve efektleri anlamanıza yardımcı olmak için kırpma kullanılmıştır.

Daire şekline dönelim.

Daire yarıçapı için yüzdeler kullanıldığında değer aslında biraz daha karmaşık bir formülle hesaplanır: sqrt(genişlik^2 + yükseklik^2) / sqrt(2). Bu bilgiyi bilmek, öğenin boyutları eşit olmadığında ortaya çıkacak daire şeklini tahmin etmenize yardımcı olur.

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

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

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

Bu işlem, dairenin merkezini koordinat sisteminin başlangıç noktasına yerleştirir. Koordinat sistemi nedir? Referans kutularını burada kullanırız.

CSS şekilleri için referans kutuları

Referans kutusu, öğenin etrafındaki sanal bir kutudur. Şekli çizmek ve konumlandırmak için kullanılan koordinat sistemini oluşturur. Koordinat sisteminin başlangıç noktası sol üst köşededir. X ekseni sağa, Y ekseni ise aşağıya doğru uzanır.

shape-outside özelliğinin, içeriğin etrafını saracağı kayan alanın şeklini değiştirdiğini unutmayın. Kayan alan, margin özelliği tarafından tanımlanan kutunun dış kenarlarına kadar uzanır. Buna margin-box denir ve açıkça belirtilmediği takdirde bir şeklin varsayılan referans kutusudur.

Aşağıdaki iki CSS beyanı aynı sonuçları verir:

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

Öğede henüz bir kenar boşluğu ayarlamadık. Bu noktada, koordinat sisteminin başlangıç noktasının ve daire merkezinin, öğenin içerik alanının sol üst köşesinde olduğunu varsaymak güvenlidir. Bir marj belirlediğinizde bu durum değişir:

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

Koordinat sisteminin başlangıç noktası artık öğenin içerik alanının dışında (100 piksel yukarıda ve 100 piksel solda) yer alır. Dairenin merkezi de aynı şekilde yerleştirilir. Daire yarıçapının hesaplanan değeri, margin-box referans kutusu tarafından oluşturulan koordinat sisteminin artan yüzeyini hesaba katmak için de büyür.