box - shadow 효과로 개체에 그림자 넣기 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기본 소스 > box - shadow 효과로 개체에 그림자 넣기 상세정보

클라우드태그

javascript

HTML

PHP

2022

Api

CSS

웹메일

jquery

ASP

갤러리

mysql

모바일

mobile

현재접속자 명

box - shadow 효과로 개체에 그림자 넣기

해피팀

네티즌

소스분류

기본 소스

다운로드 횟수

0 회

간단설명

기존에 bg로 그림자 효과를 냈었다면, 이제는 CSS의 box-shadow 속성을 이용해서 간편하게 그림자 효과를 나타낼 수 있습니다.

평가하기

디자인작업시, 그림자 효과를 내고 싶을때
기존에는 shadow느낌의 gif나 JPG를 반복패턴으로
영역 내에 배경이미지로 넣었습니다.

하지만 CSS로 간편하게 삽입이 가능합니다.

#example2 {
box-shadow: 5px 10px #888888;
}

위와같이 box-shadow 기능을 이용하면 쉽게 가능합니다.
참고로 그림자를 넣게되면, 별도의 영역을 차지 하지 않으면서
그림자효과를 낼 수 있어, 가로와 세로너비에 신경쓰지 않아도 되 편리합니다.

속성을 보면, 그림자의 우측, 하단의 사이즈와
컬러를 지정한다는것을 알 수 있습니다.

활용예시 :