Comunidad de diseño web y desarrollo en internet online

borde doble inferior

Citar            
MensajeEscrito el 03 May 2010 12:52 pm
Hola a tod@s
Tengo un div al que ya he aplicado un background de un color mediante css. Resulta que quiero que el final del div sea con una linea de borde de grueso un píxel, pero no es únicamente una línea, son 2, una gris y otra negra, para dar un efecto 3d. He intendado hacerlo combinando border y outline pero no consigo que el outline solo me salga en "bottom" y por el contrario si dibujo outline es a todo el div.
Cuál seria la mejor manera de conseguir este efecto? Haciendo que el borde fuera una imagen? El outline puede aplicarse sólo a una de las aristas del div?
Gracias de antemano,

Por pixmaniac

30 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 May 2010 07:21 pm
Outline es una de esas propiedades con ciertas particularidades que lo hacen único. No admite desglose por lados. Es o todo el perímetro o nada.
Cómo lograrlo:
.- Crear otro elemento contenido en él y asignarle su borde (poco semántico)
.- Hacer uso de la pseudoclase :before (hay navegadores que no lo mostrarán)
.- A la caja en cuestión, asignarle el borde inferior y box-shadow ( los mismo con la compatibilidad entre navegadores)
:- Utilizar una imagen como background, colocada en el fondo (bottom) y repetida en x que simule el efecto.

Saludos

Por DvillB

118 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.