До ужаса простецкий color picker rgba()

В редакторе

До ужаса простецкий color picker rgba()

Brain_Script
629
2016-08-29 14: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); });
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика