Jinsi ya Kutumia CSS Masking na Clipping Effects

CSS Masking na Clipping hukuwezesha kuunda maumbo (shapes) na effects za kisasa kama text cut-outs, image reveals, na creative UI sections bila Photoshop.

✅ A. CSS Clipping (clip-path)
Mfano: Circular Image Clip
<img src="img.jpg" class="circle">

.circle {
width: 250px;
clip-path: circle(50%);
}

Mfano: Polygon Section Design
<div class="polygon-box"></div>

.polygon-box {
width: 100%;
height: 200px;
background: #4c8bf5;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

✅ B. CSS Masking (mask-image)
Mfano: Text Reveal Mask
<div class="masked">FAULINK</div>

.masked {
font-size: 80px;
font-weight: 900;
background: url('bg.jpg') center/cover;
-webkit-mask-image: linear-gradient(#000, transparent);
mask-image: linear-gradient(#000, transparent);
}

Mfano: Image Mask Using SVG
<img src="photo.jpg" class="mask-shape">

.mask-shape {
width: 300px;
mask-image: url("mask.svg");
-webkit-mask-image: url("mask.svg");
mask-size: cover;
}

✅ C. Mask + Clip Combo Effect
<div class="combo"></div>

.combo {
width: 300px;
height: 300px;
background: url('img.jpg') center/cover;
clip-path: circle(50%);
mask-image: linear-gradient(to bottom, black 70%, transparent);
}


✔️ Effects zinawork instantly
✔️ Unaweza kubadilisha shapes kirahisi

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509