Sliding door technology in CSS _css/html

issn:1534-0295. October 2003–issue No. 160

Original Author: Douglas Bowman

Source: A List Apart

Chinese translation: 54player.com Nobita

Copyright Description: The copyright of this translation belongs to the translator 54player.com Nobita. If you need to reprint the publication, please contact the author first

In CSS, an advanced place that is often discussed is the layering of background images, and allows them to slide over each other to create special effects. According to CSS2.0 's current rules, each background image needs its own HTML element. In many cases, a typical tag already provides a variety of elements for a generic interface component for us to use.

The tag navigation bar is one example. In the past, we used these tags frequently and have become a very popular way to navigate the site. Today, with the prospect that CSS has been widely supported, we can make a more quality and better appearance of the label navigation bar for our site system. You may know that CSS can be used to "tame" unordered lists, and perhaps you've seen a list of tags in this style:

What if we want to use a similar tag like this to turn the navigation labels into this style?

After a simple design, we can do it.

Where is the innovation?

Many of the CSS-based navigation labels I've seen have most of a kind of feature: rectangular color blocks, maybe just an outline, no border for the currently selected tab, and the label changes color when the mouse pointer swims over it. Is this what CSS can give us all? A series of small boxes and monotonous colors?

Before CSS is widely used, we've seen many innovations in label navigation design. Original appearance, skillful color blending, and imitation of many physical interfaces in the real world. However, these designs tend to be overly dependent on complex production, text-like images, or packaged into several nested tables. Modifying the text or changing the order of the labels requires a complex process. The expansion of the text is more impossible, or to the layout of the page greatly affected.

The plain text navigation bar is more sustainable and faster to load than the text, the image's navigation bar. Similarly, we can even add an ALT attribute to each image, and for the visually impaired, plain text is more free to change size. It's not surprising that text-only navigation bars, and CSS styles, are back on the web design. However, most CSS based navigation bar design, so far is still meaningless. A technology that has recently been adopted (such as CSS) can make us do better, without losing the results of the table and picture tags mentioned earlier.

Sliding Door Technology

Beautiful craft, really flexible interface components, and according to the text adaptive size, we can use two separate background images to create it. One on the left and one on the right. Imagine the two images as two sliding doors, sliding together and overlapping, occupying a narrower space, or sliding each other to occupy a wider space, as shown in the following illustration:

In this model, an image obscures a part of another picture. Suppose we place some unique content around each image, such as the rounded corners of the label, we do not want the image above to be completely obscured by the next pair. To prevent this from happening, we can control as narrow as possible the image above (the one on the left of this example). However, still need to ensure a certain width to show the uniqueness of the label side. If the outer corner is rounded, we should control the image above and its arc section with the same width.

If the target grows in size and exceeds the width shown above, the text size and font changes, and the image is pulled apart, creating an unsightly gap. What we need to determine is how much of this scalability will be predicted. If you change the size of the font in the browser, will the target grow again? In practical terms, we should at least estimate the size of the font to grow to 300%. Background images also have to adapt to this growth. For the above example, we set the image below (that is right) to 400*150 pixels, with the above set to 9*150 pixels.

In the mind, there is always the understanding that the background image only shows a valid space (i.e., content area and padding, called doorway) that can be filled with content. These two images are always anchored to each other's outer corners. The visible parts of the background image and together form a space with this label shape (doorway):

If the label is propped up, the image is slid open, the doorway is widened, and the image will be revealed more:

In this case, I made two smooth, thin 3D label images in Photoshop, as shown at the beginning of the article. For one, the interior is bright and the border is dim to represent the currently selected label. Applying this technique model to the left and right two images, we need to enlarge the area covered by the label image and cut it into two parts:

The same approach is applied to the label called "Current". Once we have completed these four images (1, 2, 3, 4), we can start using tags and css to make our tags.

The creation of a label

When you're working with CSS to create a horizontal list, you'll find at least two ways to arrange the list items on the same line. Both methods are different, but all need CSS to solve the confusion caused by the layout. One method uses inline box and the other is floats.

Method One, perhaps the more common one, is to display the list items inline. The charm of the inline method is its simplicity. However, for the sliding door technology we are going to talk about, the inline approach has some problems with interpretation on specific browsers. Method Two, which is what we're going to focus on, is to arrange the list items on the same line with floats. Sadly, floats's seemingly contradictory behavior just avoids the logic of nature. Nevertheless, the basic understanding of multiple floating elements and the significance of reliable fluctuations are still worth discussing.

We'll use another floating element to solve the problem of arranging floating elements. In this way, the parent element includes the child class elements completely. As a result, we can add background color and background image to the label. It is important to remember that the text element immediately following the label clears the floating object with the clear function in the CSS. This avoids the position of the floating label affecting other elements on the page.

