목록box-shadow (5)

비전공자 개발일기

Box Shadow Generator

Horizontal Shadow: Vertical Shadow: Blur Radius: Spread Radius: Shadow Color: Shadow Color Opacity: Inset Shadow: Copy * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #0075ff; } .container { background-color: #ffffff; padding: 30px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 80vmin; border-ra..
Javascript 2023. 1. 16. 01:25
Liquid Drop Login page

Sign in Forget Password Sign up * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EFF0F4; } .container { position: relative; left: -80px; display: flex; justify-content: center; align-items: center; } .container .drop { position: relative; width: 350px; height: 350px; box-shadow: inset 20..
HTML _CSS 2022. 11. 26. 12:45
Plus Neon BTN

Button Button Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #27282C; } .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 120px; } .container a { position: relative; padding: 16px 30px; font-size: 1.5em; color: var(--clr); text-shadow..
HTML _CSS 2022. 11. 21. 00:05
BG CSS Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #001F25; } .loader { position: relative; width: 300px; height: 300px; } .loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(36deg * var(--i))); } .loader span::before { con..
HTML _CSS 2022. 11. 17. 16:58
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
이전 Prev 1 Next 다음