CSS

[JavaScript] 눈 내리는 효과 HTML, CSS | 민민의 하드디스크 - 티스토리

2023.05.16

코드펜에서 눈 내리는 효과를 구현한 HTML, CSS 코드 1. CodePen See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen. 위 코드에서는 js가 따로 없고 css로만 구현한 것으로 보인다. 수정 없이도 잘 구현되었지만, 랜덤 색으로 구현된다면 더 이쁠 것 같아서 재미로 약간의 수정을 해보았다. js를 활용하였고, css는 수정하지 않고 html만 수정했다. 수정 내용 - 반복적인 코드 제거 (클린 코딩) - 여러가지(랜덤) 색으로 눈 내리는 효과 1. 반복적인 코드 제거 (클린 코딩) 코드펜에서 보았던 .html 코드 반복이었다. 이 부분은 너무 효율적이지 않다고 생각하여 반복문으로 넣어주었다. (jQuery를 추가) for (va..

Programming/JavaScript

HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리

2023.05.12

CodePen을 보다 귀여운 스타일이나, 가지고 있으면 도움이 될 것 같은 버튼 리스트를 모아봤다. 호불호가 갈릴 수도 있지만 귀여운 스타일 위주이다. 1. Candy Color Button Animation See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 2. Bubbly Button See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen. 3. Magic Card See the Pen Magic Card by Gayane Gasparyan (@gayane-gasparyan) on CodePen. 4. Button hover effects with box..

[JavaScript] 눈 내리는 효과 HTML, CSS | 민민의 하드디스크 - 티스토리

HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리

티스토리툴바