Yükleniyor...

CSS Maskeleme

Optional Advanced az önce gazete sütunları döktü. Bu oturum başka bir isteğe bağlı araç: maske. Tek bir kutunun üzerine şablon koyarsın. Şablon doluysa fotoğraf veya rengi görürsün. Boşsa o kutu kaybolur. Bir yazıyı akışlara bölmezsin ve sprite yaprağında simge karolarını kaydırmazsın.

Doğrudan yanıt

CSS maskeleme, bir öğenin parçalarını mask-image ile gizler — PNG, SVG veya gradyan. Kesikten sprey boya düşün. mask-size, mask-repeat ve mask-position arka plan katmanı gibi davranır: cover, no-repeat, center. mask-mode alfa (maske dosyasının saydamlığı) veya parlaklık (açık karşı koyu) seçer. Kenar solmalıysa maske. Sert daire veya çokgen istiyorsan clip-path. Etiketler ve düğmeler tamamen görünür kalsın.

Maske neden sütun veya sprite değil

Çoklu sütun tek bir metin akışını parçalar. Sprite yaprağı background-position ile bir bit eşlemi kırpar ki birçok simge bir dosyayı paylaşsın. Maske ikisini de yapmaz. Öğе kutusunu tutmaya devam eder. Yerleşim genişliği ve yüksekliği küçülmez. Yalnızca o kutunun hangi piksellerinin boyandığı değişir. Filtreler (blur(), grayscale()) görünen her pikselin görünümünü değiştirir; maske hangilerinin kalacağına karar verir.

Şablon olarak PNG

mask-image, background-image gibi url(...) alır. Tipik bir maske PNG’si fotoğraf istediğin yerde beyaz (veya opak), delik istediğin yerde saydamdır:

PNG mask with mask-image

css 
.hero-photo {
width: 20rem;
height: 12rem;
background: url("/img/studio.jpg") center / cover no-repeat;
mask-image: url("/img/soft-blob.png");
mask-size: cover;
mask-repeat: no-repeat;
}

Fotoğraf hâlâ arka plandır (veya aynı maskeli bir <img>). Leke PNG’si yalnızca şablondur. Maske dosyası yoksa tüm öğe kaybolabilir — masksız bir yedek tut veya URL’yi dene.

Gradyanla solma

İkinci bir görüntü dosyası gerekmez. Gradyan maske, kartın altındaki günlük soldurmadır:

Fade with a gradient mask

css 
.card-lead {
mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-repeat: no-repeat;
}

Siyah (veya tam opak) içeriği tutar; transparent delik açar. Gradyan CSS’te yaşar, ekstra HTTP yoktur — simge sprite yaprağının aksine. Bu tüm kartta opacity değildir: katı kısımdaki metin net kalır; yalnızca maskelenen bölge erir.

Boyut, tekrar, konum

Maskeyi hiç resim olarak görmediğin bir arka plan katmanı gibi ele al:

Size, repeat, and position

css 
.badge {
mask-image: url("/img/star-mask.svg");
mask-size: 4rem 4rem;
mask-repeat: no-repeat;
mask-position: center;
}

mask-size: cover kutuyu doldurur; contain şablonun oranını korur; uzunluklar küçük bir şekli sabitler. repeat şablonu döşer (seyrek, çabuk abartılır). mask kısayolu vardır ama katman background gibi hissedilene kadar uzun özellikler daha sakindir.

Alfa karşı parlaklık

mask-mode sorar: «Saydamlığı mı parlaklığı mı okuyayım?»

Luminance mask-mode on a photo

css 
.portrait {
mask-image: url("/img/gray-sculpt.jpg");
mask-mode: luminance;
mask-size: cover;
}

alpha (saydam PNG’de çoğu zaman varsayılan) alfa kanalını kullanır. luminance açık ve koyuyu kullanır: beyaz genelde gösterir, siyah gizler — şablon gri bir fotoğrafsa, saydam PNG değilse işe yarar. JPEG maske «hiçbir şey yapmazsa» büyük olasılıkla luminance gerekti. SVG <mask> üzerinde mask-type de vardır; HTML kutularında mask-mode ile başla.

Sert kırpma karşı yumuşak maske

clip-path bir geometri keser: daire, inset, çokgen. Kenar keskindir. Maske yumuşak olabilir. Aynı özelliğin iki adı değiller:

Hard clip-path versus a soft mask

css 
.avatar {
clip-path: circle(50%);
}

