Rev. 2.73

Evan Byrne씨는 간단한 CSS 아이디어로 이미지를 더욱 예쁘게 표현하는 보더를 만드는 방법에 대하여 소개했습니다. 이것은 CSS 가짜 요소를 사용하는 방법입니다. <img>요소에는 가짜 요소를 사용할 수 없기 때문에 <span>요소를 추가하고 :after 가짜요소에 스타일을 지정합니다. 이때 font-sizeine-height속성으로 보더와 이미지 사이에 생기는 공백을 제거해 주어었네요. 결과는 다음과 같습니다.

적용전:

dingo.jpg

적용후:

dingo.jpg

코드:

<span class="fancy">< img src="dingo.jpg" /></span>
.fancy{
	position:relative;
	display:inline-block;
	font-size:0;
	line-height:0;
}

.fancy:after{
	position:absolute;
	top:1px;
	left:1px;
	bottom:1px;
	right:1px;
	border:1px solid rgba(255,255,255,0.5);
	outline:1px solid rgba(0,0,0,0.2);
	content:" ";
}

보더와 겹친 이미지 영역이 살짝 묻어나오는 것이 마치 포토샵으로 처리한 것 같죠? CSS3의 명세인 RGBA로 색상을 지정했기 때문에 IE계열 브라우저에서는 작동하지 않습니다. ;)

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar