카테고리 레이어에
그림자 효과 주는 방법
그림자를 주기 위한 CSS 속성은 box-shadow 입니다.
■ 참고소스
#category {
position : fixed;
font-family : '굴림', sans-serif; margin:50px 0px 0px;
box-shadow : 0 2px 2px 0 rgba(0, 0, 0, 0.14)
, 0 3px 1px -2px rgba(0, 0, 0, 0.12)
, 0 1px 5px 0 rgba(0, 0, 0, 0.2);
padding:10px ; z-index:99;background-color:#fff;
}
box-shadow 설정 값으로는 4가지 설정 부분들이 있습니다.
■ 설정방법
첫번째 값은 그림자의 가로 길이 설정 입니다
설정 값은 0을 기준으로 0보다 크면 오른쪽, 작으면 왼쪽으로 길어 집니다.
두번째 값은 그림자의 세로 길이 설정 입니다.
설정 값은 0을 기준으로 0보다 크면 아래, 작으면 위로 길어 집니다.
세번재 값은 그림자의 번지는 정도를 설정 합니다.
최소 값은 0으로 0으로 설정하게 되면 번지는 효과가 없습니다.
네번째 값은 상하좌우 전체 떨어지는 길이를 설정 합니다.
다섯번째 값은 색상을 지정합니다. rgba값으로 설정을 할 수 있습니다.
또한 콤마(,)를 이용하여 다양한 설정 값들로 겹치게 또는 안겹치게 하여 효과를 줄 수 있습니다.
더욱 풍성한 설정이 가능 해 집니다.
설정값들을 변경하여 멋진 레이어 만들기에 도전 해 보세요.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
CSS를 이용한 DIV 슬라이드 효과 주기 (12) | 2018.03.13 |
---|---|
jQuery를 이용한 스크롤 이동하기 구현 방법 (2) | 2018.02.24 |
티스토리 폴더 형식의 카테고리 달기 (4) | 2018.02.21 |
자바스크립트 사용자 정의 함수 사용법 익히기 (6) | 2018.02.20 |
보이기와 감추기 - visibility 와 display (4) | 2018.02.18 |