{"id":9,"date":"2022-12-20T10:00:25","date_gmt":"2022-12-20T10:00:25","guid":{"rendered":"https:\/\/blogs.plus2digital.com\/?p=9"},"modified":"2022-12-20T10:14:14","modified_gmt":"2022-12-20T10:14:14","slug":"css-image-masking","status":"publish","type":"post","link":"https:\/\/blogs.plus2digital.com\/index.php\/2022\/12\/20\/css-image-masking\/","title":{"rendered":"CSS Image Masking"},"content":{"rendered":"\n<p><strong>CSS mask-image Property<\/strong><\/p>\n\n\n\n<p>Ever wondered how Google&#8217;s logo is displayed on Chrome home page differently according to different themes!<\/p>\n\n\n\n<p>Like below: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image.png\" alt=\"\" class=\"wp-image-10\" srcset=\"https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image.png 800w, https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-300x169.png 300w, https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-768x432.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Google logo does not change with your theme<\/strong><\/p>\n\n\n\n<p>Here&#8217;s the reality!<\/p>\n\n\n\n<p>The image behind themed based logo is the Google&#8217;s original logo (<strong>no doodle<\/strong>)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"454\" height=\"164\" src=\"https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-1.png\" alt=\"\" class=\"wp-image-11\" srcset=\"https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-1.png 454w, https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-1-300x108.png 300w\" sizes=\"(max-width: 454px) 100vw, 454px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>The trick lies is in CSS 3: <\/strong>CSS mask-image Property<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"376\" src=\"https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-2.png\" alt=\"\" class=\"wp-image-12\" srcset=\"https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-2.png 800w, https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-2-300x141.png 300w, https:\/\/blogs.plus2digital.com\/wp-content\/uploads\/2022\/12\/image-2-768x361.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>In the image above the -webkit-mask-image is masking div as the original google logo png.<\/p>\n\n\n\n<p>And via background color &#8211; the theme sets the color matching to your chrome theme.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS <code><strong>mask-image<\/strong><\/code> property specifies an image to be used as a mask layer for an element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS mask-image Property Ever wondered how Google&#8217;s logo is displayed on Chrome home page differently according to different themes! Like below: Google logo does not change with your theme Here&#8217;s the reality! The image behind themed based logo is the Google&#8217;s original logo (no doodle) The trick lies is in CSS 3: CSS mask-image Property [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/posts\/9"}],"collection":[{"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":2,"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.plus2digital.com\/index.php\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}