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.
Video Screencasts → #17: Sliding Doors Button
#17: Sliding Doors Button
Chris Coyier
on
(Updated on )
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
Will you please teach us, how to calculate the images sprite coordinates mathematics in details?
A screencast on this topic only.
Please it’d make me clear to apply this technique.