CSS3 Reflection

Well, for the past few days i got busy learning python and google app engine, and was working in a small project too. Sorry for delay, lets go directly into css3 reflection. A reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.

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

<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

Reflections will update automatically as the source changes. If you hover over links, you’ll see the hover effect happen in the reflection. If you reflect the <video> element, you will see the video playing in the reflection. Giving an element a reflection has the effect of creating a stacking context (so it joins opacity, masks and transforms). The reflection is non-interactive, so from the point of view of hit testing, it’s like it isn’t there. The reflection will have no effect on layout (other than being part of a container’s overflow), and can be thought of as similar to box-shadow in this respect. The example above uses a gradient mask. Here is the sample code:

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

And this works on webkit browsers only which are chrome and safari only…

Perspective in CSS3

Perspective view in a web page are often created by java script by reducing the size of the objects in the background. Apple’s webkit engine enables the developers to create objects in much perspective way. A box model can be rotated in 3D. Its not only box model any thing can be rotated in 3d, Text, Image etc. But its not the end apple’s webkit can render that in a a 3d perspective. And it doesn’t work on Firefox 4 and Google Chrome 10. As for today IE9 is not even considered for this. Because IE9 cant even rotates an object. Firefox 4 and Chrome 10 can rotate objects only in z axis. Even though chrome uses webkit engine its working in chrome(May work in future release). And the only browser that can do the magic is Apple’s Safari. This is how its going to work, the HTML structure needs two div’s nested. The inner div will be rotated and the outer div will gives the perspective appearance.

<div class="outer">
 <div class="inner">
 Some Text

Read the rest of this entry »