10 Beautiful CSS Text Effects

Published April 25, 2015 by CSS Newbies.

CSS3 comes with an unlimited number of possibilities and options to play with a website. There is no dearth of choices when it comes to the images, effects, background music or displays, cross browser support or various text styles designers can select. These effects are very easy to use and can be applied with the help of a step-by-step tutorial provided online.

There are also various forums that allow designers to gain knowledge about latest developments and options available. These forums also will respond to questions. Designers with a basic understanding of website development can learn these options easily.

There are various text effects available which can be applied you make the websites more appealing.

Here are some of the options for text effects:

1. Text Rotation

This feature by Johathan Snook lets designers display the text in all angles.  It is good to display the dates, calendar, vCard details and other images where text needs to be displayed without any comma and in one block.


2. Shadow Effect

This has been around since the creation of Microsoft word. But Juan Brujo has tried to play with it by allowing the users to increase or decrease the effect as and when needed.


3. Slashed Effect

This is a very small code that gives a “knife sliced” effect on the text, written by Robert Messerle. It is good for using in games or mystery websites.


4. Animation Text

This is also a short code that allows animation to be added to text. It allows designers to create a number of effects in even a short sentence.


5. Background Clip Text

With this code designers can display any image in the background of  the text. The image will appear distorted and highlight only the text. Jintos designed this code while playing with Webkit background clip and now has over 16 cool creations.


6. Animated Signature

This is a super cool effect that makes a signature appear on a website. The author created a real time signing animation which works by applying Javascript to SVG path and then animating the signature.


7. Cosmos

So welcome to Star trek. This simple code makes the logos and titles appear in cosmo state while encircling an orbit. Super cool effect for Geeks!!


8. Elastic Stroke Animation

This effect is available in HTML and CSS and allows designers to play with a color stroke for the text which appears on the screen. When used creatively, this is an awesome effect!


9. Foggy Text Effect

This is an animation effect where the text appears hazy and foggy. It is only for Webkit browsers though.


10. Hit the Floor

A wonderful 3D effect which plays on shadow of a word.


Let us know how some of these ideas helped to create an attractive and fun website.

6 Responses

  1. Pingback: 12 Creative Effects Created using CSS3 Box Shadows | Lunarium Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>