목록html5 (313)

비전공자 개발일기

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
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
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
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
Animated Skills bar

Animated Skills Bar HTML CSS Java Script Swift @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html,body{ display: grid; height: 100%; place-items: center; background-color: lightgray; } h1{ font-size: 4rem; text-align: center; color: #fff; text-shado..
HTML _CSS 2022. 9. 26. 00:52
Text Animation & BG

Wish u a happy T okyo D aeg u * { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif; } h3 { font-size: 1.5em; text-transform: uppercase; letter-spacing: 3px; font-weight: 300; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } h1 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: ..
HTML _CSS 2022. 9. 25. 09:34
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 ··· 16 17 18 19 20 21 22 ··· 40 Next 다음