Update July 5, 2011. Here’s what I’d recommend for usage today, in way easier copy-and-pasteable format.<\/div>\n
.transparent {\r\n\tzoom: 1;\r\n\tfilter: alpha(opacity=50);\r\n\topacity: 0.5;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Transparency is one of those CSS properties that has a weird history and requires lots of different properties and values […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":216,"url":"https:\/\/css-tricks.com\/the-different-techniques-for-applying-the-png-hack\/","url_meta":{"origin":64,"position":0},"title":"The Different Techniques for Applying the PNG Hack","author":"Chris Coyier","date":"March 5, 2008","format":false,"excerpt":"Alpha-transparent PNG's, (\"PNG-24\" for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be underneath it, even if that background changes. This may seem\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2151,"url":"https:\/\/css-tricks.com\/rgba-browser-support\/","url_meta":{"origin":64,"position":1},"title":"RGBa Browser\u00a0Support","author":"Chris Coyier","date":"May 19, 2010","format":false,"excerpt":"This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers. RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this: div { background: rgba(200, 54, 54,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/rgbaexample.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":195076,"url":"https:\/\/css-tricks.com\/gooey-effect\/","url_meta":{"origin":64,"position":2},"title":"The Gooey Effect","author":"Lucas Bebber","date":"February 4, 2015","format":false,"excerpt":"The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I've ever seen on the web. So much so I couldn't resist blogging about them myself several times. Much better this time: we got the man himself to explain how SVG filters\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307863,"url":"https:\/\/css-tricks.com\/no-comma-color-functions-in-css\/","url_meta":{"origin":64,"position":3},"title":"No-Comma Color Functions in CSS","author":"Chris Coyier","date":"May 4, 2020","format":false,"excerpt":"There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more clear. Before, every single color function actually needs two functions, one for transparency and one without, this eliminates that\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/09\/nerd-color.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/09\/nerd-color.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/09\/nerd-color.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/09\/nerd-color.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/09\/nerd-color.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":235423,"url":"https:\/\/css-tricks.com\/the-blur-up-technique-for-loading-background-images\/","url_meta":{"origin":64,"position":4},"title":"The “Blur Up” Technique for Loading Background Images","author":"Emil Bj\u00f6rklund","date":"December 7, 2015","format":false,"excerpt":"The following is a guest post by Emil Bj\u00f6rklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop. Here, Emil explores a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245767,"url":"https:\/\/css-tricks.com\/styling-underlines-web\/","url_meta":{"origin":64,"position":5},"title":"Styling Underlines on the Web","author":"John D. Jameson","date":"October 10, 2016","format":false,"excerpt":"Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what\u2019s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post. There are a bunch of different ways to style underlines. Maybe you remember\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":13237,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/64\/revisions\/13237"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}