Reflect

http://webkit.org/blog/182/css-reflections/

-webkit-box-reflect: <direction> <offset> <mask-box-image>

direction - above, below, left, right
offset - length or percentage. defaults to 0. 길이나 퍼센트로 표시, 기본값은 0
mask-box-image - 생략시 마스크를 갖지 않는다.

반사된 객체는 그 원본이 바뀌면 자동으로 업데이트 되어지게 된다. 가장 대표적인 예로는 video 가 있습니다 - 비디오가 재생중이면 반사된 객체도 재생된 화면을 반사하고 있다.

이 방법이 canvas를 이용한 방법보다 빠르다.



Gradient


webkit
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

type - linear, radical


FF
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

IE
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

ex)
background:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#FFFFFF), to(rgba(120, 120, 180, 0.6)));
background:-moz-linear-gradient(0% 100% 90deg, rgba(120, 120, 180, 0.6), #FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#7878B4);

그라이언트 코드 제작 사이트



Reflections

Reflect + Gradient 를 이용하여 반사효과를 갖도록 한다.


-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));


이런식으로 사용하게 된다.

direction과 offset을 설정하고
반사되는 이미지를 해당 타겟의 gradient로 설정하여 보이게 해서 반사효과를 얻게 되는 것이다.


Posted by Mooki
,