Галерея только средствами CSS

• 07, 17, 2013
•  bullgare
•  HTML and CSS
• No Comments.

В собеседованиях бывают вопросы про галерею.
В частности — сделать галерею без JS.
Вот как это можно сделать.

<section class="gallery">
<nav>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
</ul>
</nav>
<article id="one" class="target">
<figure>
<img src="http://placekitten.com/g/300/200" alt="Kitten 1">
</figure>
</article>
<article id="two" class="target">
<figure>
<img src="http://placekitten.com/g/300/201" alt="Kitten 2">
</figure>
</article>
<article id="three" class="target">
<figure>
<img src="http://placekitten.com/g/301/200" alt="Kitten 3">
</figure>
</article>
<article id="four" class="target">
<figure>
<img src="http://placekitten.com/g/301/201" alt="Kitten 4">
</figure>
</article>
</section>

* {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
font-family: helvetica, arial, sans-serif;
padding: 1em;
}
footer, section, article, header, aside, figure, nav {
display: block;
}
nav {
padding: 20px;
z-index: 20;
top: 0px;
left: 0;
background: #fff;
position: absolute;
}

nav li {
display: inline;
padding-right: 1em;
}
nav a {
background: #369;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
font-weight: bold;
text-decoration: none;
}
nav a:hover, nav a:focus {
background: #036;
}
footer {
clear: both;
font-size: 10px;
}
footer a {
color: #000;
}

@media screen and (min-width: 400px) {

.gallery {
position: relative;
height: 280px;
width: 340px;
overflow: hidden;
}
.target {
position: absolute;
top: 60px;
left: -320px;
height: 220px;
width: 300px;
}
.target:target {
top: 60px;
left: 20px;
}
}

Демо:
http://jsfiddle.net/codepo8/wsD9L/1/
Описание с :target:
https://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/