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í.
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.
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 {
background-color: #c0c0c0;
background: -moz-linear-gradient(top,#c0c0c0,#ffffff);
background: -webkit-gradient(linear,left top,left bottom,from(#c0c0c0),to(#ffffff));
line-height:0;
padding:5px 0 5px 0;
}
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.
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.
.recuadro1 {
margin-top: 30px;
margin-bottom: 30px;
background: #fff;
border: 1px solid #ccc;
width: 99%; border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow: 6px 6px 12px #888;
padding: 10px 0px;
}
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.
