목록css3 (310)

비전공자 개발일기

Multi Colored Text

Avengers ENDGAME * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-1: #186CB8; --color-2: #2A9A9F; --color-3: #F1B211; --color-4: #E83611; --color-5: #F9002F; } .wrapper { background-color: #000; line-height: 1; display: grid; place-items: center; min-height: calc(100vh - 16px); } h1 { font-size: 10vw; font-weight: 900; width: --webkit-min-content; width: --moz-min-content; wi..
HTML _CSS 2023. 1. 10. 00:24
Mail Button Micro-Interaction

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .wrapper { width: 200px; height: 200px; cursor: pointer; } .animated-mail { position: absolute; width: 200px; height: 150px; transition: .4s; } .animated-mail .body { position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 100px 200px; border-color: ..
HTML _CSS 2023. 1. 9. 08:01
Ring Of Fire

* { margin: 0; padding: 0; box-sizing: border-box; position: relative ; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .circle { width: 600px; height: 600px; filter: url(#wavy) blur(1px); } .circle::before { content: ''; position: absolute; top: 100px; left: 100px; right: 100px; bottom: 100px; border: 20px solid #FFF; border-rad..
HTML _CSS 2023. 1. 8. 00:51
Animated Progress Bar

:root { --bar-color1: #1FE576; --bar-color2: #D7E5DE; --bar-width: 200px; --bar-height: 20px; --anim-duration: 3s; } body { background-color: #B0B0B0; display: flex; justify-content: center; align-items: center; } .progress-bar { position: relative; margin-top: 25%; width: var(--bar-width); height: var(--bar-height); border-radius: calc(var(--bar-height) / 2); overflow: hidden; background-color:..
HTML _CSS 2023. 1. 7. 00:24
Foggy Rain Animation

It's Rainning body{ min-height: 100vh; font: 150%/1.1 'Gaegu', cursive; padding-top: calc(50vh - 4em); } body, .foggy, .container:before{ background: url('https://cdn.pixabay.com/photo/2015/09/09/21/31/rain-933490_960_720.jpg') 0 / cover fixed; } .container{ position: relative; margin: 0 auto; padding: 2em; max-width: 24em; background: hsla(0, 0%, 100%, 0.2) border-box; border-radius: 0.5em; box..
HTML _CSS 2023. 1. 6. 08:45
Dynamic Calendar

https://github.com/yusufshakeel/dyCalendarJS GitHub - yusufshakeel/dyCalendarJS: This is a JavaScript library to create Calendar. You can use it in your blog and website. This is a JavaScript library to create Calendar. You can use it in your blog and website. - GitHub - yusufshakeel/dyCalendarJS: This is a JavaScript library to create Calendar. You can use it in yo... github.com * { margin: 0; ..
HTML _CSS 2023. 1. 5. 08:09
Search Bar With Autocomplete

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: #BB2429; padding: 0 20px; } ::selection{ color: #fff; background: #BB2426; } .wrapper{ max-width: 450px; margin: 150px auto; } .wrapper .search-input{ background: #fff; width: 100%; bor..
Javascript 2023. 1. 4. 20:55
3D Happy New Year

Happy New Year 2023 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; } .box { height: 200px; transform-style: preserve-3d; animation: animate 16s linear infinite; } @keyframes animate { 0% { transform: rotateX(-20deg) rotateY(360deg); } 100% { transform: rotateX(..
HTML _CSS 2023. 1. 3. 00:59
이전 Prev 1 ··· 4 5 6 7 8 9 10 ··· 39 Next 다음