목록css3 (310)

비전공자 개발일기

Halloween Banner

H a l l o w e e n @import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Fruktur', cursive; } section { position: absolute; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #0b061f; } .spider { position: absolute; top: 0; animation: animate..
HTML _CSS 2022. 11. 1. 10:27
Captcha validation

Slider Captcha Please complete security verification! @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap'); button:focus, input:focus{ outline: none; box-shadow: none; } a, a:hover{ text-decoration: none; } body{ font-family: 'Roboto', sans-serif; } /*----------------------*/ .block { position: absolute; left: 0; top: 0; } .slidercaptcha { margin: 0 ..
Javascript 2022. 10. 31. 00:06
Credit card

CREDITCARD debit 0000 0021 4748 3647 Valid thru 01/38 Anki(CWR) Mastercard * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 san..
HTML _CSS 2022. 10. 30. 18:07
Parallax Tilt Effect Cards

Parallax Tilt Effect Cards Hover over the cards. 01. Normal 02. Reverse 03. Normal *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { --background-color: hsl(180, 20%, 90%); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; min-height: 100vh; padding: 2..
Javascript 2022. 10. 29. 00:11
3D Neon Cube

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: #222; min-height: 100vh; } .cube { position: absolute; width: 300px; height: 300px; } .cube div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); animation: animate 6s li..
HTML _CSS 2022. 10. 28. 00:21
Unfold CSS Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2F364F; } .box { width: 640px; height: 360px; display: flex; transform: rotate(-25deg) skew(25deg); transition: .5s; } .box:hover { transform: rotate(-25deg) skew(-25deg) translateY(-20px); } .box span { width: 25%; height: 100%; backgroun..
HTML _CSS 2022. 10. 27. 00:12
SOLAR Eclipse

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; height: 50vh; display: grid; place-items: center; } .circle { width: 200px; height: 200px; border-radius: 50%; background-color: #FF9540; position: relative; box-shadow: 0 0 10px #FF4500, 0 0 40px #FF4500, 0 0 80px #FF4500; } .circle::before { content: ""; position: absolute; width: 200px; height: 200px; border-r..
HTML _CSS 2022. 10. 26. 00:57
Abstract BG Generator with anime.js

Generate * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #202020; overflow: hidden; } .container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } button { position: relative; z-index: 1; margin: 10px; border: none; outline: n..
HTML _CSS 2022. 10. 25. 00:22
이전 Prev 1 ··· 12 13 14 15 16 17 18 ··· 39 Next 다음