Saisoto

lunes, 21 de enero de 2013

CSS_Quick Tips I: Doble borde

El doble borde

Se puede puede observar que el rectángulo tiene un borde interior negro y uno exterior que pudiera ser de color blanco con cierta transparencia. Para conseguir esto utilizamos la propiedad box-shadow de CSS3

box-shadow: ("desplazamiento vertical", "desplazamiento horizontal", "expansión de la sombra", "grado del degradado", "color" )

_Los valores de desplazamiento deberán ser nulos ya que sino la sombra aparecería solo por un extremo y no por el otro.

_La expansión de la sombra establece el ancho del borde

_El degradado será nulo si queremos conseguir un efecto de borde

_El color... bueno esta es fácil.

En resumen el código CSS será el siguiente:

box-shadow: 0 0 0px 3px rgba(255, 255, 255, .1);

Otra utilidad

Supongamos que tenemos dos divisores con alturas distintas

Y queremos poner entre ellos uno de esos separadores que son una linea oscura y otra clara. Si lo hacemos poniendo un borde-derecho al Div.1 y un borde-izquierdo al Div.2, nos quedaría dos líneas desiguales que crecerían de manera dependiente a los divisores e independiente la una de la otra.

Se podría arreglar haciendo que los dos divisores tuvieran la misma altura, pero si no quieres hacer eso, otra solución sería poner una sombra al divisor que supieras va a ser el más largo o bueno, al que más te interese.