목록css3 (310)

비전공자 개발일기

Hover Menu Text

Home Blogs Coding Skills Extras Contact * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #DCD9CD; } ul li { list-style: none; text-align: center; } ul li a { color: #333; text-decoration: none; font-size: 3em; font-weight: 700; padding: 5px 20px; disp..
HTML _CSS 2022. 10. 8. 00:54
Color Switch Animated Login Form

Login Forgot Password Sign up * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #1DD1A1; transition: .5s; } .login { padding: 50px; background-color: #FFF; width: 400px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 25px 50px rgba(0, 0, 0, .1); } .logi..
Javascript 2022. 10. 7. 00:32
OTP INPUT

Enter the code generated on your mobile device below to log in! @import url('https://fonts.googleapis.com/css?family=Raleway:200'); body, html { height: 100%; margin: 0; font-family: 'Raleway', sans-serif; font-weight: 200; } body { background-color: #0f0f1a; display: flex; align-items: center; justify-content: center; flex-direction: column; } .digit-group input { width: 30px; height: 50px; bac..
Javascript 2022. 10. 6. 00:33
3D Image Carousel

* { margin: 0; padding: 0; } html, body { height: 100%; /* for touch screen */ touch-action: none; } body { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; background: #111; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #drag-container, #spin-container { position: relative; display: -webkit-box..
Javascript 2022. 10. 5. 00:47
Page Flip

tap the image to flip :root { --duration: 500ms; --ease-in: cubic-bezier(0.85, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); --ease-in-out: ease-in-out; --image-current: url(https://images.unsplash.com/photo-1630847911146-edd8828abf14?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjQ0Ng&ixlib=rb-1.2.1&q=85); --image-next: url(https://images.unsplash.com/photo-1..
HTML _CSS 2022. 10. 4. 00:53
Toast MSG

Submit Delete Agree to Terms *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, sans-serif; } /* Prep code */ .container { display: flex; gap: 2rem; flex-wrap: wrap; place-content: center; justify-content: center; min-height: 100vh; background-color: #fffffe; } button { font: inherit; border: none; background-color: white; font-size: 2.5rem; padding: ..
Javascript 2022. 10. 3. 00:07
Animated Radial Menu

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2F363E; } .menu { width: 280px; height: 280px; display: flex; justify-content: center; align-items: center; } .menu li { position: absolute; left: 0; list-style: none; transition: .5s; transition-delay: calc(.1s * var(-..
HTML _CSS 2022. 10. 2. 00:28
Image Check

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; } ul { list-style-type: none; } li { display: inline-block; } input[type="checkbox"][id^="myCheckbox"] { display: none; } label { border: 1px solid #fff; padding: 10px; display: block; position: relative; margin: 10px; cursor: pointer..
HTML _CSS 2022. 10. 1. 20:30
이전 Prev 1 ··· 15 16 17 18 19 20 21 ··· 39 Next 다음