{"id":2084,"date":"2017-01-28T16:27:24","date_gmt":"2017-01-28T22:27:24","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2084"},"modified":"2017-01-28T16:27:24","modified_gmt":"2017-01-28T22:27:24","slug":"css-burning-text-effect","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-burning-text-effect\/","title":{"rendered":"CSS Burning Text Effect"},"content":{"rendered":"

Here\u2019s a fun little CSS snippet that allows you to create text that looks like it\u2019s on FIRE. It\u2019s achieved using text-shadow and is a super easy effect to add to any of your projects.<\/span><\/p>\n

First you\u2019ll need some HTML:<\/span><\/p>\n

<div id=\u201cfire\">FIRE<\/div><\/span><\/pre>\n
That\u2019s the easy part. Now for the CSS. Here\u2019s what your styling should look like to achieve the cool fire effect.<\/span><\/p>\n
body {<\/span><\/pre>\n
 background-color:#222;<\/span><\/pre>\n
 text-align:center;<\/span><\/pre>\n
 font-family: \"Open Sans\";<\/span><\/pre>\n
}<\/span><\/pre>\n
#fire {<\/span><\/pre>\n
 color: #f5f5f5;<\/span><\/pre>\n
 text-shadow:<\/span><\/pre>\n
 0px -2px 4px #fff,<\/span><\/pre>\n
 0px -2px 10px #FF3,<\/span><\/pre>\n
 0px -10px 20px #F90,<\/span><\/pre>\n
 0px -20px 40px #C33;<\/span><\/pre>\n
 font-size: 100px;<\/span><\/pre>\n
}<\/span><\/pre>\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":"
Here\u2019s a fun little CSS snippet that allows you to create text that looks like it\u2019s on FIRE. It\u2019s achieved using text-shadow and is a super easy effect to add to any of your projects.<\/p>\n
 First you\u2019ll need […]<\/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":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2084"}],"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=2084"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2084\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}