{"id":332479,"date":"2021-01-12T07:44:44","date_gmt":"2021-01-12T15:44:44","guid":{"rendered":"https:\/\/css-tricks.com\/?p=332479"},"modified":"2021-01-12T12:47:31","modified_gmt":"2021-01-12T20:47:31","slug":"building-flexible-components-with-transparency","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/building-flexible-components-with-transparency\/","title":{"rendered":"Building Flexible Components With Transparency"},"content":{"rendered":"\n<p><a href=\"https:\/\/cloudfour.com\/thinks\/building-flexible-components-with-transparency\/\" rel=\"noopener\">Good thinking<\/a> from Paul Hebert on the Cloudfour blog about colorizing a component. You might look at a design comp and see a card component with a header background of <code>#dddddd<\/code>, content background of <code>#ffffff<\/code>, on an overall background of <code>#eeeeee<\/code>. OK, easy enough. But what if the overall background becomes <code>#dddddd<\/code>? Now your header looks <strong>lost<\/strong> within it. <\/p>\n\n\n\n<p>That darker header? Design-wise, it&#8217;s not being exactly <code>#dddddd<\/code> that&#8217;s important; it&#8217;s about <em>looking slightly darker<\/em> than the background. When that&#8217;s the case, a background of, say <code>rgba(0, 0, 0, 0.135)<\/code> is more resiliant.  <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>That will then remain resilient against backgrounds of any kind.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRZaqYj\" src=\"\/\/codepen.io\/anon\/embed\/GRZaqYj?height=480&amp;theme-id=1&amp;slug-hash=GRZaqYj&amp;default-tab=result\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRZaqYj\" title=\"CodePen Embed GRZaqYj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Good thinking from Paul Hebert on the Cloudfour blog about colorizing a component. You might look at a design comp and see a card component with a header background of #dddddd, content background of #ffffff, on an overall background of #eeeeee. OK, easy enough. But what if the overall background becomes #dddddd? Now your header [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":332480,"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":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/transparent-flexible.png?fit=1600%2C900&ssl=1","jetpack-related-posts":[{"id":247229,"url":"https:\/\/css-tricks.com\/the-power-of-rgba\/","url_meta":{"origin":332479,"position":0},"title":"The Power of the rgba() Color Function in CSS","date":"November 10, 2016","format":false,"excerpt":"One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373057,"url":"https:\/\/css-tricks.com\/how-to-customize-wordpress-block-theme-cover-templates-with-dynamic-post-feature-images\/","url_meta":{"origin":332479,"position":1},"title":"How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images","date":"September 23, 2022","format":false,"excerpt":"If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even in the block theme directory screenshots as well. Let\u2019s consider the following example from Twenty Twenty\u00a0(a classic theme) which includes a cover\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wp-block-theme-cover-with-featured-image.jpg?fit=1200%2C596&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333537,"url":"https:\/\/css-tricks.com\/dynamically-switching-from-one-html-element-to-another-in-vue\/","url_meta":{"origin":332479,"position":2},"title":"Dynamically Switching From One HTML Element to Another in Vue","date":"February 2, 2021","format":false,"excerpt":"A friend once contacted me asking if I had a way to dynamically change one HTML element into another within Vue\u2019s template block. For instance, shifting a <div> element to a <span> element based on some criteria. The trick was to do this without relying on a series of v-if\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/button-link-swap.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6557,"url":"https:\/\/css-tricks.com\/feature-table-design\/","url_meta":{"origin":332479,"position":3},"title":"Feature Table Design","date":"June 21, 2010","format":false,"excerpt":"I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML\/CSS. Recreating cool stuff you find on the web is definitely an excercise\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":167745,"url":"https:\/\/css-tricks.com\/frosting-glass-css-filters\/","url_meta":{"origin":332479,"position":4},"title":"Frosting Glass with CSS Filters","date":"April 7, 2014","format":false,"excerpt":"While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250823,"url":"https:\/\/css-tricks.com\/creating-non-rectangular-headers\/","url_meta":{"origin":332479,"position":5},"title":"Creating Non-Rectangular Headers","date":"February 14, 2017","format":false,"excerpt":"Over at Medium, Jon Moore recently identified \"non-rectangular headers\" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo. We're talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids, complex geometric shapes, rounded\/elliptical, or even butt-cheek\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/boosted_bonobo-1.png?fit=800%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\/2021\/01\/transparent-flexible.png?fit=1024%2C576&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/332479"}],"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=332479"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/332479\/revisions"}],"predecessor-version":[{"id":332697,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/332479\/revisions\/332697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/332480"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=332479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=332479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=332479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}