Estoy intentando conseguir un efecto como un efecto de sombra inserción en el CSS que se parece a la siguiente imagen:Creación de un efecto de sombra oscura inserción con CSS
image of sunken button http://gyazo.com/5c3178208bb904b3502a83a7490f7ffc.png
No sabe cómo me cualquier órgano puede obtener ese efecto con CSS?
La respuesta ya se ha dado a usted (box-shadow: inset ..), así que aquí está una rápida demostración de cómo podría funcionar:
La parte importante es box-shadow: inset 2px 2px 3px 0 red.
Para una explicación de las opciones disponibles: https://developer.mozilla.org/en/css/box-shadow#Values
Asegúrese de tener en cuenta el soporte de los navegadores para box-shadow, que es que no funciona en las versiones antiguas de IE, pero funciona "en todas partes" otra cosa: http://caniuse.com/css-boxshadow
Eche un vistazo a la propiedad CSS3 box-shadow, en particular, las sombras de la caja insertada. El Ejemplo L en this article debe proporcionar el efecto que estás buscando.
la clave aquí es múltiples sombras caja, una mayor inserción más oscuro de la parte superior izquierda y una sombra muy sutil por debajo de eso es ligeramente más brillante que el fondo.
Aviso forma de caja-sombra es "desplazamiento x, y-offset, el desenfoque, el color"
aprender a usar las cantidades de desenfoque y múltiples sombras y usted puede hacer algunos efectos muy agradable.
Ejemplo estilo (para su visualización en un fondo de # 222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
Ha intentado googlear "efecto de sombra css"? Hay muchos sitios que explican cómo hacerlo. – Kon
Depende. ¿Qué navegador estás usando? Si solo tienes problemas con CSS 2 o CSS3, tendrás dificultades, es decir, si estás utilizando cualquier versión de IE antes de las 9 ... –
Sí, he hecho una buena cantidad de googlear lo único parece que puedo encontrar es efecto de sombra de prueba. Lamentablemente, esos realmente no me llevan a ninguna parte. – endy