목록CSS (62)

비전공자 개발일기

Toolbar Motion

:root { --primary-color:#0D6FFA; --accent-color:#49CE95; --danger-color:#EC3582; --fore-color:rgba(0,0,0,0.65); --main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12); } body { background-color:#9664A5; } .sc-bottom-bar { position:absolute; display:flex; padding: 16px 36px; justify-content:space-between; width:375px; margin:auto; top:0; left:0; bottom:0; right:0; h..
HTML _CSS 2023. 2. 19. 19:16
Landscape Design

* { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; background-color: #0A4B78; display: flex; justify-content: center; align-items: center; } .container { width: 367px; height: 500px; position: relative; background: linear-gradient(to bottom, #01263A 0%, #4F94D4 70%, #C5d9ED 100%); box-shadow: 0 10px 20px rgba(0, 0, 0, .3), 0 10px 10px rgba(0, 0, 0, .3); border-radius: 80p..
HTML _CSS 2023. 2. 18. 19:31
Cool Text Style

Code body { background-color: #DC143C; } span { font-size: 7rem; letter-spacing: .5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 7px 7px #FFA500, 18px 18px #000; }
HTML _CSS 2023. 2. 16. 00:24
Confetti Text Effect

OLLEH!!! body { height: 100vh; display: grid; place-items: center; font-family: "bebas", sans-serif; background-color: #000; } .particletext { text-align: center; font-size: 48px; position: relative; color: #fff; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti..
HTML _CSS 2023. 2. 9. 23:17
Bouncing Ball

body { background-color: #333; } .wrapper { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 23rem; background-color: #333; overflow: hidden; } .wrapper::before { background-color: #FFF; content: ""; position: absolute; border-radius: 1rem; height: 0.15rem; left: 2rem; right: 2rem; bottom: 2rem; } .wrapper .ball { background-color: #FFF; borde..
HTML _CSS 2023. 2. 7. 00:20
Pulse effect on button hover

Hover me *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: grid; place-items: center; background: #151515; } .btn { font-family: sans-serif; font-weight: 700; background-color: #FFF; color: #151515; } .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 15px 40px; display: inline-block; border-radius: 100p..
HTML _CSS 2023. 2. 6. 19:17
Shine effect on hover

Hover to Shine *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: grid; place-items: center; background: #121314; font-family: serif; } .btn { font-size: 1.5rem; padding: 1rem 3rem; color: #F4F4F4; text-transform: uppercase; text-decoration: none; border: 1px solid rgb(146, 148, 248); position: relative; overflow: hidden; } .btn:hover { b..
HTML _CSS 2023. 2. 1. 00:10
Rainbow Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(#222, #000); } .loader-inner { width: 100px; height: 60px; margin: auto; position: absolute; inset: 0; } .loader-line-wrap { animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; width: 100px; height: 50px; left..
HTML _CSS 2023. 1. 29. 00:48
이전 Prev 1 2 3 4 5 ··· 8 Next 다음