We start with the following tags:

<div id= "header" >
  <ul>
   <li><a href= "#" >Home</a></li>
   <li id= " Current "><a href=" # ">News</a></li>
   <li><a href=" # ">products</a></ li>
   <li><a href= "#" >About</a></li>
   <li><a href= "#" >contact</a ></li>
  </ul>
</div>

In reality, #header div may also contain logos and search boxes. For our example, we have to shorten the value of hyperlinks in each anchor chain. Obviously, these values should contain the location of the file or directory correctly.

We started the design list from the Location #header container. This ensures that the container is actually acting as a container to accommodate the floating list items within it. Now that the element is floating, we also need to declare its width to be 100%. Add a temporary yellow background to ensure that the parent class container completely fills the entire area behind the label. Also, set the default text properties to ensure a consistent style:

#header {
  float:left;
  width:100%;
  Background:yellow;
  font-size:93%;
  Line-height:normal;
  }

Now, we also need to set the default margin/padding value of 0 for the unordered list and remove the tag before the list item. Each list item is left floating:

#header ul {
  margin:0;
  padding:0;
  List-style:none;
  }
#header li {
  float:left;
  margin:0;
  padding:0;
  }

By setting the anchor chain as a block object, we can control all the styles without worry:

#header a {
  display:block;
  }

Next, we add the background image on the right to the list item (change as shown in bold ):

#header li {
  float:left;
  Background:url ("Norm_right.gif")
   no-repeat right top;
  margin:0;
  padding:0;
  }

Before adding the image to the left, we can look at the effect of 1 of the effects so far. (in effect, ignore the rules in the body.) Set only the properties of the basic margin,padding,colors,text. ）

---

Now we can place the left image on the left side of the anchor chain (the element inside the container). We also add padding, enlarge the label and push the text away from the edge of the label:

#header a {
  display:block;
  Background:url ("Norm_left.gif")
   no-repeat left top;
  padding:5px 15px;
  }

So we get an effect of 2. Notice how our labels are shaped. Here, Ie5/mac's users will instantly marvel, "Oh my God, my tags are stacked vertically and extend to the entire screen!" "Don't worry, we'll fix it for you right away." For now, try to follow the instructions below, or if it is convenient, temporarily change the other browsers, and the Ie5/mac version of the problem will be resolved immediately.

---

Now that the background image for the generic label is complete, we want to replace the image for the current tab. We do this by adding the id= "current" and the anchor chain to the target list item. Since there is no need to change the other appearance of the background, except for the image, we use the Background-image feature:

#header #current {
  background-image:url ("Norm_right_on.gif");
  }
#header #current a {
  background-image:url ("Norm_left_on.gif");
  }

We're going to add a border under the label. However, applying a border property to the #header container of the parent class will not resolve the current label without Borders. So we made a new image with a border in place of it. Again, we can add a gradient effect to it:

We place the image in the background of the #header container (instead of the original yellow background), move the background image to the bottom, and add the background color to the blank space left above the image. At the same time, remove from the body inherited from the padding, for the UL on the left and right add 10 pixel padding:

#header {
  float:left;
  width:100%;
  background: #DAE0D2 URL ("bg.gif")
   repeat-x bottom;
  font-size:93%;
  Line-height:normal;
  }
#header ul {
  margin:0;
  padding:10px 10px 0;
  List-style:none;
  }

We have to have the current tab cover the border, as indicated below. You might think we're going to add the bottom border to the #header背景图像中去 that corresponds to its color, and then change the bottom border color of the current tab to white. However, for the discerning observer, there are still some small differences to be found. So we change the padding of the anchor to create a right angle for the "current" label, as in the following magnified example:

We do this by reducing the bottom padding value (5px-1px=4px) of the 1-pixel ordinary anchor chain, and then subtracting the padding from the "current" anchor.

#header a {
  display:block;
  Background:url ("Norm_left.gif")
   no-repeat left top;
  padding:5px 15px 4px;
  }
#header #current a {
  background-image:url ("Norm_left_on.gif");
  padding-bottom:5px;
  }

After a change, the bottom border appears in the Normal tab, but it is hidden in the current tab. So we got an effect of 3.

Finishing work

A keen observer may notice a white label corner in the previous example. These opaque corners are used to prevent the image below from being through a pair of above. Theoretically, we can try to use part of the background image to fit the background of the tag. But our labels will grow in height, trying to move the background color, the background image will be relatively low. Instead, change the image to make the corner of the label Transparent. If the arc is antialiasing, we use the more average background color at its edges.

Now, the corners have become transparent, and the image on the left will go through the corners of the right image. To compensate, we add a padding (9px) that matches the width of the left image to the table item. Now that we've added padding to the table item, we need to remove the same width to get the text centered (15PX-9PX=6PX):

