목록css3 (310)

비전공자 개발일기

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
Nine Dots Menu

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #10131c; } .navigation { position: relative; width: 70px; height: 70px; background: #212532; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: .5s; transition-delay: .8s; } .navigation...
HTML _CSS 2022. 5. 11. 00:42
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
3D BUTTON

Hover On Me *, *:after, *:before{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ font-size:100%; padding:100px; margin:0; height:100%; } body{ font-family:Arial, sans-serif; background:#000; } .container{ height:100%; position:relative; perspective:800px; } /* General button styles */ .btn{ border:none; position:relative; background:none; padding:30px 8..
HTML _CSS 2022. 5. 9. 00:33
Read More & Read Less Button

TITLE Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ullam nemo officiis ipsam laborum quos unde maxime dolore, voluptates eveniet laboriosam consequuntur nesciunt voluptatum rem recusandae id iure, aliquam atque. Cum possimus odit nobis quas quasi sunt, nemo dolorum excepturi labore error aut hic. Ratione quod id ipsum. Ipsam magnam animi tempora eligendi nihil eum. Nisi dolor..
JQuery 2022. 5. 8. 01:38
Floating Text

WARRIOS WARRIOS body { display: flex; background: #000; min-height: 97vh; align-items: center; justify-content: center; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .content { position: relative; } .content h2 { color: #fff; font-size: 8em; position: absolute; letter-spacing: 5px; transform: translate(-50%, -50%); } .co..
HTML _CSS 2022. 5. 7. 00:09
Instagram Notification Animation

4 100 30 .notification-wrapper { width: fit-content; text-align: center; } .heart-icon { font-size: 20px; position: relative; } .heart-icon::after { content: " "; position: absolute; inset: 0 0 auto auto; width: 5px; height: 5px; background-color: #5f49ec; border: 2px solid #151515; border-radius: 50%; opacity: 0; transform: scale(0); transition: transform .5s linear, opacity .5s; } .notificatio..
HTML _CSS 2022. 5. 6. 00:24
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
이전 Prev 1 ··· 33 34 35 36 37 38 39 Next 다음