목록Javascript (176)

비전공자 개발일기

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
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
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
Dino Game

* { padding: 0; margin: 0; } .game { width: 600px; height: 200px; border: 1px solid #000000; margin: auto; } #dino { width: 70px; height: 70px; background-image: url(t-rex.png); background-size: auto 70px; position: relative; top: 143px; } .jump { animation: jump 0.3s linear; } @keyframes jump { 0% { top: 143px; /*distance from the top of the parent element*/ } 30% { top: 115px; } 50% { top: 70p..
Javascript 2022. 9. 29. 00:59
Stopwatch

00 : 00 : 00 : 00 Your time starts now Stop * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Roboto; font-weight: 300; background: linear-gradient(to left, #635bfc, #8ffcf0); display: flex; justify-content: center; align-items: center; height: 100vh; } .container { width: 800px; margin: 150px auto; color: #ffffff; text-align: centre; } .wrap { display: inline-block; min-w..
Javascript 2022. 9. 27. 00:22
Image Color Picker

Open Color Picker const imgInput = document.querySelector('#img-select') const imgPreview = document.querySelector('.preview') if(!window.EyeDropper){ alert("Your browser does not support this feature") } const eyeDropper = new EyeDropper() const pickerBtn = document.querySelector('.open-picker') const result = document.querySelector('.res') imgInput.addEventListener('change', function() { const..
Javascript 2022. 9. 24. 18:37
이전 Prev 1 ··· 4 5 6 7 8 9 10 ··· 22 Next 다음