Articles Tagged text effect

Let’s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, gradient-looking color behind text, and you would be right! But just like box-shadow, you can control how blurred the shadow is, including taking it all the way down to no blur at all. That, combined with comma-separating shadows and stacking them, is the CSS trickery we’ll be doing here.… Read article “Creating Playful Effects With CSS Text Shadows”

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.… Read article “Fitting Text to a Container”

Here’s an idea! Let’s make an an HTML <video></video> play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. … Read article “Responsive Knockout Text With Looping Video”

Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG or anything like that. … Read article “Text Effects with CSS (and a little contenteditable trick)”

The following is a guest post by Chris Scott. Chris was messing around with SVG filters and how they can be applied to text. I thought this was quite interesting because SVG filters are quite a bit different than CSS filters. Arguably more powerful, as there are more of them and you can do things like bevel/emboss or stroke which you can’t in CSS filters. Chris goes into detail here on how it’s done including a tool to make … Read article “SVG Filters on Text”