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
<img src="http://blacksgoingvegan.com/wp-content/uploads/2014/03/carrots.png" class="mrkev"> <div style="text-align: center;"> <a href="1,35.html" class="button">Mrkev</a> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html { background: #4B632E; background: url(http://www.pageresource.com/wallpapers/wallpaper/dark-green-grass-texture-and-high-resolution_834941.jpg); } .mrkev { width: 500; height: 375; z-index: -1; position: absolute; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .mrkev.shown { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } /* ---- [ Tlacitko ] ---- */ .button { font-family: Tahoma, Verdana, Arial, sans-serif; display: inline-block; vertical-align: top; position: relative; padding: 0 15px 0 15px; line-height: 35px; font-size: 12px; font-weight: bold; color: white; text-align: center; text-transform: uppercase; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); background: #576dce; background-clip: padding-box; border: 1px solid; border-color: #374fbb #344cb3 #2b3e94; border-radius: 2px; -webkit-font-smoothing: antialiased; background-image: -webkit-linear-gradient(top, #92a0df, #576dce 50%, #3f58c7 80%, #576dce); background-image: -moz-linear-gradient(top, #92a0df, #576dce 50%, #3f58c7 80%, #576dce); background-image: -o-linear-gradient(top, #92a0df, #576dce 50%, #3f58c7 80%, #576dce); background-image: linear-gradient(to bottom, #92a0df, #576dce 50%, #3f58c7 80%, #576dce); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2); } .button:hover, .button.hover { background-color: #5f74d0; border-color: #2d429c #2d429c #253680; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce; } .button:active, .button.active { border-color: #253680 #2b3e94 #3147a8; background: #475fc9; -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8); } .button:before { content: ''; position: absolute; top: 9px; right: 12px; width: 17px; height: 17px; background: #374fbb; border-radius: 9px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2); } .button:after { content: '>'; float: right; position: relative; margin-left: 15px; font: bold 18px/33px 'Comic Sans MS'; /* I tried everything but couldn't get the vertical alignment to be consistent in IE, so this is a hack targeting IE8-9-10. */ line-height: 31px\0; color: #6377d1; text-shadow: 0 -1px #8696dc, 0 1px 1px rgba(0, 0, 0, 0.3); -webkit-font-smoothing: subpixel-antialiased; }
CSS
Autoformát
CSS reset
Až na konci
setTimeout(function(){ document.getElementsByTagName('img')[0].className += ' shown'; }, 1000);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>