Yollar, şekiller, kırpma ve maskeleme

HTML oluşturma, kutu modeli üzerine kuruludur ancak hayatta (ve web tasarımında) dikdörtgenlerden daha fazlası vardır. CSS, bir öğenin hangi alanlarının oluşturulacağını değiştirmenin birden fazla yolunu destekler. Böylece geliştiriciler, tüm şekil ve boyutları destekleyen tasarımlar oluşturabilir. Kırpma, geometrik şekillere izin verirken maskeleme, görünürlüğü piksel düzeyinde etkiler.

Yollar ve Şekiller

CSS, şekilleri tanımlamak için işlevleri kullanır. CSS İşlevleri modülünde işlevlerle ilgili genel bilgiler verilmektedir. Bu bölümde, CSS'de şekil oluşturmayı öğreneceksiniz. Aşağıdaki örneklerin tümünde, clip-path özelliğiyle oluşturduğunuz şekiller kullanılır. Bu özellik, görünür alanı yalnızca şeklin içindeki alanla sınırlar. Bu, öğelerin görsel olarak öğe kutusundan farklı olmasına olanak tanır. Kırpma konusunu daha ayrıntılı olarak ilerleyen bölümlerde ele alacağız.

CSS'de tanımlanan şekiller temel şekiller (ör. daireler, dikdörtgenler ve poligonlar) veya yollar (karmaşık ve bileşik şekilleri tanımlayabilir) olabilir.

Temel şekiller

circle() ve ellipse()

circle() ve ellipse() işlevleri, bir öğeye göre yarıçapları olan yuvarlak ve oval şekilleri tanımlar. circle() işlevi, bağımsız değişken olarak tek bir boyut veya yüzde kabul eder. Varsayılan olarak her iki işlev de şekli öğenin merkezine göre konumlandırır. Her ikisi de at anahtar kelimesinden sonra isteğe bağlı bir konum kabul eder. Bu konum, uzunluk, yüzde veya konumsal anahtar kelime olarak ifade edilebilir.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

Önceki örnekte, circle() işlevi kullanılarak oluşturulmuş dairesel bir kırpma yolu gösterilmektedir. 50% yarıçapının, öğenin tam genişliğinde bir daire oluşturduğunu unutmayın. ellipse() işlevi, şeklin yatay ve dikey yarıçaplarını temsil eden iki bağımsız değişkeni kabul eder.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

Önceki örnekte, ellipse() işlevi kullanılarak oluşturulmuş elips şeklinde bir kırpma yolu gösterilmektedir. %50 yarıçapın, öğenin tam genişliğinde bir elips oluşturduğunu unutmayın. Aşağıdaki örnekte, merkezi öğenin üst kısmında konumlandırılmış aynı elips gösterilmektedir.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() ve inset()

rect() ve inset() işlevleri, kenarlarının konumunu bir öğenin kenarlarına göre ayarlayarak dikdörtgen tanımlamanın farklı yollarını sunar. Bu özellik, öğenin varsayılan kutusundan görsel olarak farklı dikdörtgenler oluşturmanıza olanak tanır. İsteğe bağlı olarak, border-radius kısaltma özelliğiyle aynı söz dizimini kullanarak yuvarlak köşeli bir dikdörtgen oluşturmak için round anahtar kelimesini kabul ederler.

rect() işlevi, dikdörtgenin üst ve alt kenarlarının öğenin üst kenarına göre, sol ve sağ kenarlarının ise öğenin sol kenarına göre konumunu tanımlar. Bu işlev, üst, sağ, alt ve sol kenarları tanımlayan bağımsız değişkenler olarak dört boyut veya yüzde birimi kabul eder. Öğenin boyutu değiştiğinde ölçeklenmeyen veya öğe değişirken aynı oranları koruyan bir dikdörtgen istediğinizde rect() işlevini seçebilirsiniz.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

Önceki örnekte, rect() işlevi kullanılarak tanımlanmış dikdörtgen bir kırpma yolu gösterilmektedir. Boyutlar, şemada gösterildiği gibi öğenin üst ve sol kenarlarına göre belirlenir.

inset() işlevi, bir dikdörtgenin kenarlarının konumunu, bir öğenin her bir kenarından içeriye doğru olan mesafeyle tanımlar. Bu işlev, bağımsız değişken olarak bir ila dört boyut veya yüzde birimi kabul ederek birden fazla kenarı aynı anda tanımlamanıza olanak tanır. Öğeyle birlikte ölçeklenen bir dikdörtgen veya öğenin kenarlarından sabit bir mesafede bulunan bir dikdörtgen istediğinizde inset() işlevini seçebilirsiniz.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

Önceki örnekte, inset() işlevi kullanılarak tanımlanmış dikdörtgen bir kırpma yolu gösterilmektedir. Boyutlar, öğenin kenarlarına göre belirlenir.

