I like this effect 🙂
Tag Archives: effect
Multi Colored Text with CSS
Nice text-effect demo by Shireen Taj:
~
Using DevTools you can see that there’s a gradient background set onto the element.
By also applying -webkit-background-clip: text; the gradient is only shown on the text itself.
~
The demo’s also fun to fork and remix:
Add some Houdini to animate it
See the Pen Multi Colored Text with CSS (Animated with Houdini) by Bramus (@bramus) on CodePen.
Change the type of gradient
Rad fork by Adam Argyle:
See the Pen Multi Colored Text with CSS by Adam Argyle (@argyleink) on CodePen.
Make the center follow the mouse
This one uses a tad of JS to update the Custom Properties:
See the Pen Multi Colored Text with CSS (conic gradient + follow mouse) by Bramus (@bramus) on CodePen.
Using a radial-gradient which gets a bit bouncy
See the Pen Multi Colored Text with CSS (radial gradient + follow mouse) by Bramus (@bramus) on CodePen.
Creating a CSS flashlight
It steers away from the multi-color aspect, but the rest of the code is the same:
See the Pen CSS Flashlight Text by Bramus (@bramus) on CodePen.
~
CSS Text Morphing
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 wanted effect.
Dynamic CSS Masks with Custom Properties and GSAP
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
Animated Greyscale to Color Image Reveal Effect
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: luminosityMany variations possible.
— Ana Tudor 🐯 (@anatudor) January 20, 2021
Here’s her code in a CodePen demo for you to play with:
See the Pen CSS Partial Greyscale by Bramus (@bramus) on CodePen.
☝️ Tip: Tweak the angle and the percentage of transparent to see how it behaves.
~
Inspired by a CodePen demo by Jhey — in which he built image reveal on hover using filter and clip-path — Ana rebuilt his demo using her technique:
See the Pen No image duplication reveal effect with Houdini magic 🎩🐇✨ (Chromium only) by Ana Tudor (@thebabydino) on CodePen.
One advantage of Ana’s technique is that it doesn’t require duplicated images in the markup. A disadvantage though is that it only works with background images. Chrome only too, as it relies on @property.
I like this form of code golfing 🙂
UPDATE 2021-02-02: Ana also made a non-Houdini version that uses box-shadow on a wrapping element. Because of that you can simply leave your img tags intact, so all cons of her first iteration have been nullified. Cool!
Minimal Underline Animation
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.
Creating a Pencil Effect in SVG
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 shimmer effect with SVG
Multi-line Highlights in CSS
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.
Crafting a Cutout Collage Layout with CSS Grid and 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 is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.
See the Pen Magazine Cutout by Bramus (@bramus) on CodePen.
I’ve only cut out a few parts, but you get the idea. The parallax part as seen in the original is left as an exercise to you, dear reader 😛
🚧 A big help in creating these cutouts was the Shape Path Editor which you can find in Firefox’ DevTools. Without it such a task would have been really difficult.
Chameleonic Header
UPDATE 2021.01.14: Besides using clip-path, a more easy approach is to use mix-blend-mode: difference; if all you’re doing is inverting colors.
Ever had a fixed header that had to work with both light and dark content shown underneath it? Keep an eye at the header in the video below to see what I’m talking about:
As explained over at CodyHouse, here’s how it’s done:
This effect uses the
clip-pathCSS property. The idea is to have a clone of the main header inside each<section>of the page. Each clone will inherit the style of the section it belongs to.All cloned headers are placed at the top of the page (with a fixed position). The
clip-pathproperty can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.This creates the clipping transition effect between headers with different color themes.