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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="webdata/css/style.css"> <title>Animace</title> </head> <body> <div id="animation"> <header> <h1>Animace</h1> </header> <nav> <u>Úvod</u> | <a href="stranka2.html">Stránka 2</a> </nav> <div class="clear"></div> <div id="text"><p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.</p></div> <footer>© 2014 Michal Sebek</footer> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/*------CSS File website.site40.net (c)2014 Michal Sebek------*/ /*---ANIMATED BACKGROUND---*/ #animation { width:100%; height:100%; background:yellow; position:relative; -webkit-animation:myfirst 5s linear infinite alternate; /* Chrome, Safari, Opera */ animation:myfirst 5s linear 0s infinite alternate; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0% {background:yellow;} 25% {background:yellowgreen;} 50% {background:lawngreen;} 75% {background:greenyellow;} 100% {background:chartreuse;} } /* Standard syntax */ @keyframes myfirst { 0% {background:yellow;} 25% {background:yellowgreen;} 50% {background:lawngreen;} 75% {background:greenyellow;} 100% {background:chartreuse;} } /*---BODY---*/ html,body { height:99%; /* ve 100% blbne; needed for animated background */ background-color: white; } /*---MENU---*/ #menu { width: 100%; position: absolute; right: 5px; top: 5px; font-size:20px; } a:link, a:visited { color:white; text-decoration: none; text-shadow: 0px 0px 5px white; } a:hover { color:white; text-decoration:underline; text-shadow: 0px 0px 10px white; } u { /* white underlined text */ color:white; text-decoration:underline; text-shadow: 0px 0px 5px white; } /*---HEADING---*/ h1 { font-size:250%; color: white; text-align: center; text-shadow: 0px 0px 5px black; } /*---HEADER---*/ header { float: left; margin-left: 10px; margin-top: -20px; } /*---FOOTER---*/ footer { position:absolute; bottom:0px; left:0; right:0; color:black; text-align:center; padding:10px; height:15px; } /*---NAVIGATION---*/ nav { float:right; margin-right:40px; margin-top:20px; color:white; font-size:25px; } /*---CLEAR---*/ .clear {clear: both;} /*---TEXT---*/ #text { float:left; margin-left: 5px; } p { color:darkorange; font-style:normal; font-size:20px; text-align:justify; text-shadow:0px 0px 5px darkorange; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>