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