animated underline text effect

Animated underline on multiple lines text

We have already seen a thick underline effect on text. Taking this to the next step is animating the underline effect and still looking good when text span over multiple lines.

text thick 3d effect

Text in thick 3D look effect

Want to make a word stand out in your website layout? Well, a thick 3D look text effect might do the trick for you.

floating text on link button

Add floating text next to link or button

Floating text next to a link or button can be a good way to show additional information about a specific link or button. Also, it helps catch more user attention to that specific link or button.

colored li ol bullets numbers css

Different color bullets or numbers in the list

By default, li list items will show same color bullets (when using un-ordered list ul) and same color numbers (when using ordered list ol). You can easily color to these by targeting marker pseudo element.

headline before after lines effect

Lines before and after headline text

Adding line before and after text is a classic CSS effect. However, defining size of these before and after lines can be challenge which can be easily dealt with by using grid columns for dynamic widths.

number cut off with slash line

Big number cut off effect with slash line

Making a big number cut off with a line effect done with CSS only. Now, this effect looks cool but it also has its limitations. Please Note: You would need to adjust the code for cut off line positioning depending on the font size, font type in the use.

gradient effect on text multiple colors

Add gradient to text with multiple colors

We just saw how to use gradient as border for images and make them look fancy. Similarly, multi color gradient effect can be applied to the normal text (looks good specially on headlines).

animated words within headline

Animated multiple words in a headline

Using animation to circle through various words within a headline can be achieved with CSS only. It is ideal for a headline where you want to convey multiple benefits by circling through different words.

underline effect using background color css

Thick underline effect with background color

Underline is normally used for clickable or linked text. These days underline effect is also used to highlighted normal text words in a headline. For accessibility reasons, such text should be highlighted using background color method as against normal underline or fancy wavy underline effect.