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

В собеседованиях бывают вопросы про галерею.
В частности — сделать галерею без 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>

<nav>

<ul>

<li><a href="#three">Three</a></li>

</ul>

</nav>

</figure>

</article>

</figure>

</article>

</figure>

</article>

</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;
}
}

* {

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/

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

Similar Posts

LEAVE A COMMENT Отменить ответ