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
<div class="appearance--clip-bottom"> <p>Lorem ipsum</p> </div> <div class="appearance--clip-top"> <p>Lorem ipsum</p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0; } div { padding: 1em; background: green; margin-top: 2em; } .appearance--clip-top, .appearance--clip-bottom { position: relative; z-index: 1; } .appearance--clip-top { padding-top: 4.375%; /* vyplýva z rozmerov obrázku a jeho pomeru výšky a šírky */ } .appearance--clip-top:before, .appearance--clip-bottom:after { content: ''; height: 0; position: absolute; left: 0; right: 0; background: left top no-repeat scroll; background-size: cover; z-index: -1; padding-bottom: 4.375%; } .appearance--clip-top:before { top: 0; background-image: url(http://img.djpw.cz/eoi.png); } .appearance--clip-bottom:after { bottom: 0; background-image: url(http://img.djpw.cz/doi.png); }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>