A rather geeky/technical weblog, est. 2001, by Bramus
In this post Louis Hoebregts creates nice tooltips. No, not a typical triangle injected at the bottom but a nice curved one, also letting the image underneath peek through. For it he uses mask-image consisting of two parts: one rectangle overlaying the top part of the image + one SVG arrow overlaying the bottom part. …
Continue reading “Perfect Tooltips With CSS Clipping and Masking”
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. GSAP not required to achieve the core effect, but it does polish the whole thing … #sweatingthedetails Dynamic CSS Masks with Custom Properties and GSAP →
.grit { -webkit-mask-image: url(“grit.png”); mask-image: url(“grit.png”); } With the image above, the areas with partial and full transparency will mask the element (allowing the background to show through), while fully opaque areas (of any color) will allow the element to be visible. Then simply apply it as a mask image in CSS with only 2 …