Evan Byrne씨는 간단한 CSS 아이디어로 이미지를 더욱 예쁘게 표현하는 보더를 만드는 방법에 대하여 소개했습니다. 이것은 CSS 가짜 요소를 사용하는 방법입니다. <img>요소에는 가짜 요소를 사용할 수 없기 때문에 <span>요소를 추가하고 :after 가짜요소에 스타일을 지정합니다. 이때 font-size와 ine-height속성으로 보더와 이미지 사이에 생기는 공백을 제거해 주어었네요. 결과는 다음과 같습니다.
적용전:
적용후:
코드:
<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계열 브라우저에서는 작동하지 않습니다. ;)
이미지를 예쁘게 하는 CSS 보더 - Firejune
