Overzicht
Als u realistische verwerings- of textuurpatronen (zoals grunge, ruis of papiertextuur) wilt toepassen op een element, gebruikt u CSS-maskering (mask-image) met een herhalende textuurafbeelding. Zo kun je de content zelf een textuur geven door delen ervan semi-transparant te maken, in plaats van alleen een textuur over de content heen te leggen. Zo ontstaat een realistischer uiterlijk van het fysieke materiaal.
Implementatie
Zo pas je een textuurpatroon toe:
Methode 1: Een herhalende rasterafbeelding gebruiken (aanbevolen voor realistische texturen)
Dit is de meestgebruikte methode voor realistische texturen.
.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;
}
Methode 2: CSS-kleurverlopen gebruiken voor geometrische patronen
Je kunt patronen genereren met CSS-kleurverlopen. Deze is op zichzelf staand en vereist geen externe afbeeldingsbestanden.
.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;
}
Modi voor alfa- versus helderheidsmasker
CSS-maskers gebruiken standaard mask-mode: match-source. Dit betekent dat de browser automatisch bepaalt of het alfakanaal (transparantie) of de luminantie (helderheid) van het masker moet worden gebruikt op basis van het type bron dat je aanlevert:
| Brontype masker | Standaard maskermodus | Maskeringsgedrag |
|---|---|---|
Inline SVG-element <mask> |
luminance |
De dekking wordt bepaald door de helderheid van de kleuren. Wit onthult content, zwart verbergt content en grijs maakt content semi-transparant. |
| Rechtstreeks afbeeldingsbestand (bijv. png- of svg-bestand) | alpha |
De ondoorzichtigheid wordt bepaald door de transparantie. Ondoorzichtige delen tonen content en transparante delen verbergen content. |
| CSS-kleurovergang | alpha |
De ondoorzichtigheid wordt bepaald door de transparantie. Ondoorzichtige kleuren (zoals black) tonen content en transparante kleuren verbergen content. |
Reservestrategieën
Als een browser mask-image of de versie met voorvoegsel niet ondersteunt, gebeurt het volgende:
- Het element wordt zonder de textuur getoond (schone en effen vulling).
- Zorg dat de content nog steeds leesbaar is zonder de textuur (progressive enhancement).
- U kunt een achtergrondafbeelding of een overlay gebruiken als reserve om de textuur te simuleren, hoewel dit geen invloed heeft op de transparantie van de content zelf.
/* 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 */
}
}