Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias. Si continúa navegando, consideramos que acepta su uso. Más información

Uso de CSS para resaltar los bordes de los recuadros

Si uno se fija en los diseños web que ve a diario, notaremos que muchas de las técnicas utilizadas por los mejores diseñadores son en realidad bastante sencillas. Es muy curioso que estas formas que son elementos sencillos, hacen un diseño brillante. He visto un que me ha gustado mucho titulado Five Minute Upgrade - Using CSS Borders for Emphasis, de buildinternet, donde muestran el uso de eficaz, pero a la vez sorprendentemente de sencillos métodos de diseño de los bordes de los recuadros utilizando CSS.

Los bordes de los recuadros tienen mucho más impacto de lo que la mayoría de las personas se dan cuenta. Nos ayudan a resaltar ciertas porciones con sólo unos minutos de trabajo. Características tales como el poco peso, el estilo y el color tienen grandes efectos en cualquiera elementos de dibujo, o lo que colocamos dentro de ese recuadro.

Realización de un recuadro

Como ejemplo puedes ver los dos recuadros siguientes, el primero no tiene recuadro y el segundo tiene una oscura (color gris) y delgada línea.

1. Esta casilla no tiene borde.

2. Esta caja tiene un fino borde oscuro de 1 píxel.

Por supuesto la segunda resalta más ¿no? Observa cómo el color del borde (gris) no está tan lejos del color de fondo (blanco). Esta es la clave. Es esta sutil diferencia de color que ayuda a distinguir el segundo cuadro más propio de la zona de contenidos. Lo que ayuda a marcar el recuadro, realzando su contenido, con un simple códogo CSS:

style="border:1px solid #CCCCCC; background:#EFEFEF; margin:5px 0px; padding:5px;"



Ejemplos del mundo real

Hay muchos ejemplos de recuadros para resaltar ciertas porciones en la web. A continuación tenemos algunos de los más populares sitios web, con sus colores para cada prestación.

Dashboard de Wordpress 2.7:

bordes1

Notificaciones en Facebook:

bordes2

YouTube:

bordes31

Acceso a Gmail:

bordes4
Diferentes tipos de bordes

Tenemos muchas opciones de estilos para los bordes en CSS, aunque no todas son aconsejables. Aquí te presento los que tenemos a nuestra disposición, aunque tal vez raramente las usemos por razones obvias:

None {border:none;}

Solid {border: solid;}

Double {border: double;}

Groove {border: groove;}

Dotted {border: dotted;}

Dashed {border: dashed;}

Inset {border: inset;}

Outset {border: outset;}

Ridge {border: ridge;}


Puedes encontrar más información adicional sobre la propiedad CSS "border-style", que es un subconjunto de "border", y alguna demostración de cada uno de ellos en la W3Schools.

Todos esos tipos de recuadros, no se ve mucho, o quizás algunos de ellos no se utilicen nunca más. En diseño web se ha vuelto más refinados, pero cuando se trata de diseño con HTML y CSS, lo sencillo es por regla general mejor opción. Además podemos llamar la atención de otras maneras: la tipografía, el diseño, esquema de color, etc. Aunque siempre podemos usar los recuadros para dar tu página un determinado aspecto retro de los noventa.

Escrito por Toni

¿Te ha gustado? Compártelo:

Estas son las categorías a las que pertenece este artículo:

Curiosidades, CSS, HTML


favoritoInsertar un Comentario


Nombre:

Email:

Comentario:

Escribe la siguiente palabra: No lo entiendes? Cambia el texto!

favoritoComentarios

zaiira el 28/06/2011 a las 03:02:10

noo estendii nadaaa ash!!! no eraa lo qe buzcabaaa :(
graziiiaz




favoritoArtículos relacionados:



Inscríbete al Boletín