Efectos Web: Volúmenes sobre cabecera con CSS

Varios ejemplos de creación de efectos de volumen sobre cabecera, usando imágenes de fondo con CSS.

Ejemplo 01:

/* Degradado 01 -----------------------------------------*/

div.degradado01 h1 {

font: bold 330%/100% "Lucida Grande", Arial, sans-serif;

font-family: Georgia, 'Times New Roman', Times, serif;

position: relative;

margin: 30px 0 50px;

color: #464646;

}

div.degradado01 h1 span {

background: url(images/gradient-white.png) repeat-x;

position: absolute;

display: block;

width: 100%;

height: 31px;

}

Ejemplo 02:
/* Degradado 02 -----------------------------------------*/
div.degradado02 {
background: #000;
padding: 30px 0 30px 30px;
margin: 30px 0 50px;
}
div.degradado02 h1 {
font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: -2px;
}
div.degradado02 h1 span {
background: url(images/gradient-dark-stripe.png) repeat-x;
position: absolute;
bottom: -0.1em;
display: block;
width: 100%;
height: 29px;

}

Ejemplo 03:
/* Degradado 03 -----------------------------------------*/
div.degradado03 {
background: #000;
padding: 30px 0 30px 30px;
margin: 30px 0 50px;
}
div.degradado03 h1 {
font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: -2px;
}
div.degradado03 h1 span {
background: url(images/gradient-dark-stripe-hz.png) repeat-x;
position: absolute;
bottom: -0.1em;
display: block;
width: 100%;
height: 29px;

}

Descarga los archivos del siguiente enlace: Volúmenes sobre cabecera