.poster {
mask-image: radial-gradient(circle, #000 55%, transparent 80%);
mask-repeat: no-repeat;
}

Avatarlar ve biletler çoğu zaman clip-path ister. Sayfaya eriyen kahraman afiş bir gradyan maske ister. Birleştirilebilir ama özellik başına bir iş daha sakindir. border-radius ile overflow: hidden üçüncü araçtır: torunları dolgu kutusuna kırpar. Maske öğenin kendisini, arka planı dahil boyar; yerleşim kutusunu yuvarlamaz.

Safari ve WebKit öneki

Bazı Safari sürümleri hâlâ standart özelliklerin yanında -webkit-mask-image (ve arkadaşlarını) ister:

WebKit prefix for Safari

css 
.fade-photo {
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

Önekli satır ve standart satır. Sonsuza dek yalnızca önek gönderme. @supports fazlalıkları sarabilir; alışkanlık: soldurmayı Safari’de de dene, yalnızca Chromium’da değil.

Maske vs kırpma vs overflow vs sprite

📊 Mask vs clip-path vs overflow vs sprites

Tool Job Poor fit
mask-image / mask-mode Soft holes, fades, shaped photos on one element Hiding a whole form; replacing column layout
clip-path Hard circle, polygon, inset silhouette Soft dissolves; newspaper columns
overflow: hidden Clip descendants to the box (often with radius) Painting a gradient stencil on the element’s own pixels
Sprites (background-position) Many icon tiles from one bitmap Stenciling a hero photo; flowing article text
Multi-column (column-*) Newspaper fill of one text stream Visibility holes in a picture

Optional Advanced sprite’ları simgeler için, sütunları düz yazı için kullandı. Maskeleme şablondur. Üçünü aynı kahramanda karıştırmak, hem sprite gibi kırpılmış hem sütun gibi dilimlenmiş bir fotoğraf verir.

Neyi maskeleme

Dağınık yerleşimi «temizlemek» için maske kullanma. Düğme veya etiket soldurmanın altındaysa kimse okumaz ve tıklamaz. Ekran okuyucu metni söyleyebilir, gören göz hiçbir şey görmez — bu hata, özellik değil. Kontrast görünen kısımda hâlâ önemlidir. Süs fotoğrafları, kartlar ve simgeler alışılmış hedeftir; giriş alanları değil.

Mask is not overflow or a sprite sheet

css 
.ok-art {
mask-image: linear-gradient(to right, #000, transparent);
}

.not-a-layout-fix {
/* don't: mask the entire toolbar because it overflowed */
}

.icons {
/* sprites still use background-position — not mask-image */
background-image: url("/img/icons.png");
background-position: 0 -32px;
}

Çocuk kartan taşıyorsa overflow (veya daha küçük çocuk) yerleşim düzeltmesidir. On iki HTTP simge dosyası varsa sprite veya SVG seti varlık düzeltmesidir. Maskeleme ikisinin yerini tutmaz.

Kendin dene

  1. Renkli bir kutuya mask-image: linear-gradient(to bottom, #000 50%, transparent) ver ve altın eridiğini izle.
  2. Küçük bir SVG veya PNG şablon tak; mask-size ve mask-position: center koy.
  3. Gri JPEG’de mask-mode: luminance ile saydam PNG’de alpha karşılaştır.
  4. Aynı daireyi clip-path: circle(50%) ile gör — sert kenarı fark et.
  5. Aynı gradyanla -webkit-mask-image ekle. Formu maskeleme.

Sık hatalar

  • Maskeyi sayfa yerleşimi veya overflow: hidden olarak kullanmak
  • mask-size unutup köşede minik şablon bırakmak
  • mask-mode: luminance olmadan JPEG’den delik beklemek
  • -webkit-mask-image atlayıp Safari’de «CSS maskeleri»ni suçlamak
  • clip-path ile mask-image’i aynı saymak
  • Etiket, alt yazı veya düğmeyi maskeleyip kontrast ve tıklama hedefini öldürmek
  • Sprite (karo kayması) veya çoklu sütun (metin akışı) ile karıştırmak

Özet

  • Maske bir öğe üzerindeki şablondur: burada göster, orada gizle
  • mask-image url veya gradyan alır; boyut, tekrar ve konum arka planı yansıtır
  • mask-mode: alfa karşı parlaklık
  • clip-path sert geometrik kesimdir; maskeler solabilir
  • Safari için önek; zorunlu arayüzü asla maskeleme
  • Optional Advanced sonra kullanıcı arayüzü (user-interface) ile devam eder

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 74 / 75
Css Ders