back

  • person_pin
  • calendar_today
  • remove_red_eye

[css/jquery ui] box-shadow 설정하기

페이지 정보

작성자 webpaper 댓글 0건 조회 926회 작성일 19-02-20 09:31

본문


 

 

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


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


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

 

 

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

eb043d59cdb50d723714af781f033be1_1550622613_5776.png




 

<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>