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
<canvas id="generator" width=800 height=400></canvas> <a> Šipka s libovolně dlouhým textem <span></span> <span></span> <span></span> <span></span> </a> <br> <a style="font-size: 150%"> Velký text <span></span> <span></span> <span></span> <span></span> </a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
canvas { display: none } a { color: #FFF; display: inline-block; padding: 1em 0 0.5em 1em; line-height: 1em; position: relative; margin: 0.25em 4em 0.75em 0; } a span { position: absolute; } a span:first-child { left: 0; top: 100%; width: 100%; height: 0.5em; background-position: 0 100%; } a span:first-child+* { left: 100%; top: 0; width: 2em; height: 100%; margin-left: 2em; padding-bottom: 0.5em; background-position: 100% 50%; } a span:first-child+*+* { left: 100%; top: 0; width: 2em; height: 1.5em; background-position: 50% 0; } a span:first-child+*+*+* { left: 100%; top: 1.5em; width: 2em; height: 1.5em; background-position: 50% 100%; }
CSS
Autoformát
CSS reset
Až na konci
var w = 800; h = 400, roh = 5, roh2 = 30, roh3 = 3; var context = document.getElementById("generator").getContext("2d"); context.shadowColor = context.strokeStyle = '#1E7FAC'; context.fillStyle = "#2BA4DB"; context.lineWidth = 1.5; context.beginPath(); context.moveTo(0, h / 2); context.lineTo(0, h - roh); context.arcTo(0, h, roh, h, roh); context.arcTo(w - h, h, w - roh, h / 2, roh2); context.arcTo(w, h / 2, w - h, 0, roh3); context.arcTo(w - h, 0, 0, 0, roh2); context.arcTo(0, 0, 0, h/2, roh); context.closePath(); context.clip(); context.shadowBlur = 5; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.fill(); context.stroke(); document.write("<style>body * { background-image: url(" + context.canvas.toDataURL() + ") }</style>");
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>