Sliding doors of css part i introduced a new technique for creating visually stunning interface elements with simple text based semantic markup.
Sliding door css technique.
In sliding doors of css part i douglas bowman introduced a new technique for creating visually stunning interface elements with simple text based semantic markup.
We use the background image property because it hides the overflow and only shows the width specified and the other image slides over it to define the other end.
In part ii we ll push the technique even further.
It had its time on the web but it s probably not the smartest way to go these days.
If you haven t read part i yet you should read it now.
We have border radius now and gradient backgrounds and all that which unlock most of what we were trying to achieve back in the day of sliding doors.
One image is long over which the text is laid and the other image closes the other side.
Css sliding door using only 1 image may 27th 2008 in css tutorials by kailoon before i know about this technique i was using different images for each of the button i needed in a navigation bar.
One for the left one for the right.
In part ii he pushes the technique even further with rollovers a fix for ie win s css bugs and lots more.
Beautifully crafted truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images.
Think of these two images as sliding doors that complete one doorway.