Basic text formatting is very simple. It's just a few CSS properties that control the font-size, color, letter spacing...
p {
color: transparent;
font-size: <size>;
font-weight: <weight>;
font-style: <style>;
letter-spacing: <spacing>;
text-decoration: <decoration>;
}
Pretty neat, but I'm going to focus on a cooler text-effect that can be created using only modern CSS. It looks like this:
CSS Power
I've added a CSS property that sets the text color to match the background instead of that of color. It may not feel like a big difference, but it is. Keep in mind that now we have a lot of CSS options that were not available before. For one, gradients!
Always Ready
The CSS required for this is not standarized yet, and uses a prefix, but is implemented by all major browsers. Check Can I Use for more details on browser compatibility. Below is what the CSS looks like:
p {
color: transparent;
background: <custom-background>; // Get creative here!
-webkit-background-clip: text;
}
The key to get this effect, is the -webkit-background-clip property. It's the one that sets the text color to match the value of background. If you are on desktop, hover over the text below to see something neat.
I change on hover
And that's it, a simple trick for enhancing text decoration.