10
¿Es posible mostrar una sombra dentro de una caja div sin usar imágenes? En su lugar, quiero usar comandos css.Sombra dentro de un div
¿Hay algún comando como: -webkit-box-shadow: 1px inset;?
A
Respuesta
14
en CSS3 hay box-shadow que también se pueden insertar para hacer exactamente lo que necesita. esto es apoyado por los siguientes navegadores:
- cromo> = 10.0 (> = 4.0 con
-webkit-prefix) - Firefox> = 4.0 (> = 3.5 con
-moz-prefix) - IE> = 9,0
- ópera> = 10,5
- Safari> = 5,1 (> = 5,0 con
-webkit-prefix)
+1
-webkit-box-shadow: recuadro 0 2em 3em -1em verde; lo resolvió. Gracias :) –
+0
de nada. tenga en cuenta que debe aceptar la respuesta que resolvió su problema haciendo clic en la marca de verificación a la izquierda de la misma. – oezi
21
Sí hay un comando inset. de esta manera:
-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;
Puede generar de aquí http://css3generator.com/
0
Puede utilizar la caja shadow generator para efectos de sombra. Daré un ejemplo para mostrar cómo usar el generador de sombreado de caja.
Paso 1: Ir a: Box Shadow Generator
Paso 2: ajustar la propiedad de sombra que desee agregar.
Paso 3: A continuación, copie el código CSS con el botón "copiar texto".
paso 4: Luego puede pasar el código CSS en el archivo de la hoja de estilos.
Hazlo de esta manera.
<html>
<head>
<title>Title</title>
<style type="text/css">
#banner{
position: absolute;
width: 100%;
height: 150px;
background-color: #4E6C88;
-webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<div id="banner">
</div>
</body>
</html>
Gracias ...;)
Cuestiones relacionadas
- 1. ¿Sombra paralela en un contenedor div?
- 2. caja-sombra sobre div flotantes
- 3. Sombra interior a DIV en IE
- 4. Div no transparente dentro de un div transparente
- 5. alineación vertical div dentro de un div usando jquery?
- 6. Encuentra div dentro de un div y quítalo?
- 7. Hacer DIV fijo dentro de un DIV desplazable
- 8. ¿Cómo establecer un mapa para div dentro de otro div?
- 9. encontrar dentro de un div clase seleccionada
- 10. Alinear contenidos dentro de un div
- 11. horizontalmente una UL dentro de un DIV
- 12. etiquetas span envolver dentro de un div
- 13. Centrar una TABLA dentro de un DIV
- 14. Mostrar Adobe pdf dentro de un div
- 15. Respuesta Ajax dentro de un div
- 16. Obtener imagen attrib dentro de un div?
- 17. ul con flotadores dentro de un div
- 18. Centrar una imagen dentro de un div
- 19. DIV dentro de otro DIV dentro de otro DIV con CSS
- 20. Cómo seleccionar div dentro de div dentro de div con jquery
- 21. División Posicionada Div Dentro Otra Div
- 22. Expandir imagen dentro de DIV
- 23. área de texto dentro div
- 24. Contiene tabla dentro de div
- 25. Center Div dentro de otro (100% de ancho) div
- 26. Flotador un lapso inferior derecha dentro de un div
- 27. ¿Cómo desplazarse a un elemento dentro de un div?
- 28. Cómo encontrar un div dentro de un iframe
- 29. Necesito centrar un ul dentro de un div ie6 & ie7
- 30. muestra solo un div dentro de un iframe (javascript, JQuery ...)
que realmente utilizan la imagen en el sitio web tumblr, dos imágenes para ser precisos. Una imagen de sombra para el ancho de página completa y una segunda imagen de sombra más amplia en el centro de la página. – Joonas