목록HTML _CSS (226)

비전공자 개발일기

Infinite Ticker

Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not c..
HTML _CSS 2022. 12. 10. 00:59
3D Flip Product Card

New Apple Watch $500 Buy Now * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #09383E; } .card { width: 300px; height: 400px; background-color: #FFF; transform-style: preserve-3d; transform: perspective(2000px); transition: 1s; box-shadow: inset 300px 0 50px rgba(0, 0,..
HTML _CSS 2022. 12. 5. 00:29
CSS Tricky Shape

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .box { width: 340px; height: 200px; display: flex; } .box .circle { min-width: 200px; height: 200px; border: 25px solid #FFF; border-radius: 50%; } .box .circle:nth-child(1)::before { content: ''; position: absol..
HTML _CSS 2022. 12. 3. 13:54
Input Label Animation

Full Name * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg, #2196F3, #FF4685); } .container { padding: 50px; background-color: #FFF; display: flex; justify-content: center; align-items: center; border-radius: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, ...
HTML _CSS 2022. 11. 28. 11:28
Aspect Ratio Calculator

Aspect Ratio Width: Height: * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #895cf3; } .container { width: 500px; background-color: #ffffff; padding: 80px 40px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 10px; box-shadow: 0 30px 45px rgba(18, 8, 39, 0.2); } h2 { text-align: center; fo..
HTML _CSS 2022. 11. 27. 00:07
Liquid Drop Login page

Sign in Forget Password Sign up * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EFF0F4; } .container { position: relative; left: -80px; display: flex; justify-content: center; align-items: center; } .container .drop { position: relative; width: 350px; height: 350px; box-shadow: inset 20..
HTML _CSS 2022. 11. 26. 12:45
Rotating border

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .conic { position: relative; z-index: 0; width: 400px; height: 300px; margin: 20px; padding: 2rem; border-radius: 10px; overflow: hidden; } .conic::before { content: ""; position: absolute; z-index: -2; top: -50%; left: -50%; width:..
HTML _CSS 2022. 11. 23. 14:06
Postage Stamp Cutout

* { margin: 0; padding: 0; box-sizing: border-box; } :root { --clr: #4FB6FF; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--clr); } .box { position: relative; width: 400px; height: 320px; background: #FFF radial-gradient( var(--clr) 0px, var(--clr) 7px, transparent 0px ); background-size: 20px 20px; background-position: -10px; } ...
HTML _CSS 2022. 11. 22. 11:42
이전 Prev 1 ··· 5 6 7 8 9 10 11 ··· 29 Next 다음