Popisky pomocí CSS3.

 2012-02-08 00:00:00
 Dmitry Burobin

V tomto článku Vám ukažu, jak se dají udělat originální popisky prostřednictvím CSS3. Použíjeme CSS přechody a pseudo-prvky :before a :after

V demonstrační ukázce jsou odkazy na sociální sítě s názvy v popiscích.

Ukázka!

HTML

Pro demonstraci použijeme neuspořádaný seznam:


<ul class="tt-wrapper">
    <
li><class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <
li><class="tt-twitter" href="#"><span>Twitter</span></a></li>
    <
li><class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <
li><class="tt-facebook" href="#"><span>Facebook</span></a></li>
    <
li><class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <
li><class="tt-forrst" href="#"><span>Forrst</span></a></li>
</
ul>

CSS

Prvky seznamu se posunují doleva a odkazy budou vypadát následovně:


.tt-wrapper li a{
    
displayblock;
    
width68px;
    
height70px;
    
margin0 2px;
    
outlinenone;
    
backgroundtransparent url(../images/icons.pngno-repeat top left;
    
positionrelative;
}

Každý odkaz bude mít odlišnou polohu pozadí:


.tt-wrapper li .tt-gplus{
    
background-position0px 0px;
}
.
tt-wrapper li .tt-twitter{
    
background-position: -68px 0px;
}
.
tt-wrapper li .tt-dribbble{
    
background-position: -136px 0px;
}
.
tt-wrapper li .tt-facebook{
    
background-position: -204px 0px;
}
.
tt-wrapper li .tt-linkedin{
    
background-position: -272px 0px;
}
.
tt-wrapper li .tt-forrst{
    
background-position: -340px 0px;
}

Prvek span funguje jako popisek a bude schovan pomocí průzračností. Použijeme efekt projevování popisku, tak že se bude zobrazovat postupně ze zhora, proto stanovíme vlastnost bottom rovnou 100px.


.tt-wrapper li a span{
    
width100px;
    
heightauto;
    
line-height20px;
    
padding10px;
    
left50%;
    
margin-left: -64px;
    
font-family'Alegreya SC'Georgiaserif;
    
font-weight400;
    
font-styleitalic;
    
font-size14px;
    
color#719DAB;
    
text-shadow1px 1px 1px rgba(0000.1);
    
text-aligncenter;
    
border4px solid #fff;
    
backgroundrgba(255,255,255,0.3);
    
text-indent0px;
    
border-radius5px;
    
positionabsolute;
    
pointer-eventsnone;
    
bottom100px;
    
opacity0;
    
box-shadow1px 1px 2px rgba(0,0,0,0.1);
    
transitionall 0.3s ease-in-out;
}

Pro formování ukazatele použijeme pseudo-prvky :before a :after. Přiřazujeme jím stejné styly a vytvořime trojúhelník pomocí průzračných rámečků s obou stran. Prvek :before slouží jako odstín pro prvek :after, proto stanovíme hodnotu rgba na černou s nízkou průzračnosti.


.tt-wrapper li a span:before,
.
tt-wrapper li a span:after{
    
content'';
    
positionabsolute;
    
bottom: -15px;
    
left50%;
    
margin-left: -9px;
    
width0;
    
height0;
    
border-left10px solid transparent;
    
border-right10px solid transparent;
    
border-top10px solid rgba(0,0,0,0.1);
}

Pseudo-prvek :after se posunuje o několik pixlů a přiřazuje se mu bíla barva:


.tt-wrapper li a span:after{
    
bottom: -14px;
    
margin-left: -10px;
    
border-top10px solid #fff;
}

Při namíření kurzorem posuneme prvek span ze zhora a zobrazíme ho:


.tt-wrapper li a:hover span{
    
opacity0.9;
    
bottom70px;
}

A máme krásne popisky. V ukázce najdete ještě tři odlišné varianty animaci popisků.

Zdroj: http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/

Systém Orphus
Napište komentář.
Celkem komenrářů(0)