gooey filter 를 응용한 메뉴 버튼 만들기

See the Pen gooey filter 응용 by nammyeon (@nammyeon) on CodePen.

html에 svg를 넣은 후 css에서 적용하면 끝!

 

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="bbq">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 15 -6" result="bbq" />
        <feBlend in="SourceGraphic" in="bbq" operator="atop" />
      </filter>
    </defs>
  </svg>

 

 

필터 ID는 원하는대로 정한 후 안에 있는 필터 값만 바꿔주기

 

적용하고자 하는 영역에 css로 필터 ID 불러오면 끝~~

div {filter: url(#bbq)}

 

 

참고로 values는 색상 매트릭스라고 하는 RGBA의 채널값인데 우리가 바꿔줄 수 있는 건 뒤에 있는 파란색 숫자 두 개다.

값을 마음대로 조절할 수 있는데 딱! 저 값이 가장 예쁘다.

 

 

@@@@@@여기서 또 응용해서 쇼핑몰이나 앱에서 종종 보이는 버튼 만들기@@@@@@@@@@@@@@

See the Pen Untitled by nammyeon (@nammyeon) on CodePen.

버튼 중심을 기준으로 버튼 주위를 둘러 싸는 하위메뉴를 만들어 봤다.

심심할 수 있는 디자인인데 구이필터 하나로 귀여워졌다.

어플에서 유용하게 쓰일듯

 

 

여기서 잠깐!!

버튼에서 일정한 간격만큼 떨어져 회전하는 방법은 ?!

See the Pen spin by nammyeon (@nammyeon) on CodePen.

사실 회전하는건 동그란 메뉴(하위메뉴) 자체가 아니고 동그란 메뉴의 부모(검정색 선)다.

빨간색 중심 구를 position으로 기준을 만들어준 다음 하위메뉴를 감싸는 각각의 부모(검정색 선)를 position: absolute로 띄워 기준이 되는 빨간색 구의 정 가운데에 위치시켜 준다(X축과 Y축 모두).  

그 다음 하위메뉴도 마찬가지로 position: absolute로 띄운 다음 X축의 값을 부모(검정색 선)의 끝에 위치시킨다(left: 0 또는 right: 0).

 

마지막으로 부모(검정색 선)의 높이값을 0으로 주면 위에서 만들었던 메뉴와 같이 만들 수가 있다.

초록색 구와 빨간색 구의 거리는 부모의 width값을 조절해주면 된다.

{(중심원의 반지름 + 중심원으로부터의 거리 )* 2} = width값