{"id":2995,"date":"2016-01-21T11:16:03","date_gmt":"2016-01-21T17:16:03","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1803"},"modified":"2016-01-21T11:16:03","modified_gmt":"2016-01-21T17:16:03","slug":"css3-embossed-text-effect","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css3-embossed-text-effect\/","title":{"rendered":"CSS3 Embossed Text Effect"},"content":{"rendered":"

CSS3’s text-shadow<\/strong> property\u00a0can be used to achieve so many cool text effects, including an embossed effect. This effect is created by giving the text-shadow property \u00a0values of -1 for the horizontal and vertical shadow, and leaving the blur-radius at its default of 0. Then horizontal and vertical shadow values of positive 1 are layered on top of the negative values. Find the code below.<\/p>\n

\"embossed\"<\/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. h1{<\/span><\/div><\/li>\n
  2. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
  3. font-size<\/span>:<\/span> 60px<\/span>;<\/span><\/div><\/li>\n
  4. color<\/span>:<\/span> #333<\/span>;<\/span><\/div><\/li>\n
  5. 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
  6. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Don’t forget that there should\u00a0only be a few shades of difference between the background color and the text color to achieve a true embossed look!<\/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’s text-shadow property\u00a0can be used to achieve so many cool text effects, including an embossed effect. This effect is created by giving the text-shadow property \u00a0values of -1 for the horizontal and vertical shadow, and leaving the blur-radius at its […]<\/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":[192,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2995"}],"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=2995"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2995\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}