Research on the "Sliding Gate" code

Nonsense first, first on the code:

/****************************************
This code originates from Css-tricks and the following information is published by blogger:
CREATED By:brandon Setter
Website:http://media-sprout.com
Follow Me:twitter.com/bsetter
CREATION date:10/2009
VERSION 1.0
*****************************************/

The first is the HTML code:

1 <Divclass= "Clearbutton">2     <aclass= "Globalorangebutton"href="#">3         <span>So neat!</span>4     </a>5 </Div>

Then the CSS code:

1 /*GLOBAL ORANGE BUTTON *****************************/2 A.globalorangebutton span{  3  Span style= "color: #ff0000; Text-decoration:underline; " >background :  transparent URL (' Images/button_ Left_orange.png ') no-repeat 0 0 ;  display :  block ;  5  line-height :  22px ;  padding : ;  7 Color:#fff;8}9 Ten A.globalorangebutton{ One background:transparent URL (' images/button_right_orange.png ') no-repeat top A - Right; - Display:Block; the float: Left; - Height:34px; - Margin-right:6px;  padding-right: 20px; + text-decoration:None; - font-family:Arial, Helvetica, Sans-serif; + font-size:12px; A Font-weight:Bold; at} -  - A.globalorangebutton:hover span{ - background-position:0-34px;Color:#fff; -} -  in A.globalorangebutton:hover{ - background-position:right-34px; to}

Long-left

Short type Right

"Sliding door" principle

In fact, what we call "sliding door" is a technique for making picture buttons, which can be implemented with pure CSS.

Apply a long left picture and a short right picture, the long picture is on the other side of the element background, and the short one is on the opposite side of the other element, and the text is inside the short shape of the picture element. Thus, when the text increases, it causes the width of the element to grow longer, that is, to move to the right, like sliding. The extra part of the long left picture is located under the short right picture, and is hidden because the width of the outermost box element exceeds the overflow, and the hidden part is displayed when the short right picture is sliding.

The source code block bold and underlined part of the author think the most important part of the other just to complement the style.

SOURCE Analysis

The background part does not repeat, the basic reader should be very easy to read. It should be mentioned here that the long left image is applied to the <span> element, and the short right picture is applied to the <a> element. Personally, this expands the hotspot area of the,<a> element when it is expanded. This way, when the content expands, the entire button remains clickable, without a blind spot.

Here the,<span><a> two elements are set to Display:block, so that the width and height of the element can be adjusted freely to completely show the button as the background. At the same time, it should also be used to make float.

Other parts of the code is nothing more than adjusting the width and height of the entire element and font style, and then related to the hover style changes.

　　

In fact, in general, the css-tricks of the sliding door, in fact, there is a CSS sprite code is relatively simple, not too many complex ingredients. Speaking, this should be what we coders need to do.

Research on the "Sliding Gate" code