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:

Notificaciones en Facebook:

YouTube:

Acceso a Gmail:

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

Comparte este artículo:

Estas son las categorías a las que pertenece el artículo Uso de CSS para resaltar los bordes de los recuadros :

Curiosidades, CSS, HTML

Insertar un Comentario