CSS 이미지 섀도우 구현 3부작

CSS 그림 그림자 효과 구현 3부작 css shadow triple stepsMastery.Advanced.Web.Standards.Solutions.Feb.2006.pdf 미리보기 효과는 세 번째 단계를 직접 보십시오.번역문은 직역으로 구체적으로는 영문 판본을 참고하시오.영문 서적도'팔주'가 많아서 많이 보면 본문 시작에 익숙해진다. 첫 번째, 어떻게 그림의 음영 효과를 실현하는가. 이런 효과를 만들기 위해서는 먼저 음영 그림 배경을 외투 레이어 라벨에 설정해야 한다.레이어 레이블은 블록 레벨 요소이기 때문에 수평으로 확장되며 가져올 수 있는 모든 공간을 차지합니다.이런 상황에서 우리는 이런 기교를 사용하여 도층 외투로 그림을 담을 수 있다.또한 도면층 부동을 설정하여 외투를 수축할 수도 있다.(필자가 사용하는 시스템은 맥)
클립보드에 내용 복사
코드:.img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
음영 효과가 있는 그림을 표시하기 위해서는 그림의 마이너스 간격을 설정해야 한다.(섀도우 효과는 오른쪽 및 아래에 있으므로 전체 이동에 픽셀 5개를 설정합니다.)
클립보드에 내용 복사
코드:.img-wrapper img {
margin: -5px 5px 5px -5px;
}
----------------------------------------------------------------FirstTo create the effect, you first need to apply your shadow graphic to the background of thewrapper div. Because divs are block-level elements, they stretch horizontally, taking up allthe available space. In this situation we want the div to wrap around the image. You cando this by explicitly setting a width for the wrapper div, but doing so reduces the usefulnessof this technique. Instead, you can float the div, causing it to “shrink-wrap” on modernbrowsers, with one exception: IE 5.x on the Mac..img-wrapper {background: url(shadow.gif) no-repeat bottom right;clear: right;float: left;}To reveal the shadow image and create the drop shadow effect (see Figure 3-13), you needto offset the image using negative margins:.img-wrapper img {margin: -5px 5px 5px -5px;}