A rather geeky/technical weblog, est. 2001, by Bramus
You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it. Uses gradients set as a mask-image which transition on hover. For the iris and clock wipte effects, @property is used. Star …
Continue reading “Star Wars Scene Transition Effects in CSS”
Similar to this 2019 demo by CodePen user Valgo (which uses SVG to create the effect), Amit Sheen created this wonderful CSS-only Word Morphing demo: The key parts to this demo are the filter on the wrapping .morphing element combined with the animated blurring on the .word elements themselves. You need both to get the …
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 →
Ana Tudor recently shared a trick on how to make an image partially greyscale: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes. background: url(cat) 50%/ cover, linear-gradient(-45deg, transparent 50%, grey 0);background-blend-mode: luminosity Many variations possible. — Ana Tudor 🐯 (@anatudor) January 20, 2021 …
Continue reading “Animated Greyscale to Color Image Reveal Effect”
Nice pen by Aaron Iker: It combines CSS Custom Properties, CSS Transitions, and SVG Animations using stroke-dashoffset/stroke-dasharray. The reason that it works with text that spans multiple lines is because of the (inline) span that’s being used inside the link.
Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings: See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen. Creating a Pencil Effect in SVG → 💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat …
These lines aren’t injected using ::after or the like, but are done via backgrounds. The key CSS property you’re looking for is display: inline; though, as set on the p elements; without it, it won’t work. That last swipe effect also uses box-decoration-break clone; so that each line animates in parallel.
clip-path
On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say: What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path …
Continue reading “Crafting a Cutout Collage Layout with CSS Grid and clip-path“