목록css3 (310)

비전공자 개발일기

Multi-Step Form

Account Setup Social Profiles Personal Details Create your account This is step 1 Social Profiles Your presence on the social network Personal Details We will never sell it /*custom font*/ @import url(https://fonts.googleapis.com/css?family=Montserrat); /*basic reset*/ * {margin: 0; padding: 0;} html { height: 100%; /*Image only BG fallback*/ /*background = gradient + image pattern combo*/ backg..
JQuery 2022. 8. 18. 23:51
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
CSS & JS Bubble Effect

Happy Birth Day * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; background-color: #2598EB; } h2 { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width: 100%; font-size: 12vw; line-height: 1em; font-weight: 800; color: #667ABA; text-transform: uppercase; z-index: 3; } i { position: absolute; display: block; background-co..
Javascript 2022. 8. 14. 23:03
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
이전 Prev 1 ··· 21 22 23 24 25 26 27 ··· 39 Next 다음