CSS Bulle avec Zone d'Ombre

Créer un DIV qui utilise CSS pour dessiner un triangle à gauche. En essayant d'appliquer un uniforme box-shadow pour les deux parents et le pseudo-élément (voir les images) et le code.

Est-ce possible? Ou suis-je mieux d'utiliser border-image de pour cela?

(En haut: Avant que l'Ombre, au Milieu: CSS Box-Shadow, Bas: Résultat Souhaité)

.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: ".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;
}
a0";

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

InformationsquelleAutor Lord Varlin | 2012-01-15

106

Au lieu d'utiliser un triangle de hack, vous pouvez simplement faire pivoter une div à l'aide de transform et d'obtenir un vrai box-shadow. Puisque vous ne voulez l'ombre sur un côté de la div (le visible triangle), vous devez faire le blur plus petit et plus la opacity.

Démo: 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: ".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;
}
a0";
    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;
}

De sortie:

CSS Bulle avec Zone d'Ombre

J'ai récemment utilisé pour un iPhone bouton de retour, donc je n'ai pas eu à utiliser une image. Pour encore plus de plaisir que vous pouvez utiliser transform: skew(); pour modifier l'angle du triangle.
J'ai vérifié le Violon avec Firefox 14 et il affiche un rectangle au lieu d'un triangle. Pourquoi est-ce? La Transformation CSS est pris en charge dans FF14, droit?
Il s'avère que c'est l'inclinaison de la transformation que Firefox n'aime pas...
A utiliser skewX au lieu de tout simplement skew: -moz-transform: rotate( 29deg ) skewX( -35deg );
Content que tu ai eu de travail.
Solution sympa, mais comment vous placez le pointeur au-dessous de la boîte?
Changement left, top, et les deux premières valeurs de box-shadow.
Ci-dessous, jsfiddle.net/ccsalway/KjSJt
Voici un autre exemple: jsfiddle.net/ThinkingStiff/kvLFm
J'ai dû ajouter tous les fournisseurs de préfixes pour les faire pivoter pour que cela fonctionne dans tous les navigateurs. Ajoutez à cela la bulle:après CSS: -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
C'est dans le lien de démonstration. Je vais modifier la réponse. Merci!
merci pour la croix-code navigateur. ThinkingStiff, vous s'il vous plaît ajouter ce code à la réponse? Il ne fonctionne pas comme est, par exemple sur l'iPhone.
Fait. Merci. Étrange, je pensais que je l'avais déjà fait cette modification.
Mais à l'aide de clip-path vous pouvez également créer plus de sophistiqué ombres. J'ai modifié votre violon pour créer un exemple de cela.

InformationsquelleAutor ThinkingStiff

Ici est un travail complet exemple en pleine (S)CSS, avec
variables pour le nez, la taille de l'ombre de la largeur et une option de frontière.

L'astuce consiste à obtenir les décalages et les transformer à droite pour obtenir des pixels de la perfection, et à utiliser overflow:hidden comme nécessaire de couper le nez de votre bulle (surtout si vous avez besoin de frontières).

L'exemple dans la réponse ci-dessus ne fonctionne pas pour nous, parce que l'ombre est coupée et il est posé au-dessus de la bulle de la zone.

Dégrade gracieusement dans 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:           "$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 );
}
a0";

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

InformationsquelleAutor mezis

Je sais que C'est un peu délicat, mais, semble bien pour moi.
Voici le violon 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;
}

Au lieu de box-shadow, vous pouvez simplement utiliser border pour buble.

InformationsquelleAutor tuze

3

Une autre solution est d'utiliser filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); Elle place l'ombre autour des objets de forme.

InformationsquelleAutor Amir Raminfar

-4

Ne pas utiliser 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;

InformationsquelleAutor Web tasarım

Vous devez vous connecter pour publier un commentaire.