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
<style id="sipky"></style> <form action="?" onsubmit="vykreslit(); return false"> <label>Šířka okraje: <input id="borderWidth" type="text" value="20px"></label><br> <label>Šířka barevného okraje: <input id="borderSideWidth" type="text" value="20px"></label><br> <label>Šířka (<code>width</code>): <input id="width" type="text" value="0px"></label><br> <label>Výška (<code>height</code>): <input id="height" type="text" value="0px"></label><br> <label>Barva: <input id="color" type="color" value="#DA3F94"></label><br> <p><input type="submit" value="Vykreslit"></p> <div class="nahled"><div class="sipka dolu"></div></div> <div class="nahled"><div class="sipka vlevo"></div></div> <div class="nahled"><div class="sipka vpravo"></div></div> <div class="nahled"><div class="sipka nahoru"></div></div> <pre><code id="vystup"></code></pre> </form> <script>vykreslit()</script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.nahled {background: blue; display: inline-block; margin: .1em}
CSS
Autoformát
CSS reset
Až na konci
function vykreslit() { var border = document.getElementById("borderWidth").value; var borderSide = document.getElementById("borderSideWidth").value; var color = document.getElementById("color").value; var css = ".sipka {border: " + border + " solid transparent; width: " + document.getElementById("width").value + "; height: " + document.getElementById("height").value + "; display: inline-block; position: relative}\n"; var posun = (parseInt(border)/2) + "px"; css += ".sipka.dolu {border-top: " + borderSide + " solid " + color + "; top: " + posun + "}\n"; css += ".sipka.vlevo {border-right: " + borderSide + " solid " + color + "; left: -" + posun + "}\n"; css += ".sipka.vpravo {border-left: " + borderSide + " solid " + color + "; left: " + posun + "}\n"; css += ".sipka.nahoru {border-bottom: " + borderSide + " solid " + color + "; top: -" + posun + "}\n"; document.getElementById("vystup").innerHTML = css; document.getElementById("sipky").innerHTML = css; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>