일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- ipad
- iPhone
- 비전공자
- Animation
- jQuery
- HTML
- 프론트엔드
- CSS
- hover
- 자바스크립트
- xcode
- image
- 애니메이션
- 비전공 개발자
- iOS 개발자
- MAC
- css3
- 개발자
- SWIFT
- IOS
- html5
- keyframes
- 풀스택
- php
- effect
- button
- 백엔드
- front-end
- javascript
- react
- Today
- Total
목록box-shadow (5)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dUdyLu/btrWhtY4vpB/3kak3jg1OVwmbh4EeJkH40/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qIMnH/btrR8tKHDxt/UqWHJNySPgoQBnViZ93i2K/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b53WM9/btrRC0BuPMn/UGQp7pYbYRCzKFUdyxBKZ1/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bropCH/btrRo4kDDpa/6EkfiMh51pKjTgImkC6XKk/img.png)
* { 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bI6TZd/btrD4WeETtZ/f5SeQSMd36qcCCvOCrRCT0/img.jpg)
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..