Inicio » Trucos Informáticos » Sitios web » Dos recuadros destinados a resaltar contenido en una web

Dos recuadros destinados a resaltar contenido en una web

Cuando visitamos una determinada página de un sitio web dirigimos nuestra vista hacia una zona determinada, no por el contenido que encierra sino por la forma en la que está diseñada. Hay algo que llama nuestra atención y, como consecuencia de ello, vemos el contenido que aloja. Nos referimos a un recuadro que destaca sobre el resto. Hay algo que nos lleva ahí.

Dos recuadros destinados a resaltar contenido en una web

Si eres diseñador web y mantienes uno o más sitios, seguro que te puede resultar interesante la propuesta que te voy a hacer. Voy a explicar los pasos que debes dar para resaltar una porción de contenido en una web. Puede centrarse en un aviso puntual, en un anuncio o en algo similar. Mi propuesta se centra en dos recuadros que, a pesar de que son diferentes, tienen algo en común, ya que su construcción es similar y, además, son capaces de llamar la atención de los visitantes.

Recuadro con fondo degradado

El primero de los recuadros tiene como fin el mostrar un fondo degradado, utilizando para ello dos colores como puntos de partida, los que marcan respectivamente las líneas superior e inferior. El código que proporciono a continuación utiliza un tono de gris en la línea superior y el blanco en la inferior, aunque se pueden cambiar adaptándolos a las necesidades de cada uno.

Recuadro con fondo degradado

La porción de código mostrado, que incluyo en un estilo que denomino .recuadro se puede insertar en cualquier estilo que defina un recuadro. Las tres primeras líneas son las que definen el fondo. Son necesarias para que el degradado se muestre en todos los navegadores web actuales. Este es:

Recuadro con borde

Este modelo es diferente. El contenido a resaltar va encerrado dentro de un recuadro con bordes redondeados y con sombra. Es ideal para resaltar un anuncio en la parte superior de una página, para encerrar un banner publicitario o para contener elementos específicos, como pueden ser los botones sociales, entre otras posibilidades.

Recuadro con borde

Se pueden ajustar los tamaños de los márgenes, el color de fondo, el del borde, así como el tamaño del recuadro, que puede ser relativo o fijo, el radio del borde y el tamaño de la sombra. También se pueden indicar el color de la sombra y las distancias entre los bordes y el contenido a incluir en su interior.

A tener en cuenta

Ambas definiciones se deben insertar en la hoja de estilos que acompaña al sitio web. Es posible además combinar ambos recuadros, añadiendo el fondo degradado, definido en el primero, en el segundo. Para llamar a cada estilo hay que utilizar el método típico, es decir, insertar el contenido en el lugar que ocupan los tres puntos:

<div class=”recuadro”>… </div>

Para el primer estilo, y

<div class=”recuadro1″>…</div>

para el segundo.

Artículos recomendados

Acerca de fabriciano

Amante de la informática y de Internet entre otras muchas pasiones. Leo, descifro, interpreto, combino y escribo. Lo hago para seguir viviendo y disfrutando. Trato de dominar el tiempo para que no me esclavice.

Deja un comentario