DEV Community

๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on โ€ข Edited on

5 1

Texture Effect / Mask-image CSS

If you are not familiar with HTML CSS I recommend first learn HTML CSS from John Academy then try to make this

Top comments (2)

Collapse
 
kenbellows profile image
Ken Bellows โ€ข

๐Ÿ”ฅ Hot damn! ๐Ÿ”ฅ That's an awesome effect! I've seen mask-image before, but haven't messed with it much. I'd love to see an explanation of how you put this together and any difficulties you may have encountered.

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ โ€ข

It's one line of game which is

mask-image: url(i.ibb.co/fDWfCVd/mask.png);
-webkit-mask-image: url(i.ibb.co/fDWfCVd/mask.png);

walh that's it :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where youโ€™ll build it, break it, debug it, and fix it. Youโ€™ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good olโ€™ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. โค๏ธ