Pure CSS3 Speech Bubbles with transparent background-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Pure CSS3 Speech Bubbles with transparent background

Jan 18, 2017 pm 01:56 PM

Brief Tutorial

This is a Speech Bubbles dialogue bubble effect with a transparent background made using pure CSS3. This speech bubble uses two transparent png images as the background, and combines them into a speech bubble effect through simple CSS code.

Usage

HTML structure

The HTML structure of the dialogue bubble is as follows:

&lt;a class=&quot;speech-bubble&quot; href=&quot;#&quot;&gt;
    &lt;div class=&quot;speech-content&quot;&gt;
        lorem ipsum ascilet
    &lt;/div&gt;
    &lt;div class=&quot;speech-tail&quot;&gt;&lt;/div&gt;
&lt;/a&gt;

Copy after login

CSS style

The entire dialogue bubble is wrapped in In a hyperlink element, the display attribute of the hyperlink element is set to inline-block, while the transparency is reduced to 50%, and the animation transition effect is set for the transparency animation.

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

Copy after login

When the mouse slides over the speech bubble, the transparency of the hyperlink element returns to 100%.

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

Copy after login

.speech-content is the content box area of the dialogue bubble. Its minimum width min-width is set to 80 pixels and the inner margin is 10 pixels. All edges except the bottom edge are set to a 3 pixel white border. Also use a fully transparent PNG image 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(&#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAABN2AAATdgEGLb1yAAAAIGNIU
    k0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABSSURBVHja7NGxDQAgEAOxgNh/5dBTU718G1i32mZCO0MCAQEBAQEBAQEBAQEBAQEBAQE
    BAQEBAQEBAQEBAQEBAQEBAXk6SeoIyP8uAAAA//8DAH02BGIBTpeBAAAAAElFTkSuQmCC&#39;) 48px 100% no-repeat;
    background-size: calc(100% - 48px) 50px;
}

Copy after login

.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(&#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAZCAYAAAB+Sg0DAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAIGNIUk0A
    AHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFXSURBVHja1NgxKEVRHMfxc5+QKDHJJqOsyqzMbzApGWwyGGxKWWxSSiZZyKJMFmUyyCqjbD
    KxMFDP+9h0nR7v8fTePb+6wz3//z2nb/fe8//9TwahhcqyLPuPeTAbQjiMx0shQWExhHBQK1ZKEGY1hLATQshauWh8farJeTd91QX6kwNCB/YimFP0JPeG0IXj
    COYIncl9cujFWQSzi1Krf9ymgTCAywhmo107UVNAGMJ1BLPSzq31z0AYwW3ukXcstLtW/AkIY7jPpb9hpgjF79dAmMBjLvUF00Wp5r8CwhSec2lPmCySPWkYCG
    W85lIeMF40v9UQEOZRyYXvMFpEA1kXCMuo5kI3GC6qI/4RCOtRjbnCYJEt/rdA2I7uz9FX9J7lJ6C8TtCdQhPWCNA+OlLpKusBbSELqagO0FqKhxi1gKpYSvFQ
    phZQBXMhVdUAKrdq7Y8BABcTlsw7evjMAAAAAElFTkSuQmCC&#39;) top left no-repeat ;
    background-size: 100% 100%;
}

Copy after login

The above is the content of Speech Bubbles with pure CSS3 background and transparent background. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn