{"id":3024,"date":"2016-12-14T15:49:43","date_gmt":"2016-12-14T21:49:43","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2033"},"modified":"2016-12-14T15:49:43","modified_gmt":"2016-12-14T21:49:43","slug":"how-to-use-gradients-as-an-image-placeholder","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-gradients-as-an-image-placeholder\/","title":{"rendered":"How to Use Gradients as an Image Placeholder"},"content":{"rendered":"

The Gradify<\/a>\u00a0module is one that was created specifically for the purpose of using gradients as a placeholder for an image. The plugin finds the most prominent color in any image and uses them to create a responsive gradient that can be used as an image placeholder. If you’re not a huge fan of gradients, the module also gives you the option to use a single color (again, the color that is most prominent in the image) as an\u00a0image placeholder.<\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Gradify exists because of the long load time that can occur when loading images (particularly large, hi-res images). If the image placeholder that appears before the image is fully loaded reflects the main colors of the image, it’s less jarring for the user when the image finally loads. Additionally, it makes for a better user experience. By using a module like Gradify to achieve this effect rather than writing it yourself, you’re going to save a lot of time (if you’ve ever written code for a gradient, you know how much of a pain it can be). If you’re looking for a nice finishing touch to add to any of your projects, this module could be it.<\/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":"

The Gradify\u00a0module is one that was created specifically for the purpose of using gradients as a placeholder for an image. The plugin finds the most prominent color in any image and uses them to create a responsive gradient that can […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3024"}],"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=3024"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3024\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2791"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}