CSS3

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…

Color Modules in CSS3

In CSS3 there is an additional color module HSL along with RGB. If alpha channel is needed then it has to be delcared as RGBA and HSLA. HSL stands for Hue, Saturation and Lightness. RGB is the combination of Red, Green and Blue colors which are used in monitors. HSL is easy to define color rather than traditional RGB. Hue is the actual color which is defined in degrees from 0 to 360. 0 degree is Red, 120 is Green and 240 is Blue and mathematically 0 and 360 are same so 360 is Red.Hue scale. Read the rest of this entry »

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
 </div>
</div>

Read the rest of this entry »

Ellipse in CSS3.0

In my previous post, i have explained how to create a circle in CSS3.0, now ill explain how to create a ellipse in CSS3. This is done by another CSS3 properties called transform. Transform has several attribute. But we will use any one like scale or skew. Alright. First we need to create a circle. You can read my previous post to know that. Its the same HTML


<div class="circle">
 <div class="text">
 This is a Text
 </div>
</div>

Now the main tweak is in CSS. we are going to use the magic property transform. This is not implemented in IE9 so it wont work with IE9. It works perfect with firefox, chorme and safari.


.circle {
 width:200px;
 height:200px;
 border:#000 2px solid;
 border-radius:100px;
 background:#CCC;
 -moz-transform:scaleY(0.4);
 -webkit-transform:scaleY(0.4);
 margin-top:-60px;;
}

The prefix -moz is for firefox. and -webkit- is for chorme and safari. If you want to support it for opera then use the prefix -o. Here i have used scale property to scale the Y to 40% of its original height. Giving the value scaleY(2); will double the size of the Y axis. 0.4 will reduce the size of the Y axis. Now here to do the same skewY can also be used. But skewY changes the position of the ellipse.

Read the rest of this entry »

Circle in CSS3.0

In CSS2 we give border and fill a background color to make it look like a square or rectangle. In CSS3 there is a new property called border-radius which gives the box model a rounded corner. This gives an advantage for the designers to create a circle using CSS3. Its very simple.


<div class="circle">
 <div class="text">
 This is a Text
 </div>
</div>

Its a simple HTML structure that has div tag and another div tag nested inside. The CSS for this is.


.circle {
 width:200px;
 height:200px;
 border:#000 2px solid;
 border-radius:100px;
 background:#CCC;
}

Read the rest of this entry »