목록HTML _CSS (226)

비전공자 개발일기

CSS Simple Animation

RED BUTTON YELLOW BUTTON GREEN BUTTON BLUE BUTTON ul li { font-size: 16px; font-weight: 600; display: block; text-align: center; cursor: pointer; border-radius: 15px; padding: 5px 0; margin: 10px 0; transition: all .5s ease-in; } .btn-red { border: 2px solid #F0514E; color: #F0514E; } .btn-red:hover { box-shadow: #F0514E 100px 0 0 2px inset; } .btn-yellow { border: 2px solid #F5E234; color: #F5E..
HTML _CSS 2022. 6. 8. 00:56
GROWING LEON APPLE ICON

.logo { font-size: 8rem; text-shadow: 0 0 100px; animation: animate 2s infinite linear; margin:25% 50%; } @keyframes animate { 0%, 100% { color: lawngreen; } 25% { color: deeppink; } 50% { color: deepskyblue; } 75% { color: white; } }
HTML _CSS 2022. 6. 6. 00:52
To Do List by Pure CSS

My Special To Do List Make awesome CSS Animation Go to Gym Make a iOS Application Swift, React Native, Next.js, Node.js body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1A1E23; } .todo-list { display: flex; flex-direction: column; padding: 0 75px 10px 30px; background-color: #162740; border: transparent; } .todo-list .todo-list-title { padding..
HTML _CSS 2022. 6. 5. 00:07
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
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 ··· 19 20 21 22 23 24 25 ··· 29 Next 다음