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

CSS 작업을 하다보면 box-shadow가 필요한 경우가 있다. 너무 진하게 쓰거나, 잘못하면 자칫 촌스러워 보이지만, 

잘 조절해서 쓰면 또 의외의 고급스러움을 제공하는 경우도 있다. 

box-shadow의 설정은 사실 외워서 사용하기가 어렵다. 

크롬 개발자 도구에서 지원해주는 방법도 있는데, 

평소에는 "https://www.cssmatic.com/box-shadow" 사이트에서 종종 설정해서 사용하기도 했다. 

그러다 그냥 나도 한번 만들어보자는 생각이 들어 만들어 보았다. 

제공하는 기능은 그림자의 위치 및 흐림 / 투명도 / 반경 등을 드래그 형식 또는 입력하는 형식으로 조절이 가능하다. 

드래그 기능은 Jqueryui 라이브러리를 사용했다. 

$( function() {
	//좌우
	var handle1 = $( "#custom-handle1" );
		$( "#slider1" ).slider({
			min: -200,
			max: 200,
			values:10,
			slide: function( event, ui ) {
			setshadow('horizontal',ui.value);
		}
	});

} );


	

		

	
		

완성된 설정을 복사하는 기능 

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가 복사되었습니다.');
}

	

	

이렇게 사용하니 편리하다 이제 내껄로 써야디 .. 

CSS box-shadow 설정페이지

간단하게 box-shadow 설정할 수 있는 페이지

바로가기