Simple Application of CSS Sliding Door Technology

I have received a question from readers of Yuan mafei today. I think it is more valuable. Many readers may encounter similar problems when studying CSS. So here we will explain in detail.

His problem is:

"I am a CSS-loving reader. I have finished reading all the books you have written! However, I have a question that you have not introduced in your books. I drew a top image, but there was a pattern on the left, a pattern on the right, a basemap image in the middle, and a text title. I don't know how to define it with CSS! So I have to ask you! "

I understand that his problem is to have a background image under the title text, such:

Cutting-edge video classrooms

For such titles, if the title width is fixed, it is very simple. You can create a fixed background image and use it as the H1-marked background-image.

If the title width is not fixed, you need to change the width and ensure that the pattern is at both ends of the left and right. You need to use a technology called slide door. For example, the title below and the example above change the width, but the pattern at both ends of the left and right remains correct.

Cutting-edge video classrooms

This is achieved through sliding door technology. The so-called "sliding door" is two nested elements, each using a background image, the middle part of the two overlaps, the two ends do not overlap, so that the patterns on both sides can be displayed, the width of the middle part can be automatically adapted. Therefore, when the width is changed, the pattern between the left and right sides remains unchanged. The name "Sliding Door" vividly describes the nature of this method. Two images are like two doors, and the two can slide. When the width is small, they overlap more, when the width is large, there will be less overlap.

The procedure is as follows:

First, two HTML elements are required for "hanging" two background images. Therefore, a layer of span is nested in the middle of the H3 mark:

1	<H3> <span> title text </span>

Then, set the CSS styles of H3 and span respectively:

1234567891011121314151617

H3 { Font-size:13px ; Line-height :21px ; Text-align : Center ; Width :200px ; /* Modify this value to change the width and keep the pattern at both ends */ Background-Image : URL ( BG . Gif ) ; Background-repeat : No-repeat ; Padding-left :40px ;} Span { Display : Block ; Padding-Right :40px ; Background-Image : URL ( BG . Gif ) ; Background-repeat : No-repeat ; Background-Position : Right ; }

As you can see, the two actually use the same background image, which is shown below.

 

The key point is that because the span element is in the H3 element, the span background image is on the H3 background image. H3 presents the pattern of the left side by setting the padding on the left side.

SPAN uses the background-position attribute to display the background image from the right side, so that the right side of the background image is displayed.

If you are not sure, click here to view the sliding door effect, download the file to your computer, modify the width, and test the effect.

If you are familiar with CSS, the above CSSCodeIt can be abbreviated as follows:

123456789101112

H3 { Font :13px / 21px ; Text-align : Center ; Width :200px ; /* Modify this value to change the width and keep the pattern at both ends */ Background: URL ( BG . Gif ) No-repeat ; Padding-left :40px ; } Span { Display : Block ; Padding-Right :40px ; Background : URL ( BG . Gif ) No-repeat Right ; }

The "sliding door" is a very useful technology that can be used in many places. In the recently written "CSS design thorough research" book, we have used the sliding door technology many times to solve various problems, the core is to solve the problem of adapting to the width. In many places, such as creating navigation menus, creating shadows for images, and setting background colors for page layout, there is a "sliding door. If you are interested, you can refer to it after the book is published.