웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] box - shadow 효과로 개체에 그림자 넣기 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] box - shadow 효과로 개체에 그림자 넣기

해피CGI윤실장 2019. 2. 19. 09:12

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

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

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

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

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

활용예시 :

 

 

 

홈페이지바로가기

저작자표시

'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] display: table-cell을 이용한 컨텐츠의 수직적 중앙정렬  (0) 2019.02.21
[해피CGI][cgimall] IOS 코딩 시 유용 팁 (회전시 폰트 사이즈 조절 및 webkit)  (0) 2019.02.20
[해피CGI][cgimall] 빈영역에 세로 및 가운데 정렬 tip  (0) 2019.02.11
[해피CGI][cgimall] CSS에서 웹페이지 전체에 스타일을 적용하는 (*) 표시  (0) 2018.12.04
[해피CGI][cgimall] 동적인 가로, 세로값 계산을 위한 clac CSS  (0) 2018.11.14
공유하기 링크
'웹프로그램밍 자료실/HTML 자료' Related Articles more
Comments