Tengo un cuadro de búsqueda con sugerencia automática que muestra un div debajo de él con varias sugerencias de cadenas de búsqueda (como google). ¿Es posible tener sombra paralela en el cuadro de sugerencia automática con CSS o necesitaré algún tipo de script? Probé una imagen de fondo pero el número de sugerencias puede variar de 1 a 10 o 15.¿Sombra paralela en un contenedor div?
Preferiría algo que funcione en IE6 + y FF2 + si es posible. ¡Gracias!
CSS3 tiene una propiedad de box-shadow. Los prefijos del proveedor son necesarios en este momento para la máxima compatibilidad del navegador.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
Hay un generador disponible en css3please.
La forma más compatible de hacer esto probablemente sea crear un segundo div debajo de su cuadro de sugerencia automática del mismo tamaño que el cuadro en sí, movido algunos píxeles hacia abajo y hacia la derecha. Puede usar JS para crearlo y posicionarlo, lo que no debería ser terriblemente difícil si utiliza un marco bastante moderno.
Sí, y puede hacer una bonita caja principal con la forma que desee con la imagen de fondo derecha, y hacer una totalmente negra de la misma forma para la sombra paralela y ajustar la opacidad para obtener el efecto que desee. –
Puede intentar usar las sombras de PNG. IE6 no lo admite, sin embargo, se degradará muy bien.
http://www.positioniseverything.net/articles/dropshadows.html
es posible que desee probar esto. Parece ser bastante fácil y funciona en IE6 y Moz al menos.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
La sintaxis general es: frontera- [Postion]: [border-style] [border-width] [border-color] | heredar
La lista de [border-style] s disponibles son:
Simplemente agrega un borde y no deja caer una sombra. – Si8
Esto funciona para mí en todos mis navegadores:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
a continuación, sólo da ninguna div la clase sombra, sin jQuery requiere.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Solo tenga en cuenta que para que el posicionamiento absoluto funcione correctamente, el cuadro de sugerencia automática debe colocarse absoluta o parcialmente. –
¿Qué sucede si no puedo tener una altura fija para el cuadro de sugerencias automáticas? El número de sugiere oscila entre 1-15. –