AListApart：Articles：SlidingDoorsofCSS
neighborSliding Doors of CSS
by Douglas Bowman
∙Published in: CSS, HTML and XHTML, Ur Interface Design |
∙Discuss this article »
A rarely discusd advantage of CSS is the ability to layer广告英语 background images, allowing them to slide over each other to create certain effects. CSS2’s current state requires a parate HTML element for each background image. In many cas, typical markup for common interface components has already provided veral elements for our u.
One of tho cas is tabbed navigation. It’s time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. Y
ou’re most likely aware that CSS can be ud to tame a plain unordered list格莱美2014获奖名单. Maybe you’ve even en lists styled as tabs, looking something like this:
What if we could take the exact same markup from the tabs above, and turn them into something like this:
With simple styling, 博物馆的英语we can.
Where’s the Innovation?
口罩n95是什么意思Many of the CSS-bad tabs I’ve en suffer from the same generic features: blocky rectangles of color, maybe an outline, a border disappears for the current tab, a color changes for the hover state. Is this all CSS can offer us? A bunch of boxes and flat colors?
Prior to a more widespread adoption of CSS, we started eing a lot of innovation in navigation design. Creative shapes, masterful color blending, and mimicry of physical interfaces from the real world. But the designs often relied heavily on a complex constr
uction of text-embedded images, or were wrapped with multiple nested tables. Editing text or changing tab order involved a cumbersome process. Text resizing was impossible, or caud significant problems with page layout.
Pure text navigation is much easier to maintain and loads more quickly than text-as-image navigation. Also, even though we can add alt attributes to each image, pure text is even more accessible since it can be resized by urs with impaired vision. It’s no wonder that pure text-bad navigation, styled with CSS, is leaping back into web design. But most CSS-bad tab design so far is a step back in appearance from what we ud to do — certainly nothing to be included in a design portfolio. A newly adopted technology (like CSS) should allow us to create something amubetter, without losing the design quality of previous table hacks and all-image-bad tabs.candysoft
The Sliding Doors Technique
Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we u two parate background images. One for the lef
爱着你永远不会改变t, one for the right. Think of the two images as Sliding Doors that complete one doorway. The doors slide together and overlap more to fill a narrow space, or slide apart and overlap less to fill a wider space, as the diagram below shows:
记忆力的英文constantinopleWith this model, one image covers up a portion of the other. Assuming we have something unique on the outside of each image, like the rounded-corner of a tab, we don’t want the image in front to completely obscure the image behind it. To prevent this from happening, we make the image in front (left-side for this example) as narrow as possible. But we keep it just wide enough to reveal that side’s uniqueness. If the outside corners are rounded, we should make the front image only as wide as the curved portion of the image:
If the object grows any larger than the width shown above, due to differing text or type size changes, the images will get pulled apart, creating an ugly gap. We need to make an arbitrary judgment about the amount of expansion we’ll accommodate. How large do we think the object might grow as text is resized in the browr? Realistically, we should acc
ount for the possibility of our tab text increasing by at least 300%. We need to expand the background images to compensate for that growth. For the examples we’ll make the back image (right-side) 400x150 pixels, and the front image 9x150 pixels.
Keep in mind that background images only show in the available “doorway” of the element to which they’re applied (content area + padding). The two images are anchored to the outside corners of their respective elements. The visible portions of the background images fit together inside the doorway to form a tab-like shape:
If the tab is forced to a larger size, the images slide apart, filling a wider doorway, revealing more of each image:
For this example, I ud Photoshop to create two smooth, slightly three-dimensional, custom tab images shown at the beginning of this article. For one of the tabs, the fill was lightened and the border darkened — the lighter version will be ud to reprent the “current” tab. Given this technique’s model for left and right tab images, we need to expand coverage area of the tab image, and cut it into two pieces:
