Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1>Universální hover efekt</h1> <h2>Ztmavit filtrem <code>brightness</code></h2> <p class="tlacitka"> <a href="http://www.facebook.com/sharer.php?u=http://jecas.cz/" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">Facebook<span></span></a> <a href="http://twitter.com/share?text=Poznámky+k+webdesignu&url=http://jecas.cz/" class="twitter-share-button">Tweet<span></span></a> <a href="https://plus.google.com/share?url=http://jecas.cz/" class="g-plusone" data-size="medium">Google +<span></span></a> </p> <h2>Zesvětlit</h2> <p class="tlacitka zesvetlit"> <a href="http://www.facebook.com/sharer.php?u=http://jecas.cz/" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">Facebook<span></span></a> <a href="http://twitter.com/share?text=Poznámky+k+webdesignu&url=http://jecas.cz/" class="twitter-share-button">Tweet<span></span></a> <a href="https://plus.google.com/share?url=http://jecas.cz/" class="g-plusone" data-size="medium">Google +<span></span></a> </p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.tlacitka a { display: inline-block; text-align: center; padding: .2em .5em; color: #fff; text-decoration: none; position: relative; } .tlacitka .fb-like {background: #4B67A1} .tlacitka .twitter-share-button {background: #00ACEE} .tlacitka .g-plusone {background: #DD4B39} .tlacitka a:hover { -webkit-filter: brightness(90%); -moz-filter: brightness(90%); -ms-filter: brightness(90%); -o-filter: brightness(90%); filter: brightness(90%); } .zesvetlit a:hover { -webkit-filter: brightness(110%); -moz-filter: brightness(110%); -ms-filter: brightness(110%); -o-filter: brightness(110%); filter: brightness(110%); }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>