본문 바로가기
프로그래밍/HTML, CSS, JavaScript

CSS를 이용한 레이어 그림자 효과 주기

by [바가지] 2018. 2. 22.
반응형

카테고리 레이어에 

그림자 효과 주는 방법


그림자효과주기



그림자를 주기 위한 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값으로 설정을 할 수 있습니다.


또한 콤마(,)를 이용하여 다양한 설정 값들로 겹치게 또는 안겹치게 하여 효과를 줄 수 있습니다.

더욱 풍성한 설정이 가능 해 집니다.


설정값들을 변경하여 멋진 레이어 만들기에 도전 해 보세요.


반응형