Divisor para fotografías

Hola aquí os mostraré el código para utilizar esta herramienta. Antes de nada las fotos deben tener la misma proporción. Si las fotos son más anchas que la página de tu blog puedes realizar una regla de tres para mantener las proporciones de la fotografía.

Antes y Despues con CSS

<!DOCTYPE html>
<html>
<head>
<title>Antes y Despues con CSS</title>
<style>
/* holder */
div#comparison {
width: 60vw; height: 60vw;
max-width: (Ancho fotos)px; max-height: (Alto fotos)px;
overflow: hidden;
}
div#comparison figure {
background-image: url("Url foto sin editar");
background-size: cover; font-size: 0;
width: 100%; height: 100%; margin: 0;
position: relative;
}
div#comparison figure > img {
position: relative; width: 100%;
}
div#comparison figure div {
background-image: url("Url foto editada");
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
overflow: hidden; bottom: 0; height: 100%;
}
/* slider */
input[type=range]{
-webkit-appearance:none;
-moz-appearance:none;
position: relative;
top: -2rem; left: -2%;
background-color: rgba(255,255,255,0.1);
width: 102%;
}
input[type=range]:focus { outline: none; }
input[type=range]:active { outline: none; }
input[type=range]::-moz-range-track {
-moz-appearance:none;
height:15px;
width: 98%;
background-color: rgba(255,255,255,0.1);
position: relative;
outline: none;
}
input[type=range]::active {
border: none; outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
width: 20px; height: 15px;
background: #fff;
border-radius: 0;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px; height: 15px; background: #fff;
border-radius: 0;
}
input[type=range]:focus::-webkit-slider-thumb {
background: rgba(255,255,255,0.5);
}
input[type=range]:focus::-moz-range-thumb {
background: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div id="comparison">
<figure>
<div id="divisor"></div>
</figure>
<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>

<script>
divisor = document.getElementById("divisor");
slider = document.getElementById("slider");
function moveDivisor() { divisor.style.width = slider.value+"%"; }

//reset after page load
window.onload = function() {
moveDivisor();
};
</script>
</body>
</html>

Tenéis que editar solamente lo que está en negrita y pegarlo todo en el apartado de HTML de vuestra entrada.

Acerca de Alberto José Muñoz Moyano

Estudiante de bachillerato. Alicante - España

El Blog De A Jota

Divisor para fotografías

Acerca de Alberto José Muñoz Moyano

0 comentarios:

Publicar un comentario

Divisor para fotografías

Acerca de Alberto José Muñoz Moyano

POSTS RELACIONADOS

0 comentarios:

Publicar un comentario