css-span-degradar

Existe un truco para poder crear un texto degradado, con texturas u otra decoración, sin tener que usar Photoshop para crear la letra, solo el degradado que queramos hacer, la ventaja de degradar un texto o decorarlo por este método, sería que no usaríamos imágenes para crear el texto (sí la decoración), lo que nos da mayor accesibilidad (al poder leerse el texto aunque la imagen que se superpone encima de este no se haya cargado) y así podremos posicionar en Google (Ya que Google no posiciona imágenes igual que el texto).

Este truco no es validado por W3C por culpa del javascript, pero no hay más remedio que usarlo.

Consiste principalmente en incluir la etiqueta vacía, sin contenido alrededor, es decir, así:  < h1>< span>span>Tu textoh1>.
Vamos a empezar, primero con el código CSS, añadimos esto:

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;
}

La clave está en h1 { position: relative } y h1 span { position: absolute }, ya que de esta posición dependerá que la imagen se superponga por encima del texto.

Desgraciadamente la imagen es PNG, así que deberemos aplicar este código para poder activar la transparencia en este navegador:

<!--&#91;if lt IE 7&#93;>

<mce :style>< !
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
-->

<!--&#91;endif&#93;--></mce>

Si no deseamos poner las tags sin contenido, tendremos que hacer uso de javascript:

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>

<script type="text/javascript"><!--mce:1--></script>

Y listo, se puede ver un ejemplo de su funcionamiento.

Vía | WDW