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.

~

Animated Greyscale to Color Image Reveal Effect

Ana Tudor recently shared a trick on how to make an image partially greyscale:

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:

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!

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

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-path CSS 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-path property 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.

Chameleonic Header Article →
Chameleonic Header Demo →