ribbon-css

Un ribbon (como véis en la imagen que ilustra esta entrada) es una cinta o tira que solemos poner en la esquina superior derecha de la pantalla, principalmente para mostrar algún evento del día anterior o un dato importante. El abuso de esto puede molestar a los usuarios, por lo que recomiendo usarlo solo 1 día o 2 como mucho.

En esta entrada aprenderemos a crear un ribbon con CSS, aunque si usas WordPress y no quieres complicarte también puedes crearlo usando un plugin.El proceso de creación mediante CSS es sumamente sencillo.

Código HTML

Su estructura es muy simple, un solo enlace con una ID para estilizarlo:

<a id="ribbonderecho" href="#" title="TopRight">Top Right Link Text</a>

Código CSS

Usaremos “position: absolute” para llevarlo a la esquina, lo mostraremos como bloque mediante “display: block” y por último aplicaremos un valor de la propiedad text-indent negativa para ocultar el texto del enlace. No olvidemos que en la propiedad background debemos indicar la dirección de la cinta o ribbon:

#ribbonderecho {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	height: 125px;
	width: 125px;
	background: url(miribbon.gif) no-repeat;
	text-indent: -999em;
	text-decoration: none;
}

Si deseamos crear la imagen para el ribbon podemos usar un generador de ribbons.

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Por favor, si os ha gustado la entrada, no os olvidéis de votarla (mirad un poco más abajo), solo es un pequeño esfuerzo al trabajo realizado. Muchas gracias.