{"id":1521,"date":"2015-04-25T06:31:38","date_gmt":"2015-04-25T11:31:38","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1521"},"modified":"2015-04-25T06:31:38","modified_gmt":"2015-04-25T11:31:38","slug":"10-beautiful-css-text-effects","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/10-beautiful-css-text-effects\/","title":{"rendered":"10 Beautiful CSS Text Effects"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

There are various text effects available which can be applied you make the websites more appealing.<\/p>\n

Here are some of the options for text effects:<\/p>\n

1.\u00a0Text Rotation<\/a><\/h3>\n

This feature by Johathan Snook lets designers display the text in all angles.\u00a0 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.<\/p>\n

\"css-text-effects\"<\/p>\n

2.\u00a0Shadow Effect<\/a><\/h3>\n

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.<\/p>\n

\"css-text-effects\"<\/p>\n

3.\u00a0Slashed Effect<\/a><\/h3>\n

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.<\/p>\n

\"css-text-effects\"<\/p>\n

4.\u00a0Animation Text<\/a><\/h3>\n

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.<\/p>\n

\"css-text-effects\"<\/p>\n

5.\u00a0Background Clip Text<\/a><\/h3>\n

With this code designers can display any image in the background of\u00a0 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.<\/p>\n

\"css-text-effects\"<\/p>\n

6.\u00a0Animated Signature<\/a><\/h3>\n

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.<\/p>\n

\"css-text-effects\"<\/p>\n

7.\u00a0Cosmos<\/a><\/h3>\n

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!!<\/p>\n

\"css-text-effects\"<\/p>\n

8.\u00a0Elastic Stroke Animation<\/a><\/h3>\n

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!<\/p>\n

\"css-text-effects\"<\/p>\n

9.\u00a0Foggy Text Effect<\/a><\/h3>\n

This is an animation effect where the text appears hazy and foggy. It is only for Webkit browsers though.<\/p>\n

\"css-text-effects\"<\/p>\n

10.\u00a0Hit the Floor<\/a><\/h3>\n

A wonderful 3D effect which plays on shadow of a word.<\/p>\n

\"css-text-effects\"<\/p>\n

Let us know how some of these ideas helped to create an attractive and fun website.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[171,174],"tags":[79],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1521"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1521"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1521\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}