Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<input type="radio" name=change id=c1 checked> <label for="c1">od hora dole [--dir: bottom]</label> <input type="radio" name=change id=c2> <label for="c2">zprava do ľava [--dir: left]</label> <input type="radio" name=change id=c3> <label for="c3">od dola hore [--dir: top]</label> <input type="radio" name=change id=c4> <label for="c4">z ľava do prava [--dir: right]</label> <br> <br> <br> <table> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td> <td>Nesciunt, ex, esse, eligendi ratione id rerum labore magni molestiae fugit doloribus est corporis maiores obcaecati iste eveniet temporibus rem vero laudantium!</td> </tr> <tr> <td>Illum, sapiente, consectetur, quae ratione perspiciatis mollitia numquam impedit nesciunt pariatur veritatis natus dolor earum quas minus aperiam tempore ex laudantium aliquid doloremque quod tenetur sint cupiditate expedita.</td> <td>Eius, est.</td> </tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
td { --color-first: #ff1234; --color-second: transparent; /* bottom - od hora dole right - z ľava do prava top - od dola hore left - zprava do ľava */ --dir: bottom; background: linear-gradient( to var(--dir), var(--color-first) 50%, var(--color-second) 50% ); } /* */ body { font-family: Arial, sans-serif; background: url('https://media.tenor.com/99r2fHTjxSIAAAAC/space-kitty-cat.gif'); background-size: cover; } table, td { max-width: 640px; border: 1px solid; padding: .5rem; color:white; } label { display: inline-block; padding: .5rem; cursor: pointer; background: #eee; margin: 5px 0; } label:hover { background: #ddd; } input[type=radio] { display: none; } input[type=radio]:checked + label { background: #1B83C4; } input[type=radio][id=c1]:checked ~ table td { --dir: bottom; } input[type=radio][id=c2]:checked ~ table td { --dir: left; } input[type=radio][id=c3]:checked ~ table td { --dir: top; } input[type=radio][id=c4]:checked ~ table td { --dir: right; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>