<!---
Have fun :)
-->
<div class="container">
<div class="bgleft"></div>
<div class="bgright"></div>
<div class="imagecontainer">
<div class="picborder"></div>
<img id="pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/443195/Pic3_1k.png" alt="picture of a toy car">
</div>
<div class="slidercontainer">
<div class="sliderblock">
<div class="val" id="slider1value">100%</div>
<input class="slider" id="slider1" type="range" min="0" max="500" value="100">
<label for="slider1">brightness</label>
</div>
<div class="sliderblock">
<div class="val" id="slider2value">100%</div>
<input class="slider" id="slider2" type="range" min="0" max="500" value="100">
<label for="slider2">contrast</label>
</div>
<div class="sliderblock">
<div class="val" id="slider3value">100%</div>
<input class="slider" id="slider3" type="range" min="0" max="500" value="100">
<label for="slider3">saturate</label>
</div>
<div class="sliderblock">
<div class="val" id="slider4value">0%</div>
<input class="slider" id="slider4" type="range" min="0" max="100" value="0">
<label for="slider4">grayscale</label>
</div>
<div class="sliderblock">
<div class="val" id="slider5value">0%</div>
<input class="slider" id="slider5" type="range" min="0" max="100" value="0">
<label for="slider5">invert</label>
</div>
<div class="sliderblock">
<div class="val" id="slider6value">0°</div>
<input class="slider" id="slider6" type="range" min="0" max="360" value="0">
<label for="slider6">hue rotate</label>
</div>
<div class="sliderblock">
<div class="val" id="slider7value">0px</div>
<input class="slider" id="slider7" type="range" min="0" max="20" value="0">
<label for="slider7">blur</label>
</div>
<div class="sliderblock">
<div class="val" id="slider8value">100%</div>
<input class="slider" id="slider8" type="range" min="0" max="100" value="0">
<label for="slider8">opacity</label>
</div>
<div class="sliderblock">
<div class="val" id="slider9value">0%</div>
<input class="slider" id="slider9" type="range" min="0" max="100" value="0">
<label for="slider9">sepia</label>
</div>
<div class="sliderblock">
<div class="val" id="slider10value">0px</div>
<input class="slider" id="slider10" type="range" min="0" max="30" value="0">
<label for="slider10">drop shadow</label>
</div>
</div>
</div>
<button id="reset">reset</button>
<a id="insta" class="somelinks" href="https://www.instagram.com/diffthingies/" target=”_blank”><i class="fab fa-instagram" aria-hidden="true"></i></a>
<a id="twit" class="somelinks" href="https://twitter.com/mrvalaty" target=”_blank”><i class="fab fa-twitter" aria-hidden="true"></i></a>
body {
background: #333;
margin: 0;
overflow: hidden;
color: white;
}
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.bgleft,
.bgright {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: #33d;
}
.bgright {
right: 0;
background: #73d;
}
#reset{
position: absolute;
top: 10px;
left: 50%;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #fff;
transform: translate(-50%, 0);
font-family: monospace;
cursor: pointer;
color: #fff;
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}
#reset:focus,
#reset:hover{
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}
.imagecontainer {
position: absolute;
top: 8vh;
left: 15vw;
height: 40vh;
width: 70vw;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
}
.picborder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 62vw;
height: calc(64vw * 0.63);
background: #fff;
}
.slidercontainer {
position: absolute;
top: 55vh;
left: 5vw;
height: 45vh;
width: 90vw;
display: flex;
justify-content: space-evenly;
}
.sliderblock {
width: 8vw;
padding: 0;
}
.slider {
position: relative;
top: calc(20vh - 16px);
left: calc(4vw - 10px);
width: 20vh;
margin: 0;
transform: rotate(-90deg);
transform-origin: 0 0;
}
label {
position: relative;
display: block;
font-family: monospace;
top: 32vh;
height: 8vw;
width: 80px;
text-align: left;
line-height: 8vw;
white-space: nowrap;
transform-origin: 0 0;
transform: rotate(-90deg);
}
.val {
/*display: none;*/
position: relative;
transform: rotate(0deg);
display: block;
font-family: monospace;
top: calc(42vh - 16px);
height: 16px;
width: 100%;
text-align: center;
visibility: hidden;
}
/*Desktop Stuff i.e. if larger than 900*/
@media only screen and (min-width: 820px) {
.imagecontainer {
top: 15vh;
left: 30vw;
height: 40vh;
width: 40vw;
}
.picborder {
width: 37vw;
height: calc(38vw * 0.63);
background: #fff;
}
.slidercontainer {
top: 65vh;
left: 10vw;
height: 35vh;
width: 80vw;
}
.sliderblock {
top: 60vh;
height: 25vh;
width: 8vw;
padding: 0;
}
.slider {
left: calc(4vw - 10px);
width: 20vh;
margin: 0;
transform: rotate(-90deg);
transform-origin: 0 0;
}
label {
position: relative;
display: block;
font-family: monospace;
top: 20vh;
height: 5vh;
width: 100%;
text-align: center;
line-height: 5vh;
white-space: nowrap;
transform: rotate(0deg);
}
.val {
/*display: none;*/
position: relative;
transform: rotate(0deg);
display: block;
font-family: monospace;
top: calc(32vh - 16px);
height: 16px;
width: 100%;
text-align: center;
}
}
/* Styling the sliders*/
input[type="range"] {
-webkit-appearance: none;
background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-ms-track {
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
/*New range styles*/
input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
cursor: pointer;
background: #fff;
margin-top: 10px;
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}
input[type="range"]::-webkit-slider-thumb {
height: 20px;
width: 20px;
border-radius: 10px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -9px;
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}
input[type="range"]:focus::-webkit-slider-runnable-track {
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}
input[type="range"]:focus::-webkit-slider-thumb {
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #fff;
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}
input[type="range"]::-moz-range-thumb {
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -9px;
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}
input[type="range"]:focus::-moz-range-track {
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}
input[type="range"]:focus::-moz-range-thumb {
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}
input[type="range"]::-ms-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #fff;
}
input[type="range"]::-ms-thumb {
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: 0px;
}
input[type="range"]:focus::-ms-fill-lower {
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.4);
}
input[type="range"]:focus::-ms-fill-upper {
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.4);
}
/*social*/
#insta,
#twit {
position: absolute;
top: 0;
font-size: 20px;
margin: 10px;
cursor: pointer;
color: #fff;
}
#twit {
right: 0;
}
/*prevent defaults*/
button,
p{
display: inline-block;
border: none;
margin: 0;
text-decoration: none;
padding: 0;
background: none;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
button:focus {
outline: none;
color: black;
}
textarea:focus {
outline: none;
}
select:focus {
color: #000;
}
a,
a:link,
a:visited {
color: var(--maincolor);
}
//Properties
let brightness = 100;
let contrast = 100;
let saturate = 100;
let grayscale = 0;
let invert = 0;
let huerotate = 0;
let blur = 0;
let opacity = 100;
let sepia = 0;
let dropshadow = 0;
//Elemets
const picture = document.getElementById("pic");
const reset = document.getElementById("reset");
const slider1 = document.getElementById("slider1");
const value1 = document.getElementById("slider1value");
const slider2 = document.getElementById("slider2");
const value2 = document.getElementById("slider2value");
const slider3 = document.getElementById("slider3");
const value3 = document.getElementById("slider3value");
const slider4 = document.getElementById("slider4");
const value4 = document.getElementById("slider4value");
const slider5 = document.getElementById("slider5");
const value5 = document.getElementById("slider5value");
const slider6 = document.getElementById("slider6");
const value6 = document.getElementById("slider6value");
const slider7 = document.getElementById("slider7");
const value7 = document.getElementById("slider7value");
const slider8 = document.getElementById("slider8");
const value8 = document.getElementById("slider8value");
const slider9 = document.getElementById("slider9");
const value9 = document.getElementById("slider9value");
const slider10 = document.getElementById("slider10");
const value10 = document.getElementById("slider10value");
//update the filters
function updateFilters() {
picture.style.filter =
"brightness(" +
brightness +
"%) contrast(" +
contrast +
"%) saturate(" +
saturate +
"%) grayscale(" +
grayscale +
"%) invert(" +
invert +
"%) hue-rotate(" +
huerotate +
"deg) blur(" +
blur +
"px) opacity(" +
opacity +
"%) sepia(" +
sepia +
"%) drop-shadow(0px 0px " +
dropshadow +
"px rgba(0, 0, 0, 0.5))";
}
//reset filters
reset.addEventListener("click", function() {
console.log("resset");
brightness = 100;
slider1.value = 100;
value1.innerHTML = slider1.value + "%";
contrast = 100;
slider2.value = 100;
value2.innerHTML = slider2.value + "%";
saturate = 100;
slider3.value = 100;
value3.innerHTML = slider3.value + "%";
grayscale = 0;
slider4.value = 0;
value4.innerHTML = slider4.value + "%";
invert = 0;
slider5.value = 0;
value5.innerHTML = slider5.value + "%";
huerotate = 0;
slider6.value = 0;
value6.innerHTML = slider6.value + "px";
blur = 0;
slider7.value = 0;
value7.innerHTML = slider7.value + "°";
opacity = 100;
slider8.value = 0;
value8.innerHTML = 100 - slider8.value + "%";
sepia = 0;
slider9.value = 0;
value9.innerHTML = slider9.value + "%";
dropshadow = 0;
slider10.value = 0;
value10.innerHTML = slider10.value + "px";
updateFilters();
});
//brightness slider
slider1.addEventListener("input", function() {
console.log(slider1.value);
value1.innerHTML = slider1.value + "%";
brightness = slider1.value;
updateFilters();
});
slider1.addEventListener("focus", function() {
console.log("focus gotten");
value1.style.visibility = "visible";
});
slider1.addEventListener("blur", function() {
console.log("focus lost");
value1.style.visibility = "hidden";
});
//contrast slider
slider2.addEventListener("input", function() {
value2.innerHTML = slider2.value + "%";
contrast = slider2.value;
updateFilters();
});
slider2.addEventListener("focus", function() {
value2.style.visibility = "visible";
});
slider2.addEventListener("blur", function() {
value2.style.visibility = "hidden";
});
//saturation slider
slider3.addEventListener("input", function() {
value3.innerHTML = slider3.value + "%";
saturate = slider3.value;
updateFilters();
});
slider3.addEventListener("focus", function() {
value3.style.visibility = "visible";
});
slider3.addEventListener("blur", function() {
value3.style.visibility = "hidden";
});
//grayscale slider
slider4.addEventListener("input", function() {
value4.innerHTML = slider4.value + "%";
grayscale = slider4.value;
updateFilters();
});
slider4.addEventListener("focus", function() {
value4.style.visibility = "visible";
});
slider4.addEventListener("blur", function() {
value4.style.visibility = "hidden";
});
//invert slider
slider5.addEventListener("input", function() {
value5.innerHTML = slider5.value + "%";
invert = slider5.value;
updateFilters();
});
slider5.addEventListener("focus", function() {
value5.style.visibility = "visible";
});
slider5.addEventListener("blur", function() {
value5.style.visibility = "hidden";
});
//hue-rotate slider
slider6.addEventListener("input", function() {
value6.innerHTML = slider6.value + "°";
huerotate = slider6.value;
updateFilters();
});
slider6.addEventListener("focus", function() {
value6.style.visibility = "visible";
});
slider6.addEventListener("blur", function() {
value6.style.visibility = "hidden";
});
//blur slider
slider7.addEventListener("input", function() {
value7.innerHTML = slider7.value + "px";
blur = slider7.value;
updateFilters();
});
slider7.addEventListener("focus", function() {
value7.style.visibility = "visible";
});
slider7.addEventListener("blur", function() {
value7.style.visibility = "hidden";
});
//opacity slider
slider8.addEventListener("input", function() {
value8.innerHTML = 100 - slider8.value + "%";
opacity = 100 - slider8.value;
updateFilters();
});
slider8.addEventListener("focus", function() {
value8.style.visibility = "visible";
});
slider8.addEventListener("blur", function() {
value8.style.visibility = "hidden";
});
//sepia slider
slider9.addEventListener("input", function() {
value9.innerHTML = slider9.value + "%";
sepia = slider9.value;
updateFilters();
});
slider9.addEventListener("focus", function() {
value9.style.visibility = "visible";
});
slider9.addEventListener("blur", function() {
value9.style.visibility = "hidden";
});
//dropshadow slider
slider10.addEventListener("input", function() {
value10.innerHTML = slider10.value + "px";
dropshadow = slider10.value;
updateFilters();
});
slider10.addEventListener("focus", function() {
value10.style.visibility = "visible";
});
slider10.addEventListener("blur", function() {
value10.style.visibility = "hidden";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.