While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background images to a single spot of text. When that text grows or shrinks, these overlapping images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button.<\/p>\n","protected":false},"excerpt":{"rendered":"
While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background images to a single spot […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":4625,"url":"https:\/\/css-tricks.com\/snippets\/css\/perfect-css-sprite-sliding-doors-button\/","url_meta":{"origin":1605,"position":0},"title":"Perfect CSS Sprite \/ Sliding Doors Button","date":"November 5, 2009","format":false,"excerpt":"Big note here! Sliding doors is a pretty old technique. It had its time on the web, but it's probably not the smartest way to go these days. We have border-radius now and gradient backgrounds and all that, which unlock most of what we were trying to achieve back in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3157,"url":"https:\/\/css-tricks.com\/video-screencasts-2\/","url_meta":{"origin":1605,"position":1},"title":"Video Screencasts","date":"July 29, 2009","format":false,"excerpt":"#20: Introduction to jQuery Running time: 18:12 The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311890,"url":"https:\/\/css-tricks.com\/video-screencasts\/188-exploring-the-overlapping-header-pattern\/","url_meta":{"origin":1605,"position":2},"title":"#188: Exploring the Overlapping Header Pattern","date":"May 29, 2020","format":false,"excerpt":"Snook published an article titled \"Overlapping Header with CSS Grid\" where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the main content area sneaks up into it and overlaps the background of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Overlap-Thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":151205,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/15-chaining\/","url_meta":{"origin":1605,"position":3},"title":"#15: Chaining","date":"September 27, 2013","format":false,"excerpt":"We've talked a number of times now about little touches in the jQuery API that are really quite nice. Everything is well considered and refined. Chaining definitely falls into that category. Once you start using it and understand it, it feels extremely natural, like there should be no other way.\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3699,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/sliding-background-links\/","url_meta":{"origin":1605,"position":4},"title":"Sliding Background Links","date":"September 3, 2009","format":false,"excerpt":"$('a', '#nav').hover(function() { if(!$(this).parent().hasClass('current')) { $(this).stop().animate({ backgroundPosition: '(0 -75px)' }); } }, function() { if(!$(this).parent().hasClass('current')) { $(this).stop().animate({ backgroundPosition: '(0 -0)' }); } }); Slides up and down the background image of a link when rolled over. Requires background position plugin.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340283,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-composite\/","url_meta":{"origin":1605,"position":5},"title":"mask-composite","date":"May 10, 2021","format":false,"excerpt":"The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it. .element { mask-composite: subtract; } When there are multiple mask layer images, they need to be composited into one final mask layer.\u00a0mask-compositespecifies\u00a0how mask layers\u00a0with different shapes are combined into a single image.\u00a0Think\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1605"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=1605"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1605\/revisions"}],"predecessor-version":[{"id":18083,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1605\/revisions\/18083"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1605"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}