Слайдер для сравнения фотографий
Сегодня поделюсь полезным и очень простым слайдером для сравнения двух фотографий, например до и после обработки, снятых в разное время суток и т.д. Слайдер не использует JavaScript и состоит только из HTML и CSS. Всё очень просто.
Для сравнения фотографий передвигайте ползунок, находящийся посередине в нижней части фотографии. В примере использованы фотографии обработанные с помощью плагина для Adobe “Photoshop” и “Lightroom” “Color Efex Pro” входящий в прекрасный набор “Google Nik Collection” и который можно бесплатно скачать здесь.
HTML
<div class=”image-slider”>
<div><img src=”https://vavik96.com/wp-content/uploads/2017/04/01-befor.jpg” /></div>
<img src=”https://vavik96.com/wp-content/uploads/2017/04/01-after.jpg” />
</div>
CSS
* Image slider with pure CSS
* Original version in http://demosthenes.info/blog/css
*/.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}/* Could use a pseudo-element, but they’re currently
super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 25px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}/* Cross-browser resizer styling */
.image-slider > div:before {
content: ”;
position: absolute;
right: 0; bottom: 0;
width: 13px; height: 13px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}.image-slider img {
user-select: none;
max-width: 400px;
}
Авторство слайдера в коде CSS, хотя на сайте его нет.
