JMiur [E]

Como alguna vez conté, una de las "nuevas" características del CSS son los pseudo-elementos. Dos de ellos, AFTER y BEFORE junto con la propiedad CONTENT permiten insertar de manea automática, cualquier tipo de contenido en un elemento HTML.

Supongamos que escribimos el siguiente código:
<abbr">Un texto de ejemplo.</abbr>
lo que veremos será esto:

Un texto dentro de una etiqueta ABBR.

NOTA: si bien se supone que la etiqueta ABBR se utiliza para indicar una abreviatura, en este caso la voy a emplear porque es una de las pocas que no tiene propiedades CSS establecidas.

Como es sabido, para agregarle propiedades a una etiqueta, utilizamos CSS:
abbr {
font-size: 14px;
font-weight: bold;
color: #37B4DD;
}
de esta manera, cada vez que utilicemos ABBR, veremos esto:

Un texto de ejemplo.

Ahora, vamos a utilizar los pseudo-elementos AFTER y BEFORE para enmarcar el contenido de la etiqueta con dos imágenes que representen "comillas":
abbr:before {content: url("unaImagen.gif");}
abbr:after {content: url("otraImagen.gif");}
y veremos esto:

Otro texto de ejemplo.

simplemente, BEFORE inserta la imagen de las comillas ANTES del contenido y AFTER inserta las comillas DESPUÉS.

Utilizando estos pseudo-elementos, en phoenity.com nos muestran una forma interesante de ocultar la dirección de email a los spambots y evitar recibir tanto correo basura:
address:after {content: " \3Cladireccion\40servicio.com\3E;";}
donde utilizamos la expresión \40 en lugar del carácter arroba (@) y las expresiones \3C y \3E en lugar de los caracteres menor (<) y mayor que (>).

NOTA: las expresiones \40, \3C y \3E corresponden a los caracteres ASCII hexadecimales y pueden consultarse en la siguiente tabla.

Ahora, cada vez que quisiéramos insertar nuestra dirección de correo, podríamos utilizar un código HTML similar a este:
<address>
Esta es mi dirección de correo
</address>
que vería así:

Esta es mi dirección de correo

Sin comentarios

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR