nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/Web Animation

[글 출처] The Gooey Effect - Lucas Bebber from CSS-TRICKS 요약: 대충 SVG를 가지고 구이구이한 효과를 만드는 이야기 1. SVG 필터 자, SVG 필터는 다음과 같이 작성합니다. caniuse.com에 따르면 IE 10, Android 4.4 부터 지원하는 기능입니다. 필요한 경우 -webkit-filter 처럼 프리픽스를 넣어 주세요, 모든 SVG 필터는 요소 안에 정의됩니다. (defs = definitions 거든요!) 만들어 둔 필터를 적용하려면 아래와 같이 작성합니다 ;^) .selector { filter: url('#filter-id'); } /* * 또는 아래처럼 외부 SVG의 필터를 적용할 수도 있어요! * (대신 IE와 Edge는 미지원인 듯 ..

2019. 9. 18.

Blog/Web Animation

1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수정이 가능하다는 점이 가장 큰 장점이라 할 수 있습니다. 또, 확장이 가능하다는 점에서 확대해도 품질이 떨어지지 않습니다. 레티나나 모바일에 대응하기 위한 추가 작업도 필요 없고, 시각 장애가 있는 사용자들이 웹을 확대하더라도 품질 저하의 문제가 없죠! 단, 미지원 브라우저가 몇몇 있습니다. IE 8이라던가 IE 8이라던가 뭐 IE 같은 거요(ㅠㅠ) 2. SVG 사용하기 SVG는 도형과 선으로 이루어져 있고, 직접 path의 값을 입력해 뭔가를 그려낼 수도 있어요! 하지만 그걸 배우고..

2019. 9. 16.