rect() ve inset() işlevleri, border-radius kısaltılmış özelliğiyle aynı sözdizimini kullanarak yuvarlak köşeli bir dikdörtgen oluşturmak için isteğe bağlı olarak round anahtar kelimesini kabul eder. Aşağıdaki örnekte, daha önce gösterilen dikdörtgenlerin yuvarlatılmış versiyonları gösterilmektedir.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

Üçgen, beşgen, yıldız gibi diğer şekiller için polygon() işlevi, birden fazla noktayı düz çizgilerle birleştirerek şekiller oluşturmanıza olanak tanır. polygon() işlevi, iki uzunluk veya yüzde biriminden oluşan bir çift listesini kabul eder. Her çift, çokgendeki bir noktayı tanımlar: İlk değer, öğenin sol kenarından olan uzaklığı, ikinci değer ise öğenin üst kenarından olan uzaklığı ifade eder. Son nokta ilk noktayla birleştirilerek tamamlanacağından poligonu kapatmanız gerekmez.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

Önceki örnek, üç nokta tanımlayarak üçgen bir kırpma yolu oluşturur.

Varsayılan olarak, polygon() işlevi çakışan alanları dolu olarak oluşturur. Bu davranışı, dolgu kuralı adlı isteğe bağlı bir ilk bağımsız değişkenle değiştirebilirsiniz. Dolu ve boş alanlar arasında geçiş yapmak için dolgu kuralını evenodd olarak ayarlayın. Varsayılan doldurma kuralını kullanmak için nonzero olarak ayarlayın.

Önceki örnekte, düzgün çokgenler ve yıldız şekilleri oluşturmak için trigonometrik fonksiyonlarla kullanılan polygon() işlevi gösterilmektedir. Bu, bir öğenin içine sığan veya ortalanan mümkün olan en büyük düzgün çokgeni oluşturmaz. Bunu denemeniz için size bırakıyoruz. Bu örnekteki yıldız şekilleri, nonzero ve evenodd dolgu kurallarını da gösterir.

Karmaşık şekiller

Temel şekil işlevleri karmaşık bir şekli tanımlamak için yeterli olmadığında CSS, eğriler ve çizgiler gibi özellikleri tanımlamak için daha karmaşık bir söz dizimi kullanan işlevler sağlar. Bu işlevler, bileşik şekiller (ör. içinde delik olan bir daire gibi birden fazla şekilden oluşan şekiller) için de kullanışlıdır.

path()

path() işlevi, bir şekli tanımlamak için SVG yolu söz dizimi dizesini kabul eder. Bu sayede, şekli oluşturan çizgileri ve eğrileri açıklayan talimatlar kullanılarak karmaşık şekiller oluşturulabilir. SVG söz dizimini doğrudan düzenlemek karmaşık olabileceğinden, path() işleviyle şekil oluştururken söz dizimini dışa aktarabilen özel bir görsel düzenleyici kullanmanızı öneririz.

path() işlevi, CSS boyutlandırma birimlerini kullanmaz ve tüm değerler piksel olarak yorumlanır. Bu, yol işleviyle oluşturulan şekillerin öğenin veya kapsayıcının boyutuna duyarlı olmadığı anlamına gelir. path() öğesinin yalnızca sabit boyutlara sahip şekiller için kullanılması önerilir.

shape()

shape() işlevi, path() işlevine benzer şekilde bir şekli tanımlamak için komut söz dizimi kullanır. Ancak shape() işlev komutları yerel CSS'dir ve CSS boyut birimlerini kullanabilir. Bu sayede, shape() işlevi kullanılarak tanımlanan şekillerin boyutları duyarlı bir şekilde ayarlanabilir.

Önceki örnekte, kalp şekli ve ortasında delik olan bir daire tanımlamak için path() ve shape() işlevleri kullanılıyor. Örnekte her iki işlev için de aynı değer piksel cinsinden kullanılıyor ancak shape() işlevlerinde yüzdeler veya kapsayıcıya göre birimler gibi başka CSS boyutu birimleri de kullanılabilirdi.

Kırpma

Kırpma, bir öğenin hangi alanlarının görünür olduğunu tanımlar. Bu, bir dergiden resim kırpmaya benzer. clip-path özelliği, klip alanını tanımlamak için kullanılan yolu ayarlar.

Önceki bölümdeki örneklerde gördüğünüz gibi, temel şekil veya yol işlevlerinden herhangi biri clip-path olarak kullanılabilir. clip-path özelliği, yerleştirilmiş veya ayrı bir dosyada olabilen bir SVG clipPath öğesinde tanımlanan yolları da destekler.

Önceki şemada, bir resim öğesine clip-path eklenmesinin resmin görünür alanını nasıl değiştirdiği gösterilmektedir. Üstteki kırpma yolu circle() işlevini, alttaki ise SVG clipPath'yi kullanır. circle() işlevi kullanılarak oluşturulan dairenin varsayılan olarak öğenin ortasına yerleştirildiğini unutmayın.

