Pro

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.

image 3d tilt effect

Image with 3D perspective tilt effect

Adding subtle 3D perspective to an image makes it standout easily. We have already seen image in heart shape and the trendy blob shape effect. Here is another image effect, would look great for person profile photos – specially on about page.

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.

button with blur effect over-background image

Button with Blur effect over background image

If your layout is using a big section with a detailed background image, then adding a button with blur effect makes it less intrusive and yet visible for visitors to click. Note: This effect does not work in the Firefox browser (yet).

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).

outer border button hover

Outer border on button hover effect

Instead of the usual border on the edges of the button, add border outside the button on hover to make it look a little different and cool, right?

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.