Kutu Gölge ile CSS Konuşma Balonu

Question

Sola doğru bir üçgen çizmek için CSS kullanan bir DIV oluşturma. Hem ebeveyn hem de sahte öğeye (resimlere bakın) ve kod için tekdüze bir kutu gölgesi uygulamaya çalışın.

Bu mümkün mü? Yoksa bunun için sınır resmi kullanmaktan daha mı iyi olurum?

(Üst: CSS Box-Shadow, Alt:: Gölge, Orta Öncesi İstenen Sonucu)

.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

Üçgen kesmek yerine, transform kullanarak bir div döndürüp gerçek bir box-shadow alabilirsiniz. Yalnızca gölgenin bir tarafındaki gölgeyi (görünür üçgen taraf) istediğinizden, blur'u daha küçük yapmalı ve opacity'u indirmelisiniz.

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; 
} 

Çıktı:

Answer 2

Ben Bu biraz biliyorum zor ama benim için iyi görünüyor. İşte

.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; 
} 

yerine box-shadow, sadece Buble için border kullanabilirsiniz keman http://jsfiddle.net/dzfj6/

HTML

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

CSS olduğunu.

Answer 3

0 kullanmayın. Burada

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

burun boyutu gölge genişliği için değişkenler ve isteğe bağlı bir sınır ile, tam, (S) CSS bir complete working example olup.

Püf noktası, piksel mükemmelliğini elde etmek için ofsetleri sağa döndürmek ve sağa çevirmek ve balonunuzun burnunu kesmek için (özellikle de kenarlıklara ihtiyacınız varsa) overflow:hidden'u kullanmaktır.

Yukarıdaki yanıttaki örnek, gölge kırpılmış ve ana kabarcık alanının üzerine serildiği için bizim için çalışmaz.

IE7/8'de incelikle ayrışır.

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

Başka bir çözüm sadece nesneleri şekil etrafında gölge yerleştirir filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); kullanmaktır.