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

• Enviar un correo con Adjunto mediante PHP Como dice el título de la entrada, hoy abarcaremos de...
• C#: Manejo de archivos de texto (I) Buenas Veamos un poco como manejar los ficheros en la...
• Editar propiedades CSS con jQuery En esta entrada abarcaré el uso de jQuery para alterar...
• Centrado perfecto con CSS Pues despues de buscar en muchos lados como conseguir un...
• Barra de menu con CSS e imagen de fondo Pués este metodo te permite tener una barra de menu...
• BBCode en PHP Quien haya frecuentado foros, esta familiarizado con el BBcode, pero...
• Añadir direcciones extra a GMail Pues con este pequeño truco podremos añadir cualquier direccion a...