До ужаса простецкий color picker rgba()
В редакторе
До ужаса простецкий color picker rgba()
Brain_Script
1130
2016-08-29 17:21:54
<div id='picker_wrapper'>
<div id='result'><div id='result_color'></div></div>
<input type='text' id='copy_color' value='rgba(92, 148, 239, 0.7)'>
<div id='color_edit'>
<input min="0" max="255" value="96" step="1" type='range' class='range1' id='color'>
<input min="0" max="255" value="150" step="1" type='range' class='range2' id='color'>
<input min="0" max="255" value="237" step="1" type='range' class='range3' id='color'>
<input min="0" max="1" value="0.7" step="0.01" type='range' class='range4' id='color'>
</div>
</div>
*{
margin: 0;
padding: 0;
}
body{
background: #f0f0f0;
}
#picker_wrapper{
width: 170px;
background: #fff;
padding: 10px;
margin: 10px auto;
box-shadow: 0px 0px 80px -40px #636363;
}
.range1,.range2,.range3,.range4{
display: block;
margin: auto;
}
#result{
margin: 10px auto;
width: 150px;
height: 150px;
background: url('http://image.prntscr.com/image/b109bcf091e84cb5aeec781b0466cd79.jpg');
background-size: cover;
box-shadow: inset 0px 0px 100px -40px #000;
}
#result_color{
height: 150px;
background: rgba(92, 148, 239, 0.7);
}
#copy_color{
width: 140px;
padding: 3px;
margin: 4px auto;
display: block;
}
$('#color_edit').on('input', function(){
var input1 = $('.range1').val();
var input2 = $('.range2').val();
var input3 = $('.range3').val();
var input4 = $('.range4').val();
var colors = "rgba("+input1+","+input2+","+input3+","+input4+")";
$('#result_color').css('background-color', colors);
$('#copy_color').attr('value', colors);
$('#picker_wrapper').css('box-shadow', "0px 0px 80px -40px #636363,0px 0px 80px -30px " + colors);
});
Войдите для добавления комментария.