Straturi de Mască cu Gradienți CSS
Și un gradient CSS poate servi drept imagine pentru stratul de mască.
Strat de Mască cu Gradient Liniar
Stratul de mască al unei imagini poate fi un gradient liniar. În exemplul de mai jos, gradientul începe cu negru în partea de sus, unde imaginea este complet vizibilă, și trece treptat la transparent în partea de jos, unde este ascunsă.
Exemplu
Aici, un gradient liniar are rolul de strat de mască.
Prompt
Creează o pagină care afișează o imagine (folosește img_5terre.jpg) cu o mască CSS de gradient liniar aplicată. Gradientul merge de la negru în partea de sus la transparent în partea de jos, făcând ca imaginea să se estompeze spre partea de jos. Include atât proprietatea -webkit-mask-image, cât și mask-image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Mask</title>
<style>
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>
<h2>Linear Gradient Mask Layer</h2>
<p>The image below uses a linear gradient as a mask layer. The gradient goes from black (fully visible) at the top to transparent (hidden) at the bottom:</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Gradient liniar cu mascare de text
Combină un gradient liniar cu mascarea de text, iar combinația poate masca și o imagine de fundal.
Prompt
Creează o pagină cu un div care are o imagine de fundal (folosește img_5terre.jpg no-repeat) setată la lățime maximă de 600px și înălțime de 400px. Aplică o mască de gradient liniar de la negru la transparent astfel încât imaginea de fundal să se estompeze spre partea de jos. Adaugă două paragrafe de text despre Cinque Terre peste zona imaginii.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Text Mask</title>
<style>
.mask1 {
max-width: 600px;
height: 400px;
overflow: hidden;
background: url(img_5terre.jpg) no-repeat;
background-size: cover;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h2>Linear Gradient with Text Masking</h2>
<div class="mask1">
<p>Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<p>Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>
</body>
</html>
Strat de Mască cu Gradient Radial - Cerc
Și un gradient radial în formă de cerc funcționează ca strat de mască al unei imagini.
Exemplu
Aici, un gradient radial circular are rolul de strat de mască.
Prompt
Creează o pagină care afișează o imagine (folosește img_5terre.jpg) cu o mască CSS de gradient radial în formă de cerc. Gradientul merge de la negru la 50% la rgba(0,0,0,0.5) la 50%, creând un efect de mască circulară. Include atât proprietatea -webkit-mask-image, cât și mask-image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Circle Mask</title>
<style>
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h2>Radial Gradient Mask Layer - Circle</h2>
<p>The image below uses a radial gradient (circle) as a mask layer:</p>
<img class="mask2" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Strat de Mască cu Gradient Radial - Elipsă
Gradienții radiali pot avea și formă de elipsă, iar aceasta funcționează de asemenea ca strat de mască al unei imagini.
Exemplu
Aici, un gradient radial eliptic are rolul de strat de mască.
Prompt
Creează o pagină care afișează o imagine (folosește img_5terre.jpg) cu o mască CSS de gradient radial în formă de elipsă. Gradientul merge de la negru la 50% la rgba(0,0,0,0.5) la 50%, creând un efect de mască eliptică. Include atât proprietatea -webkit-mask-image, cât și mask-image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Ellipse Mask</title>
<style>
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h2>Radial Gradient Mask Layer - Ellipse</h2>
<p>The image below uses a radial gradient (ellipse) as a mask layer:</p>
<img class="mask3" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Strat de Mască cu Gradient Conic
Stratul de mască al unei imagini poate fi și un gradient conic. Acesta se rotește de la negru la 0 grade până la transparent la 360 de grade.
Exemplu
Aici, un gradient conic are rolul de strat de mască.
Prompt
Creează o pagină care afișează o imagine (folosește img_5terre.jpg) cu o mască CSS de gradient conic. Gradientul merge de la negru la 0deg la transparent la 360deg, creând un efect de dezvăluire în mișcare circulară. Include atât proprietatea -webkit-mask-image, cât și mask-image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient Mask</title>
<style>
.mask4 {
-webkit-mask-image: conic-gradient(black 0deg, transparent 360deg);
mask-image: conic-gradient(black 0deg, transparent 360deg);
}
</style>
</head>
<body>
<h2>Conic Gradient Mask Layer</h2>
<p>The image below uses a conic gradient as a mask layer:</p>
<img class="mask4" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Toate Proprietățile CSS de Mascare
Toate proprietățile CSS de mascare sunt listate aici:
mask-clip- Determină zona afectată de o imagine de mască.mask-composite- Definește operația de compunere dintre stratul de mască curent și straturile de mască de sub el.mask-image- Numește imaginea care are rolul de strat de mască al unui element.mask-mode- Alege dacă imaginea stratului de mască este considerată mască de luminanță sau mască alfa.mask-origin- Definește unde este poziționată originea unei imagini a stratului de mască.mask-position- Setează locul de unde începe o imagine a stratului de mască.mask-repeat- Controlează modul în care se repetă o imagine a stratului de mască.mask-size- Controlează cât de mare este o imagine a stratului de mască.mask-type- Alege dacă un element SVG<mask>este considerat mască de luminanță sau mască alfa.