목록Javascript (176)

비전공자 개발일기

Random Color Generator

Welcome to Random Color Generator Click on the HexCode to Copy Generate #967b28 #df9d4f #af704f #97013b #14ae2e * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to right, #967b28 0%, #967b28 20%, #df9d4f 20%, #df9d4f 40%, #af704f 40%, #af704f 60%, #97013b 60%, #97013b 80%, #14ae2e 80%, #14ae2e 100%); } #pallete1, #pallete2, #pallete3,#pallete..
Javascript 2022. 5. 15. 01:02
3D Gallery

* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; perspective: 800px; overflow: hidden; display: grid; place-items: center; background:linear-gradient(#3a4149, #111722); } main { position: relative; transform-style: preserve-3d; width: 50vmin; height: 75vmin; transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } img { width: 100%; height: 100%; object-fit: cover; transit..
Javascript 2022. 5. 14. 00:26
Draggable DIV

DRAG ME body { margin: 0; height: 100vh; background-image: radial-gradient(#e0dada, #dcefb6); font-family: Arial, Helvetica, sans-serif; } .box { position: fixed; top: 35%; left: 40%; background: #eee; box-shadow: #999 0px 8px 20px 0px; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; user-select: none; } (() => { class Box { constructor() { this.box = do..
Javascript 2022. 5. 12. 00:50
Animated Submit BUTTON

SUBMIT body { background: #1d1f20; } main { width: 100vw; height: 100vh; } .button { background: #2b2d2f; width: 200px; height: 80px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; cursor: pointer; border-radius: 4px; } .text { font: bold 1.25rem/1 poppins; color: #71dfbe; position: absolute; top: 50%; transform: translateY(-52%)..
Javascript 2022. 5. 10. 00:59
Lock Animation

body { background-color: #000; height: 100vh; display: flex; justify-content: center; align-items: center; } .lock { position: relative; width: 50px; height: 50px; background-color: #000; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; border: 2px solid #fff; transition: all .8s; cursor: pointer; } .lock::after { position: absolute; conten..
Javascript 2022. 5. 5. 00:28
Alarm Application

ALARM APP Enter the Time : SET STOP :root { --bg-prim: #12181b; --bg-sec: #383838; --clr: #fff; } body { padding: 0; margin: 0; box-sizing: border-box; background-color: var(--bg-prim); } nav { text-align: center; padding: 0 1rem; color: var(--clr); background-color: var(--bg-sec); } .container { margin: 5rem auto; background-color: var(--bg-sec); padding: 1rem; color: var(--clr); display: flex;..
Javascript 2022. 5. 2. 00:12
3D Card

TOKYO body { background-color: #000; } .container { display: flex; justify-content: center; align-items: center; perspective: 500px; } #card { position: relative; width: 250px; height: 350px; margin: 10%; background: url("url") center no-repeat; background-size: cover; border: 2px solid violet; border-radius: 10px; transform-style: preserve-3d; will-change: transform; transition: all .5s ease-ou..
Javascript 2022. 4. 27. 00:37
Circle Loading Tape

RESTART 100% 100% 100% * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #101010; font-family: sans-serif; } .restart { width: 250px; height: 50px; margin: 100px 831px 0; cursor: pointer; } .container { display: flex; max-width: 900px; margin: -260px auto; justify-content: space-around; align-items: center; flex-wrap: wrap; height: 100vh; padding: 20px; } .container .card {..
Javascript 2022. 4. 24. 00:46
이전 Prev 1 ··· 9 10 11 12 13 14 15 ··· 22 Next 다음