Even if you're familiar with CSS and building beautiful layouts, you can still discover new CSS properties and features. By using them, you have more influence on how the content behaves on the website, as well as having more freedom in terms of how you apply creative techniques to elements such as photography.


1. Text-stroke

We're familiar with text stroke (outline) from Adobe Illustrator or vector-drawing applications. We can apply the same effect using the text-stroke property.

It's good to know you can animate text-stroke with CSS but only the stroke colour – the stroke width isn't.

2. Gradient text

Finally we can apply gradient to our text without any complicated methods. Let’s find out how can we introduce this eye-catching effect on our website.

Thanks to the following properties, we can enjoy greater control over how the text or images will behave depending on whatever size or proportion their container is.

3. Line-clamp

The line-clamp property truncates text at a specific number of lines. We need three properties to make it work.

The display property needs to be set to -webkit-box or -webkit-inline-box, -webkit-box-orient set to vertical and overflow set to hidden, otherwise the content won’t be clipped.

4. Character unit

We can limit our text width or height depending on the character unit. As Eric Mayer points out, the ch unit represents the width of the character '0' (zero) in the current font, which is of particular use in combination with monospace fonts. It changes as the font family changes. We can treat it a bit like an x-height but the ch is based on the width of the 0 character instead of x.

5. Object fit

If you wonder whether we can control image behaviour depending on the size of the container, I recommend you check out the object-fit property. This one defines how the content of an <img> or <video> should be resized to fit its container. We have four options: fill, contain, cover and scale-down. For instance, with the cover value, the replaced content is sized to maintain its aspect ratio while filling the element's entire content box.