[CSS] 박스 쉐도우 box-shadow 그림자 넣기

링크 허용 펌 금지.
이 글은 다음 언어로도 볼 수 있습니다. -

‘웹으로 말하기’를 구독하세요 :

RSS, Email

형우의 추천글을 구독하세요 :

페이스북 페이지, 트위터, 구글+ 페이지

광고 :

레프트21은 제가 강추하는 진보 언론입니다.

공유 :

정찬명 님의 블로그에 갔더니 9 Useful CSS3 Properties 라는 글이 있었다. 그 중 인상깊은 놈 하나를 퍼왔다. 나머지도 보고 싶다면 직접 글을 보기 바란다.

CSS3긴 하지만, 지금도 당장 사용할 수 있다.

/* Opera */
box-shadow:10px 10px 10px silver;

/* Firefox */
-moz-box-shadow:10px 10px 10px silver;

/* Safiri, Chrome */
-webkit-box-shadow:10px 10px 10px silver;

/* IE */
filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=20);

이렇게 쓰면 아래처럼 나온다고 한다.

css3 box-shadow를 적용한 모습

이거 참 괜찮은 효과다. 정찬명 님의 나라디자인 블로그에 가면 더 많은 것을 볼 수 있다. 그림을 클릭하면 이동한다.

나중에 디자인할 때 꼭 써먹어 봐야겠다.

‘웹으로 말하기’를 구독하세요 :

RSS, Email

형우의 추천글을 구독하세요 :

페이스북 페이지, 트위터, 구글+ 페이지

광고 :

레프트21은 제가 강추하는 진보 언론입니다.

공유 :

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>