Görsel Doku İçeriği

Web özellikleri: Maskeler

Genel Bakış

Bir öğeye gerçekçi yıpranma veya doku desenleri (ör. grunge, parazit veya kağıt dokusu) uygulamak için tekrarlanan bir doku görüntüsüyle CSS Maskeleme (mask-image) kullanın. Bu sayede, içeriğin üzerine doku yerleştirmek yerine içeriğin bazı kısımlarını yarı şeffaf hale getirerek içeriğin kendisinin dokulu görünmesini sağlayabilirsiniz. Bu sayede daha gerçekçi bir fiziksel malzeme görünümü elde edilir.

Uygulama

Doku deseni uygulamak için:

Gerçekçi dokular için en yaygın yöntem budur.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

2. yöntem: Geometrik desenler için CSS gradyanlarını kullanma

CSS gradyanlarını kullanarak desenler oluşturabilirsiniz. Bu, bağımsız bir dosyadır ve harici resim dosyaları gerektirmez.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Alfa ve Parlaklık Maskeleme Modları

CSS maskeleri varsayılan olarak mask-mode: match-source kullanır. Bu, tarayıcının, sağladığınız kaynak türüne göre maskenin alfa kanalını (şeffaflık) mı yoksa parlaklığını mı kullanacağına otomatik olarak karar verdiği anlamına gelir:

Maske Kaynak Türü Varsayılan Maske Modu Maskeleme Davranışı
Satır içi SVG <mask> öğesi luminance Opaklık, renklerin parlaklığına göre belirlenir. Beyaz içeriği gösterir, siyah gizler ve gri yarı şeffaflık oluşturur.
Doğrudan resim dosyası (ör. PNG, SVG dosyası) alpha Opaklık, şeffaflığa göre belirlenir. Opak kısımlar içeriği gösterir, şeffaf kısımlar ise gizler.
CSS Gradient alpha Opaklık, şeffaflığa göre belirlenir. Opak renkler (black gibi) içeriği gösterir, şeffaf renkler ise gizler.

Yedek stratejiler

Tarayıcı mask-image veya ön ekli sürümü desteklemiyorsa:

  • Öğe, doku olmadan (temiz ve düz dolgu) gösterilir.
  • İçeriğin doku olmadan da okunabilir olduğundan emin olun (progresif geliştirme).
  • Dokuyu simüle etmek için yedek olarak arka plan resmi veya yer paylaşımı kullanabilirsiniz ancak bu, içeriğin şeffaflığını etkilemez.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}