목록CSS (62)

비전공자 개발일기

Water Drop Card

01 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 02 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 03 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-c..
HTML _CSS 2022. 11. 18. 00:31
CSS Animated Swipe

Swipe Next * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #28272A; } .btn { position: relative; width: 200px; height: 60px; background-color: rgba(255, 255, 255, .1); border-radius: 60px; display: flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, .1); text-d..
HTML _CSS 2022. 8. 31. 00:17
Word Guess Game

Guess the Word Hint: Remaining guesses: Wrong letters: Reset Game /* Import Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; padding: 0 10px; min-height: 100vh; align-items: center; justify-content: center; backgroun..
Javascript 2022. 8. 12. 00:57
Magic LIne Icon Hover Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { text-align: center; } ul { position: relative; display: flex; gap: 40px; } ul li { position: relative; list-style: none; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #FFF; box-shadow: 0 15px 35p..
HTML _CSS 2022. 7. 26. 00:33
CSS Focus

F O C U S * { margin: 0; padding: 0; box-sizing: border-box; /* font-family: monospace; */ } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg, #FF0057, #2196F3); } h2 { position: relative; display: flex; gap: 5px; color: #FFF; font-size: 4em; cursor: pointer; } h2 span { position: relative; filter: blur(5px); padding: 0 5px;..
HTML _CSS 2022. 7. 14. 00:58
CSS Background Animation Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #0C192C; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bubbles { position: relative; display: flex; } .bubbles span { position: relative; width: 30px; height: 30px; background-color: #4FC3DC; margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 10px #4FC3DC44, 0 ..
HTML _CSS 2022. 5. 30. 01:14
filter() Animation

.blob { width: 150px; height: 150px; animation: hue-animation 5s alternate infinite; } @keyframes hue-animation { 100% { filter: hue-rotate(360deg); } }
HTML _CSS 2022. 4. 16. 00:22
Card Animation

K * { margin: 100px auto; } .card { background: #5ce1e6; font-size: 50px; width: 100px; height: 100px; border-radius: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 7px 0 rgb(211,247,248), 0 6px 15px 0 rgb(189, 243, 245); animation: rotate 5s cubic-bezier(.54, .13, .30, .87) } @keyframes rotate { 0% {transform: rotateY(0turn)} 100% {transform: rotateY(10turn)..
HTML _CSS 2022. 4. 15. 00:35
이전 Prev 1 2 3 4 5 6 7 8 Next 다음