{"id":2002,"date":"2016-08-03T14:34:39","date_gmt":"2016-08-03T14:34:39","guid":{"rendered":"http:\/\/cssreset.com\/?p=2002"},"modified":"2016-08-03T14:34:39","modified_gmt":"2016-08-03T14:34:39","slug":"css3s-embossed-text-effect","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css3s-embossed-text-effect\/","title":{"rendered":"CSS3’s Embossed Text Effect"},"content":{"rendered":"

There are so many cool text effects that can be achieved using CSS3’s versatile text-shadow property. One easy text effect you can employ using this method is the embossed text effect. Basically, by setting the text-shadow values to negative numbers, we can easily create the illusion embossed, almost 3-dimensional text.<\/p>\n

\"Screen<\/p>\n

Here’s the code for creating the effect yourself:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. body{<\/span><\/div><\/li>\n
  2. background<\/span>:<\/span> #222<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n
  4.  <\/div><\/li>\n
  5. h1{<\/span><\/div><\/li>\n
  6. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
  7. font-size<\/span>:<\/span> 60px<\/span>;<\/span><\/div><\/li>\n
  8. color<\/span>:<\/span> #333<\/span>;<\/span><\/div><\/li>\n
  9. text-shadow<\/span>:<\/span> -1px<\/span> -1px<\/span> 0px<\/span> rgba(<\/span>255<\/span>,<\/span> 255<\/span>,<\/span> 255<\/span>,<\/span> 0.3<\/span>)<\/span>,<\/span> 1px<\/span> 1px<\/span> 0px<\/span> rgba(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 0.8<\/span>)<\/span>;<\/span><\/div><\/li>\n
  10. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

     <\/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":"

    There are so many cool text effects that can be achieved using CSS3’s versatile text-shadow property. One easy text effect you can employ using this method is the embossed text effect. Basically, by setting the text-shadow values to negative numbers, […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2003,"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\/2002"}],"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=2002"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2002\/revisions"}],"predecessor-version":[{"id":2004,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2002\/revisions\/2004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2003"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}