CSS y los textos (Parte 4)

Este es un ejemplo de las posibilidades que tiene el uso del tag STYLE para crear formatos de texto especiales.

Para ser utilizado, todos los tags DIV deben ser incluir la propiedad:

position:absolute

y, al terminar de usarlo, se debe "limpiar" el estilo mediante:

<div style="clear:both;"></div>

Sombreado

Sombreado

<div style="position:absolute;">
<div style="position:absolute;left:2px;top:2px;">
... el texto ...
</div>
<div style="position:absolute;left:0px;top:0px;">
... el mismo texto ...
</div>
</div>
<div style="clear:both;"></div>

Dentro de un bloque general, se "dibujan" otros dos, el primero será la sombra y el segundo, desplazado una cierta cantidad de pixeles en cualquier dirección , será el que se verá de frente.

Embossed

Embossed

Embossed

<div style="position:absolute;">
<div style="position:absolute;left:-2px;color:sombra_1;top:-1px;">
... el texto ...
</div>
<div style="position:absolute;left:2px;color:sombra_2;top:2px;">
... el mismo texto ...
<div>
<div style="position:absolute;left:0px;color:fuente;top:0px;">
... el mismo texto ...
</div>
</div>
<div style="clear:both;"></div>

Dentro de un bloque general, se "dibujan" otros tres, uno oscuro, desplazado hacia arriba, el segundo hacia abajo, y el tercero que el que será verá al frente.

En todos los casos, lo que se hace es crear variaciones de "luz", "sombra" y "relleno" con fuentes de diferentes colores y desplazarlas unos pocos pixeles en cualquier dirección:

<div style="position:absolute;">
<div style="... la sombra ...">... texto ... </div>
<div style="... otra sombra ...">... texto ... </div>
<div style="... el relleno ...">... texto ... </div>
</div>

Vagabundia

Vagabundia

Vagabundia

Lamentablemente, su uso dentro de Blogger se limita a una sola palabra (no tengo idea de la razón). En cualquier otro tipo de página web, la longitud del texto no tiene limitaciones.