728x90
반응형
📌css-box shadow
box-shadow를 만들면 요소를 감싸는 그림자를 만들 수 있다.
그림자 만들어진 것을 확인할 수 있다.
그렇다면 box 안쪽에 그림자를 주려면 어떻게 해야할까?
box-shadow 속성 맨 앞에 inset을 붙여주면 된다.
그렇다면 그림자 여러개를 겹쳐서 사용하는 것은 어떻게 할까?
, 로 계속해서 그림자를 추가하면 된다.
안쪽그림자와 바깥쪽 그림자를 잘 활용하면 멋진 동그라미를 만들어볼 수 있다.
box-shadow를 활용해 animation을 적용시킨 모습이다. 정말 이쁘다 ㅠㅠ
https://html-css-js.com/css/generator/box-shadow/
Box Shadow CSS Generator
Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview
html-css-js.com
box-shadow를 편리하게 사용할 수 있는 웹 사이트이다.
참고자료
유투버 별코딩님 자료를 참고하였습니다.
728x90
반응형
'Frontend > CSS' 카테고리의 다른 글
| css - filter (0) | 2023.05.01 |
|---|---|
| css - 선택자 nth-child (0) | 2023.04.24 |
| css - 레이아웃 grid (0) | 2023.04.22 |
| html - img VS css - background (0) | 2023.04.21 |
| css - transform(외 변형 함수들), transtion (2) | 2023.04.15 |
