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…

HTML and CSS – The Basics

So, one of my friend said me to post an article for basics so the beginners can understand. But its not easy to learn in one day and you have to read and try lots of experiment on your own to know about CSS and HTML combination. CSS stands for cascading style sheets, for styling the web page. HTML is a markup language which stands for Hyper Text Markup Language, In simple words HTML creates a skeleton for the web document, where CSS defines the HTML object’s appearance like its size, color, position on the screen etc. If you don’t define a CSS for your HTML document the web browser will automatically use the default CSS that’s build inside the browser. For instance its predefined that text color should be black in the HTML document by browsers default CSS.

CSS gives lots of flexibility for web page layout design. A single HTML page can be made to look in different ways by changing the CSS alone. A best example to see this is to visit CSS Zen Garden. You can see how the entire site appearance changes just by changing the style sheets. Read the rest of this entry »