목록javascript (248)

비전공자 개발일기

Floating Menu

*{ margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } body{ background:#311b92; position:relative; } .share{ display:block; width:60px; height:60px; background:#ff9100; position:absolute; top:300px; left:50%; z-index:999; text-align:center; overflow:hidden; line-height:65px; font-size:1.5em; color:#fff; -moz-box-shadow: 0px 3px 9px rgba(0,0,0,.5); -webkit-box-shadow: 0p..
JQuery 2022. 10. 15. 00:25
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
2048 GAME

2048 new game Paused reset continue end 2048 Score: pause Control left up down right You can also use Arrow keys! *{ margin:0; padding:0; box-sizing:border-box; } p{ border-radius:10px; padding:5px; border:2px solid white; background:lightgray; color:black; font-size:18px; text-align: center; } button{ font-family: 'Sniglet', cursive; } body { background: linear-gradient(45deg, rgba(189,245,152,..
Javascript 2022. 10. 11. 00:55
Cat Game

^ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; } .container { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 2rem; } .wrapper { height: 300px; width: 300px; pos..
Javascript 2022. 10. 10. 01:12
Random IP Address Generator

Random IPv4 Generator Range Start End Amount Output Generate Copy Download Page loaded successfuly @import url('https://fonts.googleapis.com/css?family=Kodchasan&display=swap'); ::-moz-selection { color: #ffffff; background: #000000; } ::selection { color: #ffffff; background: #000000; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appear..
JQuery 2022. 10. 9. 00:33
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
이전 Prev 1 ··· 6 7 8 9 10 11 12 ··· 31 Next 다음