Stylish Heading – 4 Image Replacement Tested

Image may be NSFW.
Clik here to view.

Heading Image Replacement

4 tecniche di Image Replacement per ottenere heading di stile.

Image Replacement using Span repeat

CSS

H1 {
margin-left: 0px;
margin-top: 0px;
position: relative;
}

H1 span {
background: transparent url('gradient.png') repeat-x scroll 0 0;
display: block;
height: 37px;
position: absolute;
width: 100%;
margin-top: 12px;
}

HTML

<H1><span></span>WebAir</H1>

Demo > Stylish Heading with CSS

Image Replacement using Span (FIR technique)

CSS

H1 {
background:transparent url(webair-blog.png) no-repeat scroll 0 0;
font-family: arial;
font-size: 2.0em;
margin-left: 0px;
margin-top: 0px;
position: relative;
text-align: left;
width: 270px;
height: 56px;
}

H1 span {
display: none;
}

Demo > Image Replacement (FIR technique)

Image Replacement using Span (alternative)

CSS

H1 {
background:transparent url(webair-blog.png) no-repeat scroll 0 0;
font-family: arial;
font-size: 2.0em;
margin-left: 0px;
margin-top: 0px;
position: relative;
text-align: left;
width: 270px;
height: 56px;
display:block;
}

H1 span {
display:block;
height:120px;
position:relative;
width:302px;
z-index:-1;
}

HTML

<H1><span>WebAir</span></H1>

Demo > Image Replacement using Span (alternative)

Image replace using CSS and JS:

more info > http://www.sitepoint.com/article/image-replacement-state-scope/

Aspettiamo i vostri commenti e segnalazioni.