Pure CSS3 Background transparent speech bubbles dialogue bubbles

Brief tutorials

This is a transparent speech bubbles dialogue bubble effect made with pure CSS3. The dialog bubble uses two transparent PNG images as a backdrop and combines them into a single dialog bubble effect with simple CSS code.

How to use

HTML structure

The HTML structure of the dialog bubble is as follows:

<a class= "speech-bubble" href= "#" >    <div class= "speech-content" >        lorem ipsum ascilet    </ div>    <div class= "Speech-tail" ></div></a>

CSS Styles

The entire conversation bubble is wrapped in a hyperlink element, the display property of the hyperlink element is set to Inline-block, the transparency is reduced to 50%, and the animation transitions are set for the transparency animation.

. speech-bubble {    display:inline-block;    opacity:0.5;    Transition:opacity 0.5s;}

When the mouse hovers over a dialog bubble, the transparency of the hyperlink element reverts to 100%.

. speech-bubble:hover {    opacity:1;    Transition:opacity 0.5s;}

. speech-content is the Content box area of the dialog bubble, with a minimum width of min-width set to 80 pixels and an internal margin of 10 pixels. A 3-pixel white border is set for edges other than the bottom edge. In addition a completely transparent PNG picture is used for its background.

. speech-content {    display:inline-block;    min-width:80px;    padding:10px;    Text-align:center;    Color:white;    Border:solid White;    border-width:3px 3px 0px 3px;    Background:url (' Data:image/png;base64, Ivborw0kggoaaaansuheugaaadiaaaaycayaaaaep4ixaaaacxbiwxmaabn2aaatdgeglb1yaaaaigniu    k0AAHolAACAgwAA+ F8aaidpaab1maaa6maaadqyaaaxb5jfxuyaaabssurbvhja7ngxdqageaoxgnh/5dbtu718g1i32mzco0mcaqebaqebaqebaqebaqebaqe    baqebaqebaqebaqebaqebaxk6seoiyp8uaaaa//8dah02bgibtpebaaaaaelftksuqmcc ') 48px 100% no-repeat;    Background-size:calc (100%-48px) 50px;}

The. Speech-tail is the tail of the Bubble dialog box. It sets a fixed width and height, and also uses a transparent PNG image as the background.

. speech-tail {    height:25px;    width:52px;    margin-top:-3px;    Background:url (' data:image/png;base64,ivborw0kggoaaaansuheugaaadqaaaazcayaaab+ sg0daaaacxbiwxmaaa3xaaan1wfckjt4aaaaigniuk0a    aholaacagwaa+ F8aaidpaab1maaa6maaadqyaaaxb5jfxuyaaafxsurbvhja1ngxkevrhmfxc5+qkdhjjqosyqzmbzapgwwyggxkwwxssizzykjmfmuyycqjbd    kxmfdp+9h0nr7v8ftepb+6wz3//z2nb/fe8// 9TWAHHCQYLPUPETABQJIMX0SHQWEXHHBQK1ZKEGY1HLATQSHAUWH8FARJETD91QX6KWNCB/YIMFP0JPEG0IXJ    coyincl9cujfwqszi1krf9ymgtcaywhmo107uvnagmj1blpszq31z0ayww3ukxcstltw/ AKIY7JPPB9HPGJF79DAMMBJLVUF00WP5R8CWHSEC2LPMCYSPWKYCG    w85liemf40v9uqeozryyxvmfpea1kxcmuo5ki3gc6qi/ 4RCOTRJBNCYJET/RDA2I7UZ9FX9J7LJ6C8TTCDQHPWCNA+OLLPKUSBBSELQAGO0FQKHXI1GKPYSVFQ    PHZQBXMHVDUAKRDQ7Y8BABCTLSW7EVJMAAAAAELFTKSUQMCC ') top left no-repeat;    background-size:100% 100%;}

The above is pure CSS3 background transparent speech bubbles dialogue bubble content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

