css를 작성하면서 box-shadow라는 기능이 있어요.
developer.mozilla.org/ko/docs/Web/CSS/box-shadow
box-shadow - CSS: Cascading Style Sheets | MDN
box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산
developer.mozilla.org
* Mdn사이트에서 CSS box-shadow에 대해 자세히 알 수 있어요.
Mdn도 좋지만 이쁘게 디자인된 예시를 골라서 쓸 수 있다면 정말 좋겠죠?
마치 베스킨라빈36 처럼요.
그런 사이트가 실제로 있습니다.
getcssscan.com/css-box-shadow-examples
CSS Scan - The fastest and easiest way to check, copy and edit CSS
Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.
getcssscan.com
위 사이트가 그 사이트인데 정말 괜찮은 box-shadow가 86개가 있어요.
원하는 box-shadow를 클릭하면 저절로 복사가 됩니다.
그리고 기능을 추가 할 곧에 붙여넣기만 하면 끝입니다.
단순히 복사 붙여넣기가 아니라 수정을 해서 사용해도 정말 좋아요.
저도 복붙이 아닌 조금씩 수정하면서 사용하고 있어요.
'IT > HTML,CSS' 카테고리의 다른 글
| input type range 커스터마이징 사이트 (0) | 2021.08.14 |
|---|---|
| CSS Gradient 예시 사이트 (0) | 2021.02.09 |
| HTML부터 CSS까지 코딩 쉽게 배우는 사이트(노마드코더) (0) | 2020.11.15 |
| html, css 필수 프레임워크 Reset.css(기본 설정값 초기화) (0) | 2020.11.12 |
| <meta charset="utf-8"> 의미와 필요성 (2) | 2020.11.11 |