목록HTML _CSS (226)

비전공자 개발일기

Navigation Tabs Menu Design

Home Profile Message Photos Settings * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2F363E; } .navigation { position: relative; width: 540px; height: 120px; /* background-color: #FFF; */ box-shadow: 25px 25px 75px rgba(0, 0, 0, .25), 10px 10px 70px rgba(0, 0, 0, .25), inset 5px 5px 10p..
HTML _CSS 2022. 8. 19. 00:22
Glowing Ring Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .container { position: relative; width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005); } .container .loader { position..
HTML _CSS 2022. 8. 17. 00:32
Glowing Checkbox UI

* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #18191F; } ul { position: relative; display: flex; } ul li label { position: relative; } ul li label input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; } ul li label .icon { position: relative; width..
HTML _CSS 2022. 8. 16. 01:04
Shooting Star Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; } section { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: url(bg2.jpg); background-position-x: center; background-size: cover; animation: animateBg 50s linear infinite; } @keyframes animateBg { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } span { position: absolute; t..
HTML _CSS 2022. 8. 15. 00:33
Fingerprint Scanner Animation

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; flex-direction: column; align-items: center; } .scan .fingerprint { position: relative; width: 300px; height: 380px; background: url(fingerPrint_01.png); background-size: 300px;..
HTML _CSS 2022. 8. 13. 00:43
Responsive Vertical Timeline

Start When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it! 01 John Doe When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. 02 John Doe 18 APR When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Manki..
HTML _CSS 2022. 8. 11. 00:19
Simple Countdown

Click 👇 to start/pause the timer @property --n { syntax: ""; inherits: true; initial-value: 0; } @property --t { syntax: ""; inherits: true; initial-value: #000; } @property --r { syntax: ""; inherits: true; initial-value: #000; } @property --b { syntax: ""; inherits: true; initial-value: #000; } @property --l { syntax: ""; inherits: true; initial-value: #000; } .d { width: 77px; /* size */ disp..
HTML _CSS 2022. 8. 10. 00:27
404 Error Page

404 Look like you're lost the page you are looking for not avaible! Go to Home /*====================== 404 page =======================*/ .page_404 { padding: 40px 0; background: #fff; font-family: "Arvo", serif; } .page_404 img { width: 100%; } .four_zero_four_bg { background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif); height: 400px; background-positio..
HTML _CSS 2022. 8. 9. 00:50
이전 Prev 1 ··· 13 14 15 16 17 18 19 ··· 29 Next 다음