목록HTML _CSS (226)

비전공자 개발일기

Emotion Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 100vh; background-color: #EDF8FF; } .box { position: relative; width: 400px; height: 500px; background-color: #FFF; margin: 40px; box-shadow: 25px 25px 0 rgba(0, 0, 0, .05); } .bottom { position: absolute; bottom: 0; left: 50%; transform: translate..
HTML _CSS 2022. 9. 1. 21:09
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
Checkbox Custom

OFF ON * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(#555, #292929); } label { position: relative; width: 300px; height: 150px; background-color: #3E3E3E; box-shadow: 0 0 0 4px #303030; border-radius: 75px; cursor: pointer; display: flex; justify-content: center; align-items:..
HTML _CSS 2022. 8. 30. 00:15
Lock Mobile Screen Shot

Swift + UI = @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Oswald:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Oswald', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EEE; gap: 30px; } span { font-size: 3em; } .drop { position:..
HTML _CSS 2022. 8. 29. 00:25
Lamp Animation

body { background: rgb(0, 49, 20); background: radial-gradient(circle, rgba(0, 49, 20, 1) 10%, rgba(0, 16, 8, 1) 25%, rgba(0, 0, 0, 1) 100%); margin: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; } .lamp { height: 23rem; width: 12rem; position: relative; background: rgb(36, 154, 97); background: linear-gradient(90deg, rgba(36..
HTML _CSS 2022. 8. 27. 23:09
3D Animated Stairs

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(#EAC4FF, #9E57C5); overflow: hidden; } .stairs { position: relative; width: 500px; height: 300px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(250deg) ; animation: animate 10s linear infinite; } @keyframes anim..
HTML _CSS 2022. 8. 23. 00:47
QR Code Scanning

QR Code Scanning... * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .scan { position: relative; display: flex; align-items: center; flex-direction: column; } .scan .qrcode { position: relative; width: 400px; height: 400px; background: url(QR_Code01.png); background-size: 400px; }..
HTML _CSS 2022. 8. 22. 00:50
Responsive Pricing Table

₹ 00 One Selected Template 100% Responsive Design Credit Remove Permission Lifetime Template Updates Purchase ₹ 49 Five Existing Template 100% Responsive Design Credit Remove Permission Lifetime Template Updates Purchase ₹ 99 All Existing Template 100% Responsive Design Credit Remove Permission Lifetime Template Updates Purchase *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: ..
HTML _CSS 2022. 8. 20. 22:09
이전 Prev 1 ··· 12 13 14 15 16 17 18 ··· 29 Next 다음