{"id":515,"date":"2020-02-24T16:27:06","date_gmt":"2020-02-24T16:27:06","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=515"},"modified":"2020-02-24T16:27:06","modified_gmt":"2020-02-24T16:27:06","slug":"misc-cool-css-tricks","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/misc-cool-css-tricks\/","title":{"rendered":"Misc cool CSS tricks"},"content":{"rendered":"<p>To create text that has a gradient of colors i.e. hover text for links (see below as an example)<\/p>\n<p><a href=\"https:\/\/jmrowe.com\/blog\/design\/css\/misc-cool-css-tricks\/attachment\/text-hover-gradient-color-effect\" rel=\"attachment wp-att-516\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-516\" src=\"https:\/\/jmrowe.com\/blog\/wp-content\/uploads\/2020\/02\/text-hover-gradient-color-effect.png\" alt=\"Gradient text hover effect\" width=\"304\" height=\"46\" srcset=\"https:\/\/jmrowe.com\/blog\/wp-content\/uploads\/2020\/02\/text-hover-gradient-color-effect.png 304w, https:\/\/jmrowe.com\/blog\/wp-content\/uploads\/2020\/02\/text-hover-gradient-color-effect-300x45.png 300w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/a><\/p>\n<p>This can be create with the below code:<\/p>\n<pre class=\"lang:default decode:true\">a.hover-effect{\r\nbackground: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71));\r\nbackground: linear-gradient(90deg,#ff8a00,#e52e71);\r\n-webkit-background-clip: text;\r\n-webkit-text-fill-color: transparent; \/* this is needed *\/\r\n-webkit-box-decoration-break: clone;\r\nbox-decoration-break: clone;\r\ntext-shadow: none;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create text that has a gradient of colors i.e. hover text for links (see below as an example) This can be create with the below code: a.hover-effect{ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71)); background: linear-gradient(90deg,#ff8a00,#e52e71); -webkit-background-clip: text; -webkit-text-fill-color: transparent; \/* this is needed *\/ -webkit-box-decoration-break: clone; box-decoration-break: clone; text-shadow: none; } &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-515","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":2,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":518,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions\/518"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}