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"> <title>Pure CSS gallery</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- CSS --> <link rel="stylesheet" type="text/css" href="index1.css"> </head> <body> <!-- inspirace: http://codepen.io/anon/pen/EarMPg --> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked> <li class="slide-container"> <div class="slide"> <img src="http://bar.nebeso.cz/img/bar.jpg"> </div> <div class="nav"> <label for="img-5" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2"> <li class="slide-container"> <div class="slide"> <img src="http://bar.nebeso.cz/img/vnitrek1.jpg"> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3"> <li class="slide-container"> <div class="slide"> <img src="http://bar.nebeso.cz/img/vnitrek2.jpg"> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-4" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-4"> <li class="slide-container"> <div class="slide"> <img src="http://bar.nebeso.cz/img/zahradka.jpg"> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-5" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-5"> <li class="slide-container"> <div class="slide"> <img src="http://bar.nebeso.cz/img/zahradka1.jpg"> </div> <div class="nav"> <label for="img-4" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> </li> </ul> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.slides, .slide-container, .slide { display: block; } .slide, .nav label, .nav-dots { position: absolute; } .slides, .slide { max-width: 609px; width: 100%; } .slides { padding: 0; margin: 50px auto; position: relative; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides input { display: none; } .slide { top: 0; opacity: 0; transform: scale(0); transition: all .7s ease-in-out; } .slide img { max-width: 100%; max-height: 100%; } .nav label { width: auto; height: 100%; display: none; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; background-color: rgba(255, 255, 255, .3); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; text-align: center; } .nav-dots .nav-dot { width: 11px; height: 11px; margin: 0 4px; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } .nav-dot { border: 1px solid orange; } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: yellow; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>