Bordes especiales con un único elemento en puro Css 23.12.13

Bordes especiales con un único elemento en puro Css

Todo diseño de página web busca introducir algún detalle único y especial que la diferencie y haga destacar o le otorgue un plus de originalidad sobre el resto de realizaciones.

En la tendencia actual del RWD y de la limpieza del código se propugna evitar en la medida de lo posible el añadir en el Html elementos sólo a efectos de usarlos en los estilos para ornamentar la página.

A lo anterior y como tercera condición, en estos momentos junto al diseño flat en colores y formas se ha vuelto al "menos es más", al minimalismo y otros conceptos tendentes a escapar de lo abigarrado, barroco y estridente.

Cumpliendo con las limitaciones anteriores, este artículo va de cómo lograr bordes "personalizados" en cualquier elemento de forma sencilla y sin necesidad de marcado extra. Obligado que se mantenga su aspecto con independencia de las medidas de la caja a la que aplican para que ésta pueda crecer en función del contenido que pudiera tener en cualquier circunstancia.

Border & background

Una característica en la relación del fondo 'background' y los bordes 'border' de los elementos es que por defecto el fondo se dibuja justa hasta el exterior del borde. Así que cuando se utiliza el valor 'dotted', 'dashed' o 'double' para el tipo de borde conjuntamente con un fondo, éste se deja ver entre los segmentos del borde.

Decía que ese comportamiento es por defecto porque se puede cambiar hasta dónde se dibujan los fondos utilizando la propiedad background-clip. Tienes una explicación detalla en el artículo "El fondo a fondo. Novedades Css3 en la propiedad background" de este blog. Básicamente los valores que admite son:

Background-clip: Border-box

El borde (border) queda incluido en el área cubierta por el background, así como el padding y la superficie que ocupa el contenido

Background-clip: Padding-box

Se excluye el borde de la caja de la zona que cubre el fondo.

Background-clip: Content-box

El fondo se dibuja en la superficie ocupada con el contenido. Border y padding no se cubre.

Como ves es muy similar a la propiedad 'box-sizing'.

Así que sólo tienes que utilizar uno de los dos últimos 'background-clip' conjuntamente con un borde discontinuo para logar el efecto de la imagen anterior. Se corresponde con el primer ejemplo de la demo que tienes al final del artículo.

Una pequeña pega que tiene esta técnica es que las sombras declaradas a la caja se extiende de forma uniforme por todo su perímetro, sin respetar los huecos del borde discontinuo, creando un efecto extraño nada natural.

Border y Pseudoelementos

Otra vía con más posibilidades es recurrir a los pseudoelementos para dotar a una caja de un borde imaginativo y creativo.

Los ejemplos de la demo son sólo para que te inspires y puedas dejar volar tu imaginación, pues el límite lo ponen tu creatividad y buen gusto.

En el ejemplo 2 es el pseudoelemento el que tiene un simple borde.

En los ejemplos 3, 4 y 5 el borde está formado por distintos gradientes aplicados al pseudoelemento :before, y para que no se superponga al elemento lo mandamos debajo con un valor negativo en z-index.

Utilizando pseudoelementos para obtener los bordes podemos declarar sombras a la caja o ellos mismos (dependiendo del diseño) sin el efecto que mencionaba antes.

En el ejemplo 6 recurrimos a los dos pseudoelementos de la caja para crear el borde. Cada uno de los pseudos sólo tiene declarados un par de laterales opuestos (arriba/abajo e izquierda/derecha) y así el borde se extiende más allá del rectángulo formado por ellos.

En el último ejemplo de la demo puedes ver una realización utilizando ambas técnicas: 'background-clip', borde y padding en el elemento y distintos tipos de bordes en los pseudo.

Y ahora sí llegó el momento de que veas las realizaciones en vivo:

See the Pen Special border single element pure Css by Kseso (@Kseso) on CodePen

Ver demo a full ⌘ Descargar códigos 7kb

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso