목록HTML _CSS (226)

비전공자 개발일기

Password Strength Checker

JavaScript Password Strength Validation Example Password: Show Password
HTML _CSS 2022. 10. 13. 00:45
Eye Follow Mouse Cursor

body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #dab785; } .container { position: relative; cursor: pointer; } .iris { position: absolute; width: 70px; height: 70px; border: 5px solid #333; background-color: #0077b6; border-radius:50%; left:40px; top:30px; } .iris:before { content:""; position: absolute; background-color: #333; border-radius:5..
HTML _CSS 2022. 10. 12. 00:53
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
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
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
Cube Hover

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: #25335B; min-height: 100vh; } .container { position: relative; top: -80px; transform: skewY(-20deg); animation: animate 5s linear infinite; } @keyframes animate { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } } .container .cube { z-index:..
HTML _CSS 2022. 9. 30. 07:22
Responsive Email Subscription Form

Subscribe Us Lorem Ipsum is simply dummy text of the printing and typesetting industry. Let's go @import url('https://fonts.googleapis.com/css?family=Nunito'); :root { --start-color: #0575E6; --end-color: #021B79; --p-color: #929DA6; --button-background: #0575E6; --input-background: #e4eff8; --radius-50: 50px; --padding-15: 15px; } body { margin: 0; padding: 0; height: 100vh; background: var(--s..
HTML _CSS 2022. 9. 28. 00:03
이전 Prev 1 ··· 9 10 11 12 13 14 15 ··· 29 Next 다음