Rev. 2.73

css3pie.png

PIE(Progressive Internet Explorer)는 인터넷 익스플로러 6-7-8에서 CSS3의 몇몇 속성들을 인식하고 출력하는 첨부파일(.htc)형식의 라이브러리입니다. 얼마 전에 소개했던 IE-CSS3와 마찬가지로 VML을 이용하며, behavior: url(PIE.htc);를 해당 속성에 작성하는 사용방법 역시 비슷합니다. 두드러진 차이점은 보다 많은 CSS3속성들을 지원하고 자바스크립트로 핸들할 수 있다는 것입니다.

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

그리고 추가적인 CSS3 속성들을 표현하기 위해 개발중이라고 합니다. IE-CSS3 프로젝트를 포크한 냄새가 강하게 풍깁니다만 언급은 없군요. 아무튼 멋진 프로젝트입니다. 그럴싸한 도메인으로 서비스 되는 것으로 보아 뭔가 공식화 되는 느낌이 드네요.

Mmmmm, pie.
CSS3 features
border-radius
box-shadow
linear-gradient
Options

Comments

CSS를 예술의 경지까지 끌어올린 Román Cortés씨는 순수 CSS만으로 3D 패럴랙스 효과를 만들어 내고 콜라 캔찌그러진 콜라 캔을 입체적으로 매핑한 경험이 있습니다. 그는 이제 조금더 실용적인 곳에 CSS 테크닉을 적용하기 시작했습니다. 위 예제 역시 약간의 HTML과 CSS만을 이용하여 작성된 것이며 마우스 행동에 따른 책장을 넘기는 효과가 적용되어 있습니다. 마치 플래시로 구현한 듯한 애니메이션을 보여주며, 그라디언트와 쉐도를 적절히 이용하여 사실적으로 표현했습니다. 웹킷 기반의 크롬과 사파리 브라우저에서만 작동하며 iOS나 맥OS 위의 사파리에서는 transition 속성이 하드웨어 가속을 지원하기 때문에 매우 부드러운 애니메이션을 경험할 수 있습니다. iOS에서는 약간 뒤틀리긴 하지만요.

아... 요것이랑 비슷한 것을 자바스크립트로 구현하던 짱박아둔 예제가 있었는데 완전히 새 됐군요.

Comments

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