#header li {
  float:left;
  Background:url ("Right.gif")
   no-repeat right top;
  margin:0;
  padding:0 0 0 9px;
  }
#header a {
  display:block;
  Background:url ("Left.gif")
   no-repeat left top;
  padding:5px 15px 4px 6px;
  }

is still not over, because adding a 9-pixel padding creates a gap between the left image and the left side of the label. Now, to the left and to the right, the edges of the "doorway" are connected together, and we don't need to keep the left image above. So, swap the order of the two background images instead. Also swap two images used in the current tab:

#header li {
  float:left;
  Background:url ("left.gif")
   no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
#header A, #header strong, #header span {
  display:block;
  Background:url ("right.gif")
   no-repeat right top;
  padding:5px 15px 4px 6px;
  }
#header #current {
  background-image:url ("left_on.gif");
  }
#header #current a {
  background-image:url ("right_on.gif");
  padding-bottom:5px;
  }

After finishing these, we reached the effect of 4. Note that a transparent corner creates an invalid area on the left side of the label that cannot be clicked. This area is outside the text, but it is still perceptible. It is not necessary to use transparent images on both sides of the label. If we don't want to produce this invalid area, then we have to use the color behind the tag and use this color instead of the transparent image in the corner of the label. Now we just keep this transparent corner.

---

For the remaining questions, we will complete all the changes at once: Add the label text, change the text in the normal label to Brown, change the current label text to dark gray, remove the underline of the link, and change the hover text color to the same dark gray. After a series of changes, we will see the effect so far 5.

Resolution of consistency

After the effect 2, one of our accepted problems is that in Ie5/mac browsing, each tag extends and occupies the width of the entire browser, so that the tags are stacked vertically. This is not what we want.

In most browsers, floating an element shrinks, shrinking to the size of the content it contains. If a floating element contains an image or an image itself, it shrinks to the width of the image. If it contains only text, it will shrink to the width of the longest text that cannot be opened.

A problem appears in the picture in Ie5/mac when a auto-width block object element is inserted into a floating element. Other browsers still shrink the float to a minimum, ignoring the block object elements within the container. But Ie5/mac does not follow this, instead it expands the float and block object elements to the widest possible width. To solve this problem, we float the anchor chain at the same time, but only for Ie5/mac, so as not to give up other browsers. First, we set the floating rules for the anchor chain. We then use the backslash annotation method to hide the rule so that it only takes effect on IE5/MAC and ignores other browsers:

#header a {
  float:left;
  Display:block;
  Background:url ("Right.gif")
   no-repeat right top;
  padding:5px 15px 4px 6px;
  Text-decoration:none;
  Font-weight:bold;
  Color: #765;
  }
/* commented backslash Hack hides rule from
   ie5-mac \*/
#header a {float:none;}
/* End IE5-MAC hack * *

Now the Ie5/mac browser will display the label as we expect it to look 6. Nothing needs to change for a Ie5/mac browser. Note that the bugs in the Ie5.0/mac series of explanations are resolved in IE5.1. Therefore, the sliding door technology encountered in the 5.0 version of the problem is beyond the hack limit. Since upgrading to Ie5.1/mac is no longer a problem, the share of OS 9 macs/ie5.0 should gradually shrink to very low.

Extrapolate

We've just rehearsed the sliding door technique, creating navigation labels with plain text and unordered lists, with a small number of styles. Its loading speed is fast, it is sustainable, and the size of the text can be greatly scaled without damaging the appearance. There is no need to reiterate the resilience of sliding door technology in creating complex-style navigation bars.

There is nothing to do but to imagine. The final effect shows us an example, but our design cannot be limited to death.

In some cases, the label is not necessarily symmetrical. I soon made the second version of this label, also has the shadow 3D style, has the angle edge, and has the characteristic left part. Based on the second version, we can even swap the location of the left and right two images. With this meticulous layout and smart image control, we can remove the button's bottom border so that the label image is better adapted to the background, as shown in the third version. If your browser supports multiple style sheet switching, you can even switch between multiple versions of the navigation bar.

There are still many other effects that we have not mentioned. To quickly mention, I change the text color of the mouse hover, but the whole image can be replaced to create a more interesting transformation effect. Even if you have two nested HTML elements in the tag, you can use CSS to achieve some of the effects we haven't thought of. We create only horizontal tabs in this case, but sliding doors can also be applied to many other situations. What do you think, sir?

Other language versions of this article

English (alistapart.com)

Italian (gdesign.it)

Russian (id-as.com)

Click here to participate in the discussion on this article

Translated with the permission of A List Apart Magazine and the author[s].

Translator's words: The first translation of the article, for many words noncommittal, it is inevitable that there are some mistakes, look forward to the reader's correction.

Email:mencken.wong (at) gmail.com