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ářů(39)
Jeffpoonia - 2017-11-17  10:53:46
 Cialis Viagra Effets Secondaires Discount Bentyl In Inte
et Medicine Cheap Prevacid Otc [url=http://tadalaf20mg.com ]cialis buy online[/url] Bordeaux Kamagra In Linea
Jeffpoonia - 2017-11-17  10:53:45
 Cialis Viagra Effets Secondaires Discount Bentyl In Inte
et Medicine Cheap Prevacid Otc [url=http://tadalaf20mg.com ]cialis buy online[/url] Bordeaux Kamagra In Linea
Jeffpoonia - 2017-11-17  10:53:43
 Cialis Viagra Effets Secondaires Discount Bentyl In Inte
et Medicine Cheap Prevacid Otc [url=http://tadalaf20mg.com ]cialis buy online[/url] Bordeaux Kamagra In Linea
Jeffpoonia - 2017-11-17  10:53:42
 Cialis Viagra Effets Secondaires Discount Bentyl In Inte
et Medicine Cheap Prevacid Otc [url=http://tadalaf20mg.com ]cialis buy online[/url] Bordeaux Kamagra In Linea
Ronweix - 2017-11-07  21:38:27
 Comment Obtenir Cytotec [url=http://cheapestcial.com]cialis[/url] Buy Cheap Viagra Uk
Ronweix - 2017-11-07  21:38:27
 Comment Obtenir Cytotec [url=http://cheapestcial.com]cialis[/url] Buy Cheap Viagra Uk
Ronweix - 2017-11-07  21:38:26
 Comment Obtenir Cytotec [url=http://cheapestcial.com]cialis[/url] Buy Cheap Viagra Uk
Ronweix - 2017-11-07  21:38:25
 Comment Obtenir Cytotec [url=http://cheapestcial.com]cialis[/url] Buy Cheap Viagra Uk
Ronweix - 2017-10-27  23:27:49
 Amoxicillin Generic [url=http://costofcial.com]cialis[/url] Prednisone Over Counter Peut Acheter Kamagra Suisse
Ronweix - 2017-10-27  23:27:48
 Amoxicillin Generic [url=http://costofcial.com]cialis[/url] Prednisone Over Counter Peut Acheter Kamagra Suisse
Ronweix - 2017-10-27  23:27:47
 Amoxicillin Generic [url=http://costofcial.com]cialis[/url] Prednisone Over Counter Peut Acheter Kamagra Suisse
Ronweix - 2017-10-27  23:27:46
 Amoxicillin Generic [url=http://costofcial.com]cialis[/url] Prednisone Over Counter Peut Acheter Kamagra Suisse
Ronweix - 2017-10-25  02:53:57
 Cialis Lilly Pharma Propecia Canadian Cialis Soft Buy Nolvadex Uk [url=http://cheapestcial.com]generic cialis[/url] Prix Du Amoxicillin En Suisse Fast Cialis By Mail
Ronweix - 2017-10-16  21:49:48
 What Is Zithromax Good For [url=http://genericviabuy.com]viagra[/url] Comprar Viagra Barcelona Baclofene Sevrage Tabac
Ronweix - 2017-10-16  21:49:48
 What Is Zithromax Good For [url=http://genericviabuy.com]viagra[/url] Comprar Viagra Barcelona Baclofene Sevrage Tabac
Ronweix - 2017-10-16  21:49:47
 What Is Zithromax Good For [url=http://genericviabuy.com]viagra[/url] Comprar Viagra Barcelona Baclofene Sevrage Tabac
Ronweix - 2017-10-16  21:49:46
 What Is Zithromax Good For [url=http://genericviabuy.com]viagra[/url] Comprar Viagra Barcelona Baclofene Sevrage Tabac
Ronweix - 2017-10-13  19:43:57
 Propecia Hormones Cialis 36 Hrs Acticin Pills [url=http://cheaplevi.com]generic levitra online[/url] Kamagra Oral Jelly Online Kaufen Quel Est Generique Kamagra Cialis Viagra Cual Comprar
Ronweix - 2017-10-13  19:43:55
 Propecia Hormones Cialis 36 Hrs Acticin Pills [url=http://cheaplevi.com]generic levitra online[/url] Kamagra Oral Jelly Online Kaufen Quel Est Generique Kamagra Cialis Viagra Cual Comprar
Ronweix - 2017-10-13  19:43:54
 Propecia Hormones Cialis 36 Hrs Acticin Pills [url=http://cheaplevi.com]generic levitra online[/url] Kamagra Oral Jelly Online Kaufen Quel Est Generique Kamagra Cialis Viagra Cual Comprar
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.