{"id":1883,"date":"2016-01-19T17:35:30","date_gmt":"2016-01-19T17:35:30","guid":{"rendered":"http:\/\/cssreset.com\/?p=1883"},"modified":"2016-01-19T17:35:30","modified_gmt":"2016-01-19T17:35:30","slug":"cool-css-effects-realistic-text-highlighting","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/cool-css-effects-realistic-text-highlighting\/","title":{"rendered":"Cool CSS Effects: Realistic Text Highlighting"},"content":{"rendered":"

With CSS, you can use the background<\/strong> property to make it look like text has been highlighted, but it doesn’t quite mimic how highlighting looks in real life. If you want to make your highlights appear more realistic, you can use CSS3’s linear gradients<\/strong> with the background-image<\/strong> property. This way the edges of the highlights appear faded and a lot more like the \u00a0highlights you might see on paper.<\/p>\n

\"highlight\"<\/p>\n

First, surround the text you’d like to highlight with span<\/strong> tags, and give the spans a class of highlight<\/strong>. Next you need to add some styling, which should look something like this:<\/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. .highlight{<\/span><\/div><\/li>\n
  2. background-image<\/span>:<\/span> linear-gradient(<\/span>-100deg,<\/span> rgba(<\/span>255<\/span>,<\/span> 255<\/span>,<\/span> 255<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> yellow<\/span> 85%<\/span>,<\/span> rgba(<\/span>255<\/span>,<\/span> 255<\/span>,<\/span> 255<\/span>,<\/span> 0<\/span>)<\/span>)<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    And you’re done! One line of CSS and some small changes to your HTML is all it takes to achieve a realistic text highlighting effect.<\/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":"

    With CSS, you can use the background property to make it look like text has been highlighted, but it doesn’t quite mimic how highlighting looks in real life. If you want to make your highlights appear more realistic, you can […]<\/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":[6,36],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1883"}],"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=1883"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1883\/revisions"}],"predecessor-version":[{"id":1885,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1883\/revisions\/1885"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}