View them here!

What is sliding doors technique?

The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side – like in the example below.

LEFT                                                                            RIGHT

Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.

Styling the button

First, let’s take a look at the HTML elements that will simulate button. We have <span> element within the <a> element. Span element contains left, wider image and text. The width of the text will determine the size of the button.

<a class="button" href="#"><span>Submit</span></a>

Now let’s take a look at the CSS code. We have a .button class that will be applied to <a> element and .button span class that will be applied to <span> element within <a> element. We also have .button:hover span that will change the font style within <span> element.  And that’s all. Simple, eh? The comments in the code below describes each element.

a.button {    /* Sliding right image */background:

transparent url('button_right.png') no-repeat scroll top right; 

display: block;

float: left;

height: 32px; /* 

CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */

margin-right: 6px;

padding-right: 20px; /* 

CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */

/* FONT PROPERTIES */

text-decoration: none;

color: #000000;

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:bold;

}a.button span {

/* Background left image */ 

background: transparent url('button_left.png') no-repeat;

display: block;

line-height: 22px; /* 

CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */

padding: 7px 0 5px 18px;

}

a.button:hover span{

text-decoration:underline;

}

The result will look like the examples below.

Please visit  www.jankoatwarpspeed.com for more information with regards to this technique.

1. Rounded corners without images

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2. Style your order list

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

3. Tableless forms

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

4. Double blockquote

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

5. Gradient text effect

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

For more in depth look please visit stylized web