Es decir, los bordes izquierdo e inferior del elemento deben dar un efecto 3D de que salga. ¿Hay una buena manera puramente de CSS para lograr este efecto?CSS: ¿Cuál es una buena manera de crear un efecto de cuadro elevado?
Encontré esta pregunta al tratar de resolver esto también, y creo que lo que estás buscando es algo como esto http://jsfiddle.net/9Lt2477w/.
.raisedbox {
padding: 10px;
border: 1px solid #77aaff;
box-shadow: -1px 1px #77aaff,
-2px 2px #77aaff,
-3px 3px #77aaff,
-4px 4px #77aaff,
-5px 5px #77aaff;
}
Gracias a http://sam-morrow.com/playground/css-cubes.py por la ayuda aquí. No me di cuenta de que podría seguir agregando líneas adicionales en la propiedad box-shadow.
Usted puede basar su solución en esto:
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
Se podría utilizar el border-bottom-style y border-right-style, al igual que StackOverflow hace con las etiquetas.
Usa los estilos inset y outset.
#foo {
/* ... */
border:8px outset #999;
-webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}
Aquí está el ejemplo vivo: http://jsfiddle.net/sjkXS/1/
Sí, el efecto es aquí cheesily-extremo, indentado para mostrar lo que es posible.
Para compatibilidad con más navegadores es posible que desee simular las operaciones de inserción/inicial simplemente añadiendo un borde inferior normal y derecho o superior e izquierdo que es más oscuro que el color del div, de hecho eso es lo que Stackoverflow es usando actualmente para las etiquetas en mi navegador.
Parece estar cerca de lo que quiero, pero los ángulos son incorrectos en la parte superior izquierda y en la parte inferior derecha. – Hamster
@Marnix <- ¿Esto es lo que quiere decir con una etiqueta? – thesowismine
@thesowismine Las etiquetas antiguas (sujetos de la pregunta) tenían un borde tipo botón, pero cambiaron el estilo y ahora tienen un diseño plano. Entonces realmente no aplica más. Debería haber tomado una instantánea en ese momento. – Marnix