Tricks Related to Css

Tricks Related To CSS

There are different ways of substituting css instead of an image in a website or a blog, one way is using the CSS TO SUBSTITUTE AN IMAGE is an effective way for developing sites efficiently , You may ask me the use of this procedure, it saves time and bandwidth, but also allows more flexibility when adjusting designs.

By using a border technique, we can create the effect of diagonal lines with some simple code.

Here’s what we want to achieve:

First we’ll create the box, in html, for the header and the diagonal line to sit in:

Diagonal Lines in CSS

Next we’ll give the box a width, ensuring the border is kept small:

.box {

width:150px;

text-align:right;/*move the text to the right*/

}

Finally we’ll create the diagonal effect by creating two borders:

.box h1 {

border-left:10px solid #fff; /*same as page colour*/

border-bottom:10px solid #000; /*black, bottom, border*/

font-size:18px;

color:#000; /*black text*/}

While the left border is still there, the appearance of invisibility is created by using the same colour as the background.

The below image demonstrates the actual outline of the invisible border.

The explanation of this effect is when the black, bottom, border pushes against the invisible (white) border, the the diagonal edge is created.

Browser compatibility
You maybe wondering why we can’t use the colour ‘transparent’ on the left-border, instead of white, so that the background colour or image, would show through. Unfortunately ‘transparent’ inherits the black, ‘color:#000;’ property, in Internet explorer.

Also another display problem will occur, with IE5/win, if the box or header doesn’t have a width. The simple fix is to give the header a layout value (haslayout) by using the holly hack to specify a height, as shown below.

/* For IE5-Win Hides from IE5-mac */

 html .box h1 {height: 1%;}

/* End hide from IE5-mac */

A few extra notes
If a limited width box isn’t used and you only want the border to expand the width of the heading, add to the ‘h1′ element ‘ display:inline;’.

There you have it; and here’s another diagonal border example to give you an idea of what not to do.

This entry was posted and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.