css3 continued

In last post i’ve discussed about

@font-face
hsl
box-shadow
animation
transform
transition

Now we’ll discuss about some more properties added to css3


border and background images


Each element in css has box model i.e. when an element is rendered it has boxes around it. Every element has, content box, padding box, border box and margin box. In css3 each of these can be designed separately. By default there background is transparent so background of there parent is displayed.

Background of a box can have multiple layers in css3, just like layers in photoshop. Multiple background images can be applied by comma separated list of images in background-image property. Each of these images forms a layer. Image declared at first position will form topmost layer. If any background color is defined then that color layer will be created at last after form all background image layers. See following example

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

Here 3 background images are placed. Top most layer will contain image ‘flower.png’ , second layer will contain image ‘ball.png’ and so on.. Positions of each image is set by corresponding entry in background-position property. background position is calculated according to the background-origin property value. Possible values for background-position are

background-position:left 10px top 12px; /* horizontal offset 10 px, vertical offset 12px*/
background-position:bottom 10px left 12px; /* offset from bottom 10px, horizontal offset 12px */
background-position:10px 12px; /*horizontal offset 10px, vertical offset 12px*/
background-position:10px; /* horizontal location center, vertical offset 10px*/

if background-origin is set to border-box then background position will be calculated from border box.

background-repeat defines how background image will be rendered i.e. it is tiled, repeated etc. possible values for background-repeat are

repeat-x | repeat-y | [repeat | space | round | no-repeat]

repeat-x : repeat in horizontal direction only
repeat-y : repeat in vertical direction only
repeat : repeat in all possible directions
space : repeat in all directions without clipping image. background images will be equally spaced and blank space is filled with background color.
round : background is repeated in all directions without clipping image. If blank space is left then, image are resized to fill all blank space.

Other background properties
background-clip : possible values are border-box | padding-box | text
if background-clip is set to text, then background image will be visible through transparent text written in the element.

To apply these properties to element in different browser please use browser specific commands e.g
-webkit-background-image
-moz-background-image
etc.


border-radius

border-radius property is to make curved corners of element like div etc. It has specific commands to make any of 4 corners curved.

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

border-radius commands can take two one or two values to make curve circular or elliptical. so to make a curve elliptical define

border-top-right-radius : 10px/30px;/* here 10px is horizontal radius and 30px is vertical axis*/

shorthand notation for border-radius is

border-radius : 10px/30px 10px 20px 40px;


in this code radius defined is for corners in clockwise direction starting from top-left corner.

-webkit-border-radius:12px;
-moz-border-radius:12px;
-o-border-radius:12px;
-webkit-border-radius:12px/30px 20px 20px 20px;
-moz-border-radius: 12px/30px 20px 20px 20px;
-o-border-radius: 12px/30px 20px 20px 20px;

Above example may not work even for latest safari. only border-radius simple version worked on my mozilla browser.


border-image


basic command for border radius image is border-radius-image details on it can be read from here


text-shadow


CSS3 added a nice feature of text-shadow. Now to show shadow below text, text-image need not to be created. It’s very easy in css3 to create text shadow

text-shadow:2px 2px 5px #c00;

code above will make a shadow positioned at 2px right and 2px down from the text, shadow will be blured to 5px and will of color #coo;

text-shadow:2px 2px 5px #c00

supported browsers for text-shadow are
Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab


text-overflow


media query


Till now css supported media=”screen” type functionality to change stylesheet based on media. Other media types supported are ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ css3 has improved this support by providing media queries. So, now stylesheet can be changed based on output devices in more details, for instance now stylesheet can be changed according to different sizes of view port. Media queries are logical expressions which evaluates to either true or false. If query return true then defined stylesheet is applied as par css rules. Multiple media queries can be applied to a single statement, separated by comma. for example

@media url(specific.css) screen and (color), projection and (color);

media queries can also be applied from html. It is currently not supported by any browser

<link rel="stylesheet" media="screen and (color)" href="specific.css" />


In the above statement, media type defined is ’screen’ if no media type is defined then it is considered to be ‘all’. So, this statement will include specific.css if output device is color screen.

Media queries can also be applied directly in css statements

@media screen and (min-width:100px){
// css statements
};

details about media queries can be found here.


multi-column


multi-column property of css3 allows designer to specify the no. of columns in which content will be rendered. No additional elements or manipulations or tricks are required to break content in multiple columns and keep them balanced. All manipulations have to be managed for different content in case of dynamic content and it make all that unfeasible solution.

proposed properties for multi columns are

column-count : to determine the number of columns into which the content of the element will flow.
column-width : to describe the optimal width of each column.
column-gap : to set the padding between columns.
column-rule : to define a border between columns.

See following example

-moz-column-count:2;
-moz-column-gap:10px;
-moz-column-rule:2px solid #c00;

-webkit-column-count:2;
-webkit-column-gap:10px;
-webkit-column-rule:2px solid #c00;

-o-column-count:2;
-o-column-gap:10px;
-o-column-rule:2px solid #c00;

List of supported browsers for different properties of css3 are as follows.

  Safari 4 (win) Firefox 3.5(win) Chrome (win) Opera 10 (win) IE 6,7 & 8
@font-face y y n y y
hsla() y y y y n
box-shadow y y y n n
CSS Animations y n y n n
canvas y y y y n
border-image y y y n n
multiple backgrounds y n y n n
CSS Columns y y y n n
CSS 2d transforms y y y n n
CSS Transitions y n y n n


CSS3 features in internet explorer

will continue in next post