web.paper | CSS box-shadow

css box-shadow 설정하기

http://www.webpaper.kr/box-shadow/

CSS box-shadow 설정 작업을 편리하게 하기 위한 페이지 작업 

jquery ui 소스를 이용하여, 마우스로 편리하게 작업가능한 페이지 

평소에 자주 사용하던 https://www.cssmatic.com/box-shadow 곳을 카피하여 작업한 페이지 
 

Box Shadow CSS Generator | CSSmatic

Are you a web developer? Would you like to collaborate on CSSMatic?

https://www.cssmatic.com/box-shadow

 

설정한 CSS를 간편하게 복사하여 붙여넣기로 사용가능 함






 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
$( function() {
    //좌우
    var handle1 = $( "#custom-handle1" );
        $( "#slider1" ).slider({
            min: -200,
            max: 200,
            values:10,
            slide: function( event, ui ) {
            setshadow('horizontal',ui.value);
        }
    });
 
} );
 
<div class="sliderBox">
    <div id="slider1">
        <div id="custom-handle1" class="ui-slider-handle"></div>
    </div>      
</div>

function copy_css(elementId){
 
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
  alert('CSS가 복사되었습니다.');
}
 
    <div id="css-text"></div>
    <button type="button" onclick="copy_css('css-text')">복사</button>