{"id":374609,"date":"2022-10-26T10:05:28","date_gmt":"2022-10-26T17:05:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374609"},"modified":"2022-10-26T10:05:29","modified_gmt":"2022-10-26T17:05:29","slug":"holographic-trading-card-effect","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/holographic-trading-card-effect\/","title":{"rendered":"Holographic Trading Card Effect"},"content":{"rendered":"\n

Simon Goellner (@simeydotme)’s collection of Holographic Trading Cards<\/a> have captured our attention.<\/p>\n\n\n\n

Under the hood<\/a> there is a suite of filter()<\/code>, background-blend-mode()<\/code>, mix-blend-mode()<\/code>, and clip-path()<\/code> combinations that have been painstakingly tweaked to reach the desired effect. I ended up using a little img { visibility: hidden; }<\/code> in DevTools to get a better sense of each type of holographic effect.<\/p>\n\n\n\n

Josh Dance (@JoshDance) replied<\/a> with a breakdown of the effects<\/a> that lets you manually control the inputs.<\/p>\n","protected":false},"excerpt":{"rendered":"

Simon Goellner (@simeydotme)’s collection of Holographic Trading Cards have captured our attention. Under the hood there is a suite of filter(), background-blend-mode(), mix-blend-mode(), and clip-path() combinations that have been painstakingly tweaked to reach the desired effect. I ended up using a little img { visibility: hidden; } in DevTools to get a better sense of […]<\/p>\n","protected":false},"author":288689,"featured_media":374627,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Link: Holographic Trading Cards by @simeydotme","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1492,1473,1552],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/holographic-trading-card-effect.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":351302,"url":"https:\/\/css-tricks.com\/grainy-gradients\/","url_meta":{"origin":374609,"position":0},"title":"Grainy Gradients","date":"September 13, 2021","format":false,"excerpt":"Browse through Dribbble or Behance, and you\u2019ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers\u2019 affinity for texture, noise is rarely used in web design. In this article,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/noisy-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":276347,"url":"https:\/\/css-tricks.com\/apply-a-filter-to-a-background-image\/","url_meta":{"origin":374609,"position":1},"title":"Apply a Filter to a Background Image","date":"October 2, 2018","format":false,"excerpt":"You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It's weirdly tricky. There are CSS properties that specific to backgrounds, like background-blend-mode \u2014 but blending and filters are\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/background-filter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254378,"url":"https:\/\/css-tricks.com\/methods-contrasting-text-backgrounds\/","url_meta":{"origin":374609,"position":2},"title":"Methods for Contrasting Text Against Backgrounds","date":"May 9, 2017","format":false,"excerpt":"It started with seeing a recent Pen of Mandy Michael's text effects demos. I'm a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went \"blend modes!\", which turned out to be wrong.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283491,"url":"https:\/\/css-tricks.com\/recreating-the-facebook-messenger-gradient-effect-with-css\/","url_meta":{"origin":374609,"position":3},"title":"Recreating the Facebook Messenger Gradient Effect with CSS","date":"March 1, 2019","format":false,"excerpt":"One Sunday morning, I woke up a little earlier than I would\u2019ve liked to, thanks to the persistent buzzing of my phone. I reached out, tapped into Facebook Messenger, and joined the conversation. Pretty soon my attention went from the actual conversations to the funky gradient effect of the message\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/messenger-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267485,"url":"https:\/\/css-tricks.com\/css-techniques-and-effects-for-knockout-text\/","url_meta":{"origin":374609,"position":4},"title":"CSS Techniques and Effects for Knockout Text","date":"March 6, 2018","format":false,"excerpt":"Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It\u2019s appealing because it opens up typographic styles that we don\u2019t get out of traditional CSS properties, like\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/knockout-text-background-clip.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288325,"url":"https:\/\/css-tricks.com\/night-mode-with-mix-blend-mode-difference\/","url_meta":{"origin":374609,"position":5},"title":"Night Mode with Mix Blend Mode: Difference","date":"May 27, 2019","format":false,"excerpt":"Dark mode designs are all the rage right now but here\u2019s an interesting take: Wei Gao has built a night mode on her own site that uses mix-blend-mode: difference to create an effect that looks like this: Wei explains how she implemented this technique and the edge cases she encountered\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/light-dark-mode-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/holographic-trading-card-effect.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374609"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288689"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=374609"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374609\/revisions"}],"predecessor-version":[{"id":374748,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374609\/revisions\/374748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/374627"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=374609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=374609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}