Sharpen Up Your Text with The Power of Three

In a world where JS and SVG are taking over, it’s easy to forget the power of CSS. Luckily there are three powerful CSS items, each with a specific use, whose strengths are enhanced when used together. Their destiny is to give you the freedom to let your creativity shine.

Clip path, data-attributes, and pseudo-elements provide us the opportunity to get creative with standard web text. No tricks here, just straight up CSS and HTML!

We’ll explore some ways in which we can use clip path, data-attributes, and pseudo-elements to create more beautiful websites. Focused around interesting text effects, you’ll also see some creative layouts and animations. There is a lot you can accomplish with a little creativity, and the Power of Three.

It’s easy to forget the power of CSS. There are three really powerful things to use:

  1. data attributes
  2. pseudo elements
  3. clip-path

We can make a copy of our content available in a data attribute:

<h1 data-heading=”hello”>Hello</h1>

Then we can add and style pseudo elements:

<h1 data-heading=”hello”>
::before
Hello
::after
</h1>

h1::before {}

This is the base of a range of techniques… see Mandy’s codepen for demos

  • Split layout (where text colour changes size 50% in the viewport)
  • Fractured
  • Reflected text
  • use multi-layered fonts to create further text effects
  • combine emoji…!

 

You can do more cool effects with clip-path. This allows you to draw a shape onto an element and then screen out/clip the content in that shape.