Fumetti CSS con ombra casella

Question

Creazione di un DIV che utilizza i CSS per disegnare un triangolo a sinistra. Cercando di applicare un'ombreggiatura uniforme a entrambi i genitori e lo pseudo elemento (vedi immagini) e il codice.

È possibile? O sto meglio usando border-image per questo?

(Top: Prima Ombra, Medio: CSS box-shadow, inferiore: Risultato desiderato)

.bubble{ 
    height: 200px; 
    width: 275px; 

    opacity: 0; 

    margin-top: 41px; 

    float: right; 

    background-color: #F2F2F2; 

    -webkit-border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 6px #B2B2B2; 
} 

.bubble::after { 
     height: 0px; 
     width: 0px; 

     content: "\00a0"; 

     display: block; 

     margin-left: -10px; 
     margin-top: 28px; 

     border-width: 10px 10px 10px 0; 
     border-style: solid; 
     border-color: transparent #F2F2F2 transparent transparent; 

     -webkit-box-shadow: 0px 0px 6px #B2B2B2; 
    } 

Answer 1

Invece di utilizzare un hack triangolare, è sufficiente ruotare un div utilizzando transform e ottenere un valore reale box-shadow. Dal momento che si desidera solo l'ombra su un lato del div (il lato del triangolo visibile), è necessario ridurre lo blur e abbassare lo opacity.

Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/

HTML:

<div class="bubble"></div> 

CSS:

.bubble{ 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0px 0px 6px #B2B2B2; 
    height: 200px; 
    margin: 20px; 
    width: 275px; 
} 

.bubble::after { 
    background-color: #F2F2F2; 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
    content: "\00a0"; 
    display: block; 
    height: 20px; 
    left: -10px; 
    position: relative; 
    top: 20px; 
    transform:    rotate(45deg); 
     -moz-transform: rotate(45deg); 
     -ms-transform:  rotate(45deg); 
     -o-transform:  rotate(45deg); 
     -webkit-transform: rotate(45deg); 
    width: 20px; 
} 

uscita:

Answer 2

io so che è un po ' difficile ma, mi sembra carino. Ecco il violino http://jsfiddle.net/dzfj6/

HTML

<div class="bubble"> 
    <div class="triangle"></div> 
    <div class="border"></div> 
    <div class="content">some content</div> 
</div> 

CSS

.bubble 
{ 
    height: 200px; 
    width: 275px; 
    float:right; 
    margin-top: 41px; 
    margin-left:11px; 
    background-color: #f2f2f2; 
    -webkit-border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 5px #b2b2b2; 
    position:relative; 
    z-index:1; 
} 

.triangle 
{ 
    position:absolute; 
    top:12px; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 10px solid #f2f2f2; 
    margin-left:-9px; 
    z-index:3; 
} 
.border 
{   
    position:absolute; 
    top:12px; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 10px solid #e0e0e0; 
    margin-left:-10px; 
    z-index:2; 
} 

.content{ 
    padding:10px; 
} 

Invece di box-shadow, si può utilizzare semplicemente border per Buble.

Answer 3

Non utilizzare box-shadow.

height: 200px; 
    width: 275px; 
    float:right; 
    margin-top: 41px; 
    margin-left:11px; 
    background-color: #f2f2f2; 
    -webkit-border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 5px #b2b2b2; 
    position:relative; 
    z-index:1; 

Answer 4

Ecco un complete working example in piena (S) CSS, con variabili per dimensioni naso larghezza ombra e un bordo opzionale.

Il trucco è ottenere gli scostamenti e trasformarli correttamente per raggiungere la perfezione dei pixel e utilizzare overflow:hidden come necessario per tagliare il naso della tua bolla (soprattutto se hai bisogno di bordi).

L'esempio nella risposta sopra non funziona per noi perché l'ombra viene ritagliata e viene posizionata sopra l'area della bolla principale.

Degrado con garbo in IE7/8.

HTML:

<div class="chat"> 
    <div class="bubble"> 
     <span class='tail'>&nbsp;</span> 
     <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
    </div> 
</div> 

SCSS:

$shadow_radius = 6px; 
$nose_size = 12px; 
$shadow = 0 1px $shadow_radius #B2B2B2; 
$border = 1px solid #bbb 

.chat { 
    font-family:  sans-serif; 
    font-size:  small; 
} 

.bubble { 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    border:   $border; 
    box-shadow:  $shadow; 
    display:   inline-block; 
    padding:   10px 18px; 
    margin-left:  ($shadow_radius + $nose_size); 
    margin-right: ($shadow_radius + $nose_size); 
    position:   relative; 
    vertical-align: top; 
} 

.tail { 
    position: absolute; 
    top:  $nose_size; 
    left: -($shadow_radius + $nose_size); 
    height: ($shadow_radius + $nose_size); 
    width: ($shadow_radius + $nose_size); 
    overflow: hidden; 
} 
.tail:before { 
    border:   $border; 
    background-color: #F2F2F2; 
    box-shadow:  $shadow; 
    content:   "\00a0"; 

    display:   block; 
    position:   absolute; 
    top:    0px; 
    left:    $nose_size; 
    height:   $nose_size; 
    width:    $nose_size; 
    -webkit-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
} 

Answer 5

Un'altra soluzione è quella di utilizzare filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); Essa pone solo l'ombra intorno alla forma degli oggetti.