{"id":5473,"date":"2010-06-06T19:50:00","date_gmt":"2010-06-07T02:50:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5473"},"modified":"2010-06-07T04:21:57","modified_gmt":"2010-06-07T11:21:57","slug":"transparency-in-web-design","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/transparency-in-web-design\/","title":{"rendered":"Transparency in Web Design"},"content":{"rendered":"<p>How is it done? Let&#8217;s take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.<\/p>\n<p><!--more--><\/p>\n<h3>Totally Friggin Fake It<\/h3>\n<div class=\"image-wrap\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/spectrum.jpg?resize=454%2C184\" width=\"454\" height=\"184\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><br \/>\nFrom the <a href=\"http:\/\/spectrum-theme.com\/\" rel=\"noopener\">Spectrum Theme<\/a> website\n<\/div>\n<p>The end result of any web design is basically an illusion anyway. You can always create your transparent effects in Photoshop or whatever other graphics editor and export flat graphics. In Photoshop, transparent effects can be created by changing a layers opacity level, fill level, or blending mode, just to name a few.<\/p>\n<h3>Opacity<\/h3>\n<div class=\"image-wrap\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/opacitybutton.jpg?resize=367%2C95\" width=\"367\" height=\"95\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><br \/>\nThis entire button has opacity applied to it, to emphasize that it is currently &#8220;disabled&#8221;.\n<\/div>\n<p>You can make any element transparent by using the <tt>opacity<\/tt> parameter of CSS. <\/p>\n<pre><code class=\"css\">#anything {\r\n  opacity: 0.5;  \/* 50% transparent *\/\r\n}<\/code><\/pre>\n<p>If you need to support older browsers, <a href=\"https:\/\/css-tricks.com\/css-transparency-settings-for-all-broswers\/\">see here<\/a>. <\/p>\n<p>Do note that all descendants of the element with opacity also become transparent. There is no way to &#8220;force&#8221; any descendant to be come any less transparent as the parent is.  <\/p>\n<h3>RGBa \/ HSLa<\/h3>\n<div class=\"image-wrap\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/rgbaarchitects.jpg?resize=296%2C322\" width=\"296\" height=\"322\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><br \/>\nFrom the <a href=\"http:\/\/likearchitects.com\/\" rel=\"noopener\">Like Architects<\/a> site\n<\/div>\n<p>Using RGBa for a color value in CSS, you can set a transparency level on any color. This has the distinct advantage over opacity in that it doesn&#8217;t have any affect on descendants. It is also nice in that creating faded out variations of a color is as easy as changing the final alpha value. Speaking of color variations, that is even easier to do with HSLa, and is still able to handle transparency.<\/p>\n<pre><code class=\"css\">#anything {\r\n  background: rgba(0,0,0,0.5);  \/* 50% transparent *\/\r\n}<\/code><\/pre>\n<pre><code class=\"css\">#anything {\r\n  background: hsla(0,0,0,0.5);  \/* 50% transparent *\/\r\n}<\/code><\/pre>\n<h3>PNG<\/h3>\n<div class=\"image-wrap\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/shadowtranparency.png?resize=400%2C300\" width=\"400\" height=\"300\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><br \/>\nFrom a <a href=\"http:\/\/dribbble.com\/shots\/22050-Shadow-Features\" rel=\"noopener\">Dribbble<\/a>\n<\/div>\n<p>When &#8220;Saving for web&#8221; from Photoshop, you have two choices for PNG&#8217;s: PNG-8 and PNG-24. PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between. PNG-24&#8217;s, while far bigger in file size, support full alpha-transparency. <\/p>\n<p>In the example above, the shadows from the content areas are from PNG-24s so that the texture in the background can change and the shadows will still be the same.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How is it done? Let&#8217;s take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5473"}],"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=5473"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5473\/revisions"}],"predecessor-version":[{"id":6503,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5473\/revisions\/6503"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}