목록Programming (564)

비전공자 개발일기

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
Image Animation Sequence

.scene { width: 230px; height: 200px; position: relative; overflow: hidden; background-color: #2598eb; } .scene img { position: absolute; } .city { width: 100%; height: 50%; bottom: -3px; object-fit: cover; } .plane { width: 45%; top: 50px; left: -50px; animation: plane-move 15s linear forwards; } .cloud { animation: clouds-move 22s linear forwards; } .cloud-1 { width: 70px; top: 0; left: 30px; ..
HTML _CSS 2022. 5. 13. 01:07
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
이전 Prev 1 ··· 43 44 45 46 47 48 49 ··· 71 Next 다음