Bulles CSS3 pures avec fond transparent

Bref tutoriel

Il s'agit d'un effet spécial Speech Bubbles avec un fond transparent réalisé en CSS3 pur. Cette bulle utilise deux images png transparentes comme arrière-plan et les combine dans un effet de bulle via un simple code CSS.

Comment utiliser

Structure HTML

La structure HTML de la bulle de dialogue est la suivante :

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

Style CSS

La bulle de dialogue entière Enveloppé dans un élément de lien hypertexte, l'attribut d'affichage de cet élément de lien hypertexte est défini sur inline-block, tandis que la transparence est réduite à 50 % et un effet de transition animé est défini pour l'animation de transparence.

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

Lorsque la souris passe sur la bulle, la transparence de l'élément hyperlien revient à 100%.

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

.speech-content est la zone de la zone de contenu de la bulle de dialogue. Sa largeur minimale min-width est fixée à 80 pixels et la marge intérieure est de 10 pixels. Tous les bords, à l'exception du bord inférieur, sont définis sur une bordure blanche de 3 pixels. Utilisez également une image PNG entièrement transparente pour son arrière-plan.

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

.speech-tail est la queue de la boîte de dialogue à bulles. Il définit une largeur et une hauteur fixes et utilise également une image PNG transparente comme arrière-plan.

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

Ce qui précède est le contenu de Speech Bubbles avec un fond CSS3 pur et un fond transparent. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !