Three methods for implementing sliding doors and three methods for sliding doors

Three methods for implementing sliding doors and three methods for sliding doors
Directory [1] Definition [2] case effect [3] Cut graph [4] implement three-layer nested two-layer nesting absolute positioning [5] effect Definition

Before the appearance of border-radius, a sliding door is used to achieve the rounded corner effect. The sliding door uses the layering of background images and allows them to slide over each other to create some special effects.

 

Case Effect

 

Cut Graph

Implementation Method

There are three methods to implement a sliding door: three layers of nesting, two layers of nesting, and absolute positioning.

 

Layer-3 nesting

Three Layers of nesting, text can only be written to the innermost div, suitable for large images or high expansion requirements, such as navigation.

[NOTE 1] to make the sliding door suitable for multiple occasions, the left and right corners must be transparent to expose the background color. If the left and right sides are pressed in the middle, the transparent part of the left and right corners is exposed in the middle, therefore, it can only be changed to the middle pressure left and right, and then the middle uses margin, not stacked with the left and right.

[NOTE 2] Because the sliding door requires adaptive width, use float or inline-block to open the <div> of the outermost layer from the content.

. BoxL {display: inline-block; background: url('boxL.png ') no-repeat left 0 ;}. boxR {background: url('boxR.png ') no-repeat right 0 ;}. box {background: url('boxM.jpg ') repeat-x; font: 14px/30px "at"; color: white; padding: 1px 10px 0; margin: 0 8px ;}

<Div class = "boxL"> <div class = "boxR"> <div class = "box"> about us </div>

 

Two-layer nesting

Two layers of nesting, the text can only be written to the innermost div, the limitation is that the text can only reach the width of the parent div at most, suitable for small images or small expansion requirements, such as buttons.

. BoxR {display: inline-block; background: url('boxR.png ') no-repeat right 0 ;}. boxB {background: url('boxB.jpg ') repeat-x; font: 14px/30px "at"; color: white; padding: 1px 10px 0 18px; margin-right: 8px ;}

<Div class = "boxR"> <div class = "boxB"> about us </div>

 

Absolute Positioning

Sliding Doors made of absolute positioning have compatibility, because in IE6, if the absolute width (height) of the parent class is an odd number, the right (buttom) of the element will have a 1px deviation, there is no solution.

. BoxL {position: absolute; top: 0; left:-9px; width: 9px; height: 31px; background: url('boxL.png ') no-repeat right 0 ;}. boxR {position: absolute; top: 0px; right:-9px; width: 9px; height: 31px; background: url('boxR.png ') no-repeat right 0 ;}. box {position: absolute; background: url('boxM.jpg ') repeat-x; font: 14px/30px ""; color: white; padding: 1px 10px 0; margin: 30px ;}

<Div class = "box"> <span> about us </span> <div class = "boxL"> </div> <div class = "boxR"> </div> </div>

 

Effect