목록비전공자 (249)

비전공자 개발일기

Simple Image Comparison Slider

Crowded Quiet Image Comparison Slider /* -------------------------------- Primary style -------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Roboto Slab", sans-serif; color: #445b7c; background-color: #363636; padding: 1rem .5rem; } a { color: #dc717d; text-decoratio..
JQuery 2022. 6. 4. 00:53
Add To Cart Animation

ADD TO CART ADDED .cart-button { position: relative; padding: 10px; width: 200px; height: 60px; border: 0; outline: none; border-radius: 10px; background-color: #1B6EEE; cursor: pointer; color: #FFF; transition: .3s ease-in-out; overflow: hidden; } .cart-button span { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.2em; color: #FFF; } .cart-but..
HTML _CSS 2022. 6. 3. 00:35
Snow Animation

https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow: hidden; filter: drop-shadow(0 0 10px white); } @function random_range($min, $max) { $rand: random(); $random_range: $min + floor..
HTML _CSS 2022. 6. 2. 01:17
Virtual Keyboard

body { margin: 25px; text-align: center; background: #000; } h1 { color: #26abde; } .virtual-keyboard .row { text-align: center; margin: 0 0 15px; } .virtual-keyboard .row.spacebar input { padding: 10px 150px; } .virtual-keyboard input[type='button'] { padding: 10px 20px; border-radius: 30px; border: 3px solid #202c2b; background: #667ABA; color: #fff; text-transform: uppercase; } .virtual-keybo..
JQuery 2022. 6. 1. 00:02
Create Date Time Day

* { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EFEFEF; } .container .date { font-size: 24px; font-weight: 500; } .container .date#printTime { color: #E74C3C; } .container .date#printDate { color: #2ECC71; margin: 0 20px; } .container .date#printDay { color: #9B59B6; } let date = ..
Javascript 2022. 5. 31. 01:15
CSS Background Animation Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #0C192C; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bubbles { position: relative; display: flex; } .bubbles span { position: relative; width: 30px; height: 30px; background-color: #4FC3DC; margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 10px #4FC3DC44, 0 ..
HTML _CSS 2022. 5. 30. 01:14
RANGE SLIDER

CSS Range Slider JS used for color-change and % label 0 html { height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Work Sans', sans-serif; text-align: center; } html h1, html h2, html h3, html h4, html h5, html h6 { margin: 0; } html h1 { color: #333; font-weight: 500; } html h3 { color: #aaa; font-weight: 500; } html h4 { color: #999; font-weight: 500; } htm..
HTML _CSS 2022. 5. 29. 00:36
Isometric Cards

ROCKET Lorem ipsum dolor sit amet consectetur adipisicing elit. Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Code Lorem ipsum dolor sit amet consectetur adipisicing elit. * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f3f3f3; overflow: hidden; width: 1200px; margin: ..
HTML _CSS 2022. 5. 28. 01:06
이전 Prev 1 ··· 3 4 5 6 7 8 9 ··· 32 Next 다음