clip-path özelliği yalnızca tek bir yolu kabul eder. Çakışmayan birden fazla şekil içeren bir öğeyi kırpmak için path() veya shape() işlevlerini kullanarak bileşik bir yol tanımlayın ya da SVG clipPath kullanın. Karmaşık senaryolar için başka bir seçenek de kırpma yerine maskeleme kullanmaktır. Bu konuyu sonraki bir bölümde ele alacağız.

Şekillerle kırpma

Temel bir şekil veya yol işlevi kullanarak kırpmak için clip-path özelliğini, önceki örneklerde olduğu gibi işlev tarafından döndürülen değere ayarlayın. Her işlev, kırpma şeklini öğeye göre farklı şekilde konumlandırır. Bu nedenle, her işlev için referansa bakın.

Önceki örnekte, iki öğeye .clipped sınıfı kullanılarak dairesel clip-path uygulanmıştır. clip-path öğesinin her öğeye göre konumlandırıldığını ve clip-path içindeki metnin şekli takip edecek şekilde yeniden akıtılmadığını unutmayın.

Kırpma yolunun referans kutusu

Varsayılan olarak, bir öğenin kırpma yolu öğenin kenarlığını içerir. Temel şekil işlevlerinden birini kullanırken klip yolunun referans kutusunu yalnızca kenarlık içindeki öğe alanını içerecek şekilde ayarlayabilirsiniz. Referans kutusu için geçerli değerler stroke-box (varsayılan) ve fill-box (yalnızca kenarlığın içindeki alanı dahil etmek için) değerleridir.

Önceki örnekte, her biri clip-path değerini ayarlamak için inset() işlevini kullanan, büyük (20px kenarlıklı) öğeler gösterilmektedir. Öğenin kenarlığına göre kırpılan öğe, kenarlığın bir kısmını göstermeye devam eder. Kenarlık içindeki alana göre kırpılan öğeler, aynı iç kenar değeriyle bile daha küçük olur ve kenarlık göstermez.

Grafiklerle kırpma

Kırpma yolu, HTML belgesine yerleştirilmiş veya harici olarak referans verilmiş bir SVG belgesinde tanımlanabilir. Bu, grafik programlarında oluşturulan karmaşık kırpma yollarını veya birden fazla şekli birleştiren kırpma yollarını tanımlamak için yararlı olabilir.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

Önceki örnekte, kitten-clip-shape id değerine sahip clipPath öğesi, <img> öğesine uygulanır. Bu durumda SVG belgesi HTML'ye yerleştirilir. SVG belgesi kitten-clipper.svg adlı harici bir dosya ise clipPath yerine url(kitten-clipper.svg#kitten-clip-shape) olarak referans verilir.

Maskeleme

Maskeleme, bir öğenin hangi alanlarının gösterileceğini veya gizleneceğini tanımlamak için kullanılan başka bir yöntemdir. Kırpma, temel şekilleri veya yolları kullanırken maskeleme, görünürlüğü belirlemek için bir resimdeki ya da gradyandaki pikselleri kullanır. Maskeleme, kırpmanın aksine bir öğenin alanlarının kısmen şeffaf olmasına olanak tanır. Çeşitli efektler oluşturmak için bir öğeye birden fazla maske resmi uygulanabilir.

Maske uygulamak için mask-image özelliğini ayarlayın. Bu özellik, bir SVG belgesindeki bir veya daha fazla resmi, gradyanı ya da <mask> öğelerine yapılan referansları kabul eder. Birden fazla maske resmi virgülle ayrılarak uygulanabilir.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

Önceki örnekte, .my-element doğrusal bir gradyanın ardından PNG görüntüsü kullanılarak maskelenmiştir. Son maskeyi oluşturmak için varsayılan olarak birden fazla maske birlikte eklenir.

Önceki örnekte, bir veya daha fazla maske uygulanmış bir resim gösterilmektedir. Maskelerin nihai efekti oluşturmak için nasıl bir araya geldiğini görmek için her maskeyi açıp kapatın.

Alfa ve parlaklık maskelemesi karşılaştırması

Resmin alpha veya luminance kısmını kullanarak maske uygulayabilirsiniz. alpha temelinde maskeleme yapıldığında, maske resmindeki her pikselin şeffaflığı öğeye uygulanır ve bu pikselin renk bilgileri yoksayılır. luminance temel alınarak maskeleme yapıldığında, hem şeffaflık hem de her pikselin değeri (ne kadar parlak veya karanlık olduğu) öğeye uygulanır. Parlaklığa göre maskeleme, daha parlak renkleri görünür, daha koyu renkleri ise görünmez olarak değerlendirir.

Maskeleme modunu ayarlamak için mask-mode özelliğini kullanın. Varsayılan olarak mask-mode özelliği match-source olarak ayarlanır. Bu özellik, maske resminin türüne göre bir mod belirler. Görseller ve gradyanlar için varsayılan değer alpha olur. SVG maskelerinde bu özellik, <mask> öğesinin mask-type özelliğinin değerine veya mask-type tanımlanmamışsa luminance değerine ayarlanır.

Önceki örnekte, farklı renk ve alfa değerlerini gösteren bir test deseni maske olarak kullanılıyor. mask-mode simgesine dokunarak alpha modunun şeffaflığa, luminance modunun ise hem renk parlaklığına hem de şeffaflığa dayalı olduğunu görebilirsiniz.

Ek maskeleme özellikleri

CSS, maskelerinizin davranışını hassas bir şekilde ayarlamak için ek özellikler sağlar. Özelliklerin her biri, virgülle ayrılmış bir değer listesini kabul eder. Bu değerler, mask-image özelliği tarafından ayarlanan maske listesiyle eşleştirilir. Maskelerden daha az değer varsa her maske için bir değer ayarlanana kadar liste tekrarlanır. Maskelerden daha fazla değer varsa fazla değerler atılır.

Maske kısaltması

Kısa maske özelliğiyle birden fazla maske özelliğini aynı anda ayarlayabilirsiniz. Bu, her maskenin tüm özelliklerini birlikte gruplandırarak birden fazla maske ayarlamayı kolaylaştırabilir. Kısaltılmış maske, şu özelliklerin sırayla ayarlanmasına eşdeğerdir: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip ve mask-composite. Her özelliğin dahil edilmesi gerekmez. Dahil edilmeyen özellikler ilk değerlerine sıfırlanır. Maske başına sekiz mülke kadar destek sunan bu özellik için tam bir referans bulundurmak faydalı olabilir.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

Yukarıdaki örnekte, her sınıfa iki maske uygulanmıştır. Birincisinde ayrı özellikler kullanılırken ikincisinde mask kısaltması kullanılır. Her iki stil de birbirine eşdeğerdir.

Kaydırılan öğelerin etrafındaki akan metin

Bir öğeyi kırptığınızda veya maskelediğinizde yalnızca kutusundaki görünür alan değişir, ancak kutunun kendisi değişmez. Bu, kaydırılan bir öğenin, belge akışını öğenin görünür kısımlarına göre değil, orijinal sınırlayıcı kutusuna göre etkileyeceği anlamına gelir. Bir öğenin etrafındaki akışı tanımlamak için klip yoluyla birlikte shape-outside özelliğini kullanın.

shape-outside özelliği, içeriğin bir öğenin etrafında akacağı şekli tanımlar. Bu şekil, temel şekil işlevlerinden herhangi biri olabilir ancak path() veya shape() işlevleri kullanılarak tanımlanan şekiller ya da bir SVG belgesinde tanımlanan clipPath olamaz.

shape-outside özelliği, resim veya gradyan da kabul eder. Maskelemede olduğu gibi, şeklin sınırları da resmin veya gradyanın şeffaflığına göre belirlenir. shape-image-threshold özelliği, şeklin içinde hangi şeffaflık düzeylerinin dikkate alınacağını belirler.

Animasyondaki şekiller

clip-path özelliğine animasyon ekleme

Şekilden şekle geçiş yaparak clip-path özelliğine animasyon uygulayabilirsiniz. Sorunsuz animasyonlar oluşturmak için her anahtar karede aynı şekil işlevini kullanmanız gerekir. polygon() veya shape() işlevleri kullanılırken her anahtar karede aynı sayıda nokta kullanılmalıdır.

Önceki örnekte, bir öğenin clip-path özelliği, polygon() işlevi kullanılarak tanımlanan beşgen ve yıldız şekli arasında geçiş yapıyor. Bu örnekte, animasyonlu noktaların nasıl çakışan alanlar oluşturduğunu göstermek için evenodd dolgu kuralı kullanılmaktadır.

offset-path ile animasyon oluşturma

Ayrıca, bu şekil işlevleriyle oluşturulan yollar boyunca öğeleri animasyon haline getirebilirsiniz. offset-path özelliği, yol olarak kullanılacak şekli, offset-distance özelliği ise bu yol üzerindeki konumu ayarlar. Düz bir çizgi boyunca animasyon oluşturmak için ray() işlevini offset-path özelliğiyle birlikte de kullanabilirsiniz.

Önceki örnekte hem clip-path hem de offset-path için aynı poligonun kullanılması gösterilmektedir. Animasyonda, küçük yıldızları büyük yıldızın clip-path olarak kullandığı çokgen boyunca hareket ettirmek için offset-distance kullanılır.

Anlayıp anlamadığınızı kontrol etme