opacity in a speech bubble in css -
i'm using http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ speech bubble, want inside of bubble , triangle have background opacity of 0.7.
for background i'm using: background-color: rgba(0, 0, 0, 0.7);
and triangle: opacity:0.7;
but seems triangle , background doesn't have same opacity, put higher z-index triangle doesn't help.
my full css are:
.infobubble { font-family:arial; font-size:12px; color:#ffffff; display: inline-block; position: absolute; padding:6px; background-color: rgba(0, 0, 0, 0.7); background:-moz-linear-gradient(#000, #000); background:-o-linear-gradient(#000, #000); background:linear-gradient(#000, #000); -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; box-shadow: 1px 1px 3px black; } .infobubble:after { content:""; position:absolute; bottom:-6px; left:20px; opacity:0.7; border-width:6px 6px 0; border-style:solid; border-color:#000 transparent; display:block; width:0; } here jsfiddle: http://jsfiddle.net/malamine_kebe/qzqzw/
thanks helping!
it's because opacity of main bubble not being applied - 3 styles:
background:-moz-linear-gradient(#000, #000); background:-o-linear-gradient(#000, #000); background:linear-gradient(#000, #000); are overwriting
background-color: rgba(0, 0, 0, 0.7); also if use
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7); -webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7)); filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7)); instead of
box-shadow: 1px 1px 3px black; it make shadow work properly
Comments
Post a Comment