2012-10-12 74 views
25

Hy allí,¿Sombra de caja de CSS alrededor de una forma personalizada?

necesito para crear un div que se parece a esto:

screenshot http://imageshack.us/a/img19/8223/bubblep.png

Lo que he venido para arriba con hasta ahora es la siguiente: http://jsfiddle.net/suamikim/ft33k/

.bubble { 
    position: relative; 
    width: 80px; 
    height: 160px; 
    border: 1px solid #33A7F4; 
    border-radius: 9px; 
    margin: 100px; 
    -webkit-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -moz-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -ms-box-shadow: 0px 0px 20px 2px #33A7F4; 
    -o-box-shadow: 0px 0px 20px 2px #33A7F4; 
    box-shadow: 0px 0px 20px 2px #33A7F4; 

} 

.bubble:after, .bubble:before { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 17px solid transparent; 
    right: 100%; 
} 

.bubble-left:before { 
    border-top-color: #33A7F4; 
    border-right-color: #33A7F4; 
    top: 60px; 
} 

.bubble-left:after { 
    border-width: 16px; 
    border-top-color: black; 
    border-right-color: black; 
    top: 61px; 
} 

Como puede ver, el "único" problema es la sombra de caja alrededor de la cola de la burbuja (la flecha triangular).

También traté de no usar las after-pseudo-clases before-&, pero utilizo un segundo div que solo contiene el triángulo (con transformación, rotación, ...) pero obviamente eso no me llevó a ningún éxito tampoco.

Una imagen estática no es una opción porque el tamaño del rectángulo en sí y la posición de la cola son dinámicos y pueden cambiar durante el "tiempo de ejecución".

también he ocurrió una solución en la que creo la frontera & la sombra con un SVG dinámicamente gernerated. Si no se puede encontrar ninguna otra opción, me quedaré con esta solución, pero se siente bastante fuerte como un "truco". No estoy publicando esta solución aquí porque implica 2 javascript-framworks (extjs & raphael) y esta pregunta debe ser sobre html & css. No obstante yo todavía podría proporcionar si alguien está interesado en él ...

Una última cosa: Navegador-compatibilidad no es la gran cosa. Si está funcionando en las últimas versiones de los grandes (Firefox, Chrome, Opera, es decir, 10, ...) todo está bien;)

Gracias,

MIK

Respuesta

29

Uso de sombra paralela:

enter image description here

enter image description here

quizá this article (box-shadow-vs-filter-drop-shadow) le ayudará a

+0

¡Perfecto! ¡No estaba al tanto del filtro de sombras instantáneas hasta ahora! – suamikim

+1

una vez estuve en las mismas situaciones. – Mark

+0

La única solución para mi caso tiene varias superposiciones: antes y después de elementos en mi div. Gracias Mark! Comunidad impresionante! – Garavani

5

No es probable que en su El mejor interés para hacer esto, lo dejaría como está.

http://css-tricks.com/triangle-with-shadow/

Usted puede pasar a "The Double-Box Método" y se nota una manera muy Manual de hacer esto utilizando :before y :after (que ya ha utilizado encima de hacer la burbuja) con la ayuda de transform . Si realmente desea hacer esto, puede hacer flotar la flecha hacia la izquierda y aplicar sombras a través de los pseudo-elementos.

+0

Niza enlace, se podría aplicar a su caso utilizando algunos elementos más, debido a la no Apertura del triángulo de 90 grados Quería sugerir usar border-image, pero esto es más flexible :) – xception

+0

Ya encontré este enlace antes y pude crear el triángulo como quería, pero no pude ajustar la sombra de cuadro para que solo se muestre en el lado izquierdo ... ¡Gracias por el enlace de todos modos! – suamikim

Cuestiones relacionadas