고정 헤더 영역
상세 컨텐츠
본문
출처 : 따라하면서 배우는 HTML5+CSS3+jQuery+JavaScript 실무활용 14가지, 위키북스
> 이전 관련 글
그림자 효과 적용한 배너 만드는 순서와 방법
- 배너 만든다
- 배너와 다른 모양의 그림자를 넣기 위해 가상 선택자를 추가한다
- border-radius 속성을 사용해 가상 선택자를 원하는 모양으로 만든다
- 위에서 만든 가상 선택자에 box-shadow 속성으로 그림자 입힌다. 가상 선택자의 모양대로 그림자가 적용되므로 그림자 자체도 아야한 모양을 가지게 된다.
- 그림자 방향 설정하기 위해 가상 선택자에 tansform 속성 추가
box-shadow의 기본 문법 및 속성
box-shadow: h-shadow v-shadow blur spread color | inset | initial | inherit;| 속성 | 설명 |
| h-shadow (필수) | 그림자의 수평거리(입력한 만큼 떨어져 위치). 양수일 경우 음수 양수 모두 가능 |
| v-shadow (필수) | 그림자의 수직 거리(입력한 만큼 떨어져 위치). 양수일 경우 아래쪽, 음수일 경우 위쪽에 그림자 생성 |
| blur | 그림자 경계의 흐림 정도(값이 커질 수록 흐려진다) |
| spread | 그림자 확장거리. 양수면 확장, 음수면 축소. |
| color | 그림자 색상(16진수, rgba, hsla -- 투명도 조절 가능) |
| inset | 내부그림자(inner-shadow와 동일) 적용 |
| inherit | 부모 요소의 값을 상속받는다. |
| initial | 기본값으로 설정한다. |
| none | 그림자 효과를 없앤다. |
<!document html>
<html>
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
.shadow01{
width:140px;
height:100px;
background-color:rgb(204, 204, 204);
margin-bottom:50px;
/* h-shadow:5px | v-shadow:10px | blur:5px | color */
box-shadow: 5px 10px 5px #777;
}
</style>
</head>
<body>
<div class="shadow01"></div>
</body>
</html>가장 기본이 되는 모양의 그림자.
수평 수직거리를 3px로 지정함으로써 그림자의 가로, 세로 위치가 배너로부터 3px씩 떨어져 위치하게 된다.
음수를 사용하면 반대 방향으로 그림자가 들어간다.
/* h-shadow:5px | v-shadow:5px | blur:5px | spread:10px(배너보다 그림자가 5px 커짐) | color */
box-shadow: 5px 5px 5px 10px #777;spread를 5px로 지정함으로써 배너보다 큰 크기의 그림자를 표현했다.
만일 그림자의 수평, 수직 거리를 0px로 지정하면, 그림자는 배너 바로 뒤에 위치하게 된다.
/* inset(내부그림자) | h-shadow: 0 | v-shadow:0 | blur:10px | spread: 10px | color */
box-shadow: inset 0 0 10px 10px #000;inset 속성을 이용하여 내부 그림자 표현.
/* h-shadow:0 | v-shadow:10px | blur:10px | spread:-3px(배너보다 -3px 작아짐) | color */
box-shadow: 0 10px 10px -3px #000;그림자 사이즈 조절하는 spread(확장거리)를 이용한 효과. 음수를 지정함으로써 배너보다 작은 크기의 그림자가 적용되었다.
'CSS' 카테고리의 다른 글
| ul li 사용한 메뉴 바 만들기 (0) | 2023.03.08 |
|---|---|
| transform 2D 속성 (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 :: 도형 모서리 테두리 둥글게 만들기(실습) (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 :: 도형 모서리 테두리 둥글게 만들기 (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 용어 정의 및 정리 (0) | 2023.03.05 |
댓글 영역