목록HTML _CSS (226)

비전공자 개발일기

Magic LIne Icon Hover Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { text-align: center; } ul { position: relative; display: flex; gap: 40px; } ul li { position: relative; list-style: none; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #FFF; box-shadow: 0 15px 35p..
HTML _CSS 2022. 7. 26. 00:33
Ambient Light Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #050505; } .cube { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-30deg); animation: animate 4s linear infinite; } @keyframes animate { 0% { transform: rotateX(-30deg) rotateY(0deg); } 100..
HTML _CSS 2022. 7. 25. 00:22
Flight Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #667ABA; } .loader { position: relative; width: 120px; height: 120px; } .loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); } .loader span::before { content: ''; position..
HTML _CSS 2022. 7. 24. 00:51
Modern CSS Button Glowing Effect

Button Button Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; gap: 40px; background-color: #27282C; } a { position: relative; background-color: #444; color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 1.5em; letter-spacing: .1em; font-weight: 400; padd..
HTML _CSS 2022. 7. 23. 09:32
Rotating 3D Image Cube

* { background-color: #2598EB; } .wrapper { --imagesize: 300px; --transform: calc(var(--imagesize) / 2); perspective: 800px; } .wrapper:hover { transform: scale(1.5); } .cube { transform-style: preserve-3d; position: relative; width: var(--imagesize); height: var(--imagesize); animation: rotate 10s ease-in-out infinite; transform-origin: center center; margin: 250px auto; } .side { position: abs..
HTML _CSS 2022. 7. 22. 00:10
Raniy Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #181C1F; } .container { position: relative; height: 400px; border-bottom: 2px solid #FFF; } .cloud { position: relative; top: 50px; width: 320px; height: 100px; background-color: #FFF; border-radius: 100px; } .cloud::before { content: ""; p..
HTML _CSS 2022. 7. 21. 00:25
Animated Login Form

Login Form Email Show Password Password Forgot password? html, body { align-items: center; background: #f2f4f8; border: 0; display: flex; font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; justify-content: center; margin: 0; padding: 0; } form { --background: white; --border: rgba(0, 0, 0, 0.125); --borderDark: rgba(0, 0, 0, 0.25); --borderDarker: rgba(0, 0, 0, 0.5); --bgC..
HTML _CSS 2022. 7. 20. 00:13
Mordern Sidebar Menu

Menu My drive Computers Shared with me Starred Trash aside { color: #fff; width: 250px; padding-left: 20px; height: 100vh; background-image: linear-gradient(30deg, #0048bd, #44a7fd); border-top-right-radius: 80px; } aside a { font-size: 12px; color: #fff; display: block; padding: 12px; padding-left: 30px; text-decoration: none; -webkit-tap-highlight-color: transparent; } aside a:hover { color: #..
HTML _CSS 2022. 7. 19. 00:14
이전 Prev 1 ··· 15 16 17 18 19 20 21 ··· 29 Next 다음