목록HTML _CSS (226)

비전공자 개발일기

Sliding Card UI Design

Someone Famous Hero I'm IRONMAN * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .card { position: relative; width: 350px; height: 85px; background-color: #F00; border-radius: 20px; filter: drop-shadow(-20px 20px 40px #398CC055); transition: .5s ease-in-out; } .card.active { height: 420px; } .card.active..
HTML _CSS 2022. 6. 19. 00:54
Scroll Animation

Scroll to see the animation Content Content Content Content Content Content Content Content Content Content * { box-sizing: border-box; } body { background-color: #EFEDD6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: #9535F0; color: #FFF; display: flex; align-items: center; just..
HTML _CSS 2022. 6. 17. 00:46
Mobile Battery percentage Check

Your battery Perctenage is I am Daily Make new content For You ,hope you like this post body { margin: 1rem; padding: 2rem; background-color: #eee; } .battry { font-size: 2rem; color: cornflowerblue; } const BattryLevel = document.querySelector(".battry"); navigator.getBattery().then(function (battery) { const level = battery.level; const status = level * 100 + "%"; BattryLevel.innerHTML = statu..
HTML _CSS 2022. 6. 16. 00:31
CSS Input Text Field Animation

First Name Last Name * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; gap: 30px; background-color: #1D2B3A; } .inputBox { position: relative; width: 250px; } .inputBox input { width: 100%; padding: 10px; border: 1px solid rgba(255, 255, 255, .25); background-color: #1D2B3A; border-r..
HTML _CSS 2022. 6. 14. 00:22
Reavl Text Animation

You're Awesome! * { background-color: #333; } h1 { width: 30%; margin: 25% 0; } .title span { --total: calc(var(--duration) + var(--delay)); position: relative; display: block; color: transparent; overflow: hidden; animation: revealText 1s var(--total) forwards; } .title span::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(0); transform-ori..
HTML _CSS 2022. 6. 13. 00:18
Emoji Animation

.face { width: 100px; height: 100px; border-radius: 50%; background-color: #D8C557; box-shadow: inset -3px 0 0 4px rgba(255, 102, 0, .15); position: relative; } .eye { width: 30px; height: 30px; background-color: #FFF; border-radius: 50%; position: absolute; top: 32px; left: 12px; } .eye:last-child { left: auto; right: 12px; } .eye::after { content: ""; width: 12px; height: 12px; background-colo..
HTML _CSS 2022. 6. 12. 00:50
Heartbeat Loading Animation

body { height: 100vh; background-color: #151515; display: grid; place-items: center; box-sizing: border-box; } .heart-loader { background-color: #F44336; width: 50px; height: 50px; position: relative; transform: rotate(45deg); animation: pulsate 1s infinite; } .heart-loader::before, .heart-loader::after { position: absolute; content: ""; display: inline-block; width: 50px; height: 50px; backgrou..
HTML _CSS 2022. 6. 11. 02:02
Lamp On Off Animation

body { background-color: #2598EB; } .lamp-item { position: absolute; left: 0; right: 0; margin: 0 auto; } .lamp-top { background-color: #2D2D2D; width: 10px; height: 100px; top: 0; } .lamp-middle { background-color: #2D2D2D; border-radius: 50px 50px 0 0; width: 50px; height: 30px; top: 100px; } .lamp-bottom { background-color: #2D2D2D; border-radius: 100px 100px 0 0; width: 150px; height: 80px; ..
HTML _CSS 2022. 6. 9. 00:06
이전 Prev 1 ··· 18 19 20 21 22 23 24 ··· 29 Next 다음