음악, 삶, 개발

animate.css 나 tailwind css 를 사용하다보니, 아예 나만의 CSS 라이브러리를 만들어보면 어떨까라는 생각을 해보게되었다. 먼저 css 파일을 아래와 같이 만들었다. /* test.css */ .test { color : yellow; background-color : green; } 이렇게 만든 css 파일을 다른 css 파일 또는 style 태그안에 @import 해주면 된다. Hello World! 이와 같은 방식으로 animate.css 도 만들어졌다.

stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter box-shadow 속성은 매우 비싼 속성이므로, box-shadow 자체에 바로 애니메이션을 걸어버리면 성능 저하가 발생할수있다. 따라서 ::before 와 ::after 에 미리 box-shadow 를 만들어놓고, 마우스가 hover 할때만 opacity 를 1로 주는것이 효과적이다. ::before 와 ::after 가 햇깔리는데 아래와 같은 문법이다. div {} div::before {} div:hover::before {} div::after {} div:hover::after {} 주의할것은, div::after:hove..

developer.mozilla.org/en-US/docs/Web/CSS/filter css-tricks.com/almanac/properties/f/filter/ CSS 에는 해당 요소에 먹일수있는 filter 속성이 있다. 이 filter 의 파라미터들은 라이트룸에서 사용하는것과 동일하다고 생각하며 된다. 하나씩 살펴보자. div { filter: blur(50px); } div { filter: brightness(0.5); } brightness 는 0 이 되면 검정색이 되고, 1이 되면 background-color 색이 된다. div { filter: contrast(50%); } contrast 는 사진 보정할때 contrast 를 생각하면 된다. constrast 값 10..

wit.nts-corp.com/2017/06/05/4571

바로 코드를 보자. 원리는 6개의 div 를 만들어서 각 면을 css 로 만들어준다. 이때 사용하는것이 transform 의 rotate 와 translateZ 다. 그 다음 이 6개의 div 를 묶어주는 .cube 란 div 를 transform 으로 다시 회전시킨다. 이때 중요한것은, .cube 안에 transform-style 이 preserve-3d 여야한다. 또한 pespective 속성은 .parent 로 가거나, .cube 에 갈수잇는데, .cube 를 회전시킬것이기때문에, .parent 에 가는게 맞다.

.parent-setting { perspective : 1000px; } .child-setting { animation : flip 1.5s infinite linear normal; } @keyframes flip { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }

CSS 에서 @keyframes 속성을 정의하면 위와 같이 애니메이션을 만들어낼수있다. 이 애니메이션은 css 속성들의 특정한 시간안에 전환 + 반복이다. @keyframes 속성을 활용하는것은 mouse 와 JS 를 통해 연동하기전에, 무언가를 프로토타이핑하기에도 유용하다. @keyframes 를 정의하는 방법은 2가지가 있다. 먼저 시작과 끝을 정하는 방법이다. @keyframes 내가정하는애니메이션명 { from { /* 시작점의 여러 속성 값들 */ } to { /* 끝점의 여러 속성 값들 */ } } 만약 여러 단계의 애니메이션을 가지고싶다면 아래와 같이 정의한다. @keyframes 내가정하는애니메이션명 { 0% { /* 시간의 0% 에서 일어날 일 */ } 50% { /* 시간의 50% 에서..

codepen.io/depy/pen/amoXGB stackoverflow.com/questions/24344859/html5-canvas-create-fading-trail-from-object www.growingwiththeweb.com/2012/10/creating-trail-effect-with-canvas.html

medium.com/@dailyfire/cursor-trails-3-simple-css-tricks-to-add-to-any-website-part-1-64750798583c

css-tricks.com/the-shapes-of-css/ developer.mozilla.org/ko/docs/Web/CSS/::after 1. :before, :after 2. border-left, border-right, border-bottom, border-top 3. transform 4. transform-origin