{"id":2027,"date":"2016-08-28T18:31:02","date_gmt":"2016-08-28T18:31:02","guid":{"rendered":"http:\/\/cssreset.com\/?p=2027"},"modified":"2016-09-12T08:55:58","modified_gmt":"2016-09-12T08:55:58","slug":"create-an-anaglyphic-text-effect-using-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-an-anaglyphic-text-effect-using-css\/","title":{"rendered":"Create an Anaglyphic Text Effect Using CSS"},"content":{"rendered":"

There are so many CSS properties that can be used to create really cool text effects. Text-shadow is a property that’s commonly used to to achieve these funky effects, but the :before or :after pseudo-selectors can also be used in combination with the content property to create some pretty awesome text designs in pure CSS. In fact, the :after pseudo-selector is used to create an effect that makes your text look like it’s being viewed through an anaglyphic 3D lens. By repeating the text after the tag originally appears by using the content property and playing around with the colors and the positioning, you can make it look like you’re seeing double.<\/p>\n

Here’s how your CSS code should look:<\/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. #anaglyphic<\/span> {<\/span><\/div><\/li>\n
  2. display<\/span>:<\/span> inline<\/span>;<\/span><\/div><\/li>\n
  3. position<\/span>:<\/span> relative<\/span>;<\/span><\/div><\/li>\n
  4. letter-spacing<\/span>:<\/span> -5px<\/span>;<\/span><\/div><\/li>\n
  5. color<\/span>:<\/span> #00b2b3<\/span>;<\/span><\/div><\/li>\n
  6. font-size<\/span>:<\/span> 100px<\/span>;<\/span><\/div><\/li>\n
  7. }<\/span><\/div><\/li>\n
  8.  <\/div><\/li>\n
  9. #anaglyphic<\/span>:after <\/span>{<\/span><\/div><\/li>\n
  10. content<\/span>:<\/span> "ANAGLYPHIC"<\/span>;<\/span><\/div><\/li>\n
  11. position<\/span>:<\/span> absolute<\/span>;<\/span><\/div><\/li>\n
  12. top<\/span>:<\/span> 5px<\/span>;<\/span><\/div><\/li>\n
  13. left<\/span>:<\/span> 5px<\/span>;<\/span><\/div><\/li>\n
  14. color<\/span> :<\/span>#ff4d4d<\/span> ;<\/span><\/div><\/li>\n
  15. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    You can play around with the font family, colors, sizing and positioning to really achieve the text effect you’re looking for and make it your own. If you’re looking for other text effects, check out our tutorial on creating embossed text here<\/a>, \u00a0or click here<\/a> to see our tutorial on making glowing neon text.<\/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 CSS properties that can be used to create really cool text effects. Text-shadow is a property that’s commonly used to to achieve these funky effects, but the :before or :after pseudo-selectors can also be used in […]<\/p>\n

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