Last week was the biggest #CodePenChallenge yet! We knew you had the spirit 👻 Check out our CodePenChallenge: Ghosts! collection to see the Pens from the challenge.
This Week’s Prompt: Masks 🎭
It wouldn’t be Halloween without masks. The right mask can take a costume from fun to fabulous, and the same could be said for websites too. It’s true! You might say CSS is the mask to your HTML. There are masking techniques in CSS, through the mask and clip-path property, as well in SVG through the
October’s Challenge Sponsor: WordPress.com
WordPress powers 31% of the internet. Create a site for yourself with a custom domain name and 24/7 live support. Start writing, sharing, selling, and building your audience today.
Create a Pen that plays with the idea of masks. Make a scary Halloween mask using a masking technique from CSS or SVG, or have your own play on the word mask.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag cpc-masks. We’ll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
- Make an actual mask like Mandy Michael’s Batman Mask.
- Some apps use masks as as symbol of privacy, like Firefox’s Private Browsing icon. Can you give that a Halloween twist?
- Nobody has explored masking more than yoksel! Check out her easy reference Pen and amazing Collection of demos.
- Do you know the difference between masking and clipping? They are both similar in that they hide things, but they are different. Learn about it. Quick hit: masking is image based, so could involve a gradient like Craig Roblewsky’s interactive Pen. Clipping is vector outline based, so any given part of an element is either clipped or not.
- The Noun Project has lots of masks you can download in SVG format as a great starting point.
- Watch a video about the possibilities of clipping and masking. Or check out Sarah Drasner’s advice on using them with very cool demos.