jun 7, 2010

Enviado por en CSS, Diseño

Color diferente a efectos de texto mediante CSS

Para entender el proposito de esta entrada basta con ver la imagen principal de esta:

Esta entrada como lo habrán imaginado va a ser algo corta y empezaremos con nuestro texto cualquiera yo escogi una lista:

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt</li>

</ul>

Ahora, lo que se debe hacer basciamente es especificar el efecto mediante CSS y su color, y posteriormente mediante otro selector regresar al color de texto original o deseado, por ejemplo si en la primera viñeta quiero subrayado azul con letra roja seria asi:


<li>

<span style='color:#00F;text-decoration:underline'>

<span style='color:red'>Lorem ipsum dolor sit amet</span>

</span>

</li>

Sencillo, asi obtendriamos algo asi:

Para el resto vamos a querer; en el segundo: color amarillo  y tachado color azul, y en el tercero color azul con sobre la linea color amarillo.

Esto seria asi en HTML

<ul>
<li><span style='color:#00F;text-decoration:underline'><span style='color:red'>Lorem ipsum dolor sit amet</span></span></li>
<li><span style='color:#00F;text-decoration:line-through'><span style='color:#FF0'>Consectetur adipisicing elit</span></span></li>
<li><span style='color:red;text-decoration:overline'><span style='color:#00F'>Sed do eiusmod tempor incididunt</span></span></li>
</ul>

Y asi se veria:

Con esto he terminado de explicar como se logra este efecto que es valido con cualquier explorador que soporte CSS

    Posts Relacionados

    1. avatar
      FeCr_88 dice:

      Lo que tubiste que hacer .. para que Kalith entendiera :S

      PD: Kalith :S

      Usando Firefox 3.6.3 Firefox 3.6.3 en Windows XP Windows XP

    Dejar una respuesta

    Debes ser Alojarse para enviar un comentario.