socialgo

CSS3 yet and not yet

Published by: ezra vancil on 23rd Oct 2009 | View all blogs by ezra vancil
The new CSS3 will provide many features that were not available with CSS2 and older applications. While some of these features are still being developed, there are others that are working right now as well.

One of the new features is called "substring matching attribute selectors". There are three additional attribute selectors provided for matching substrings in the value of an attribute.

*[att^=val]
Represents an element with the att attribute whose value begins with the prefix "val". The selector does not represent anything if "val" is the empty string.

*[att$=val]
This will represent an element with the att attribute whose value ends with the suffix "val". Again if "val" is an empty string then the selector doesn't represent anything.

*[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring "val". Just as in the other two, if "val" is the empty string then the selector does not represent anything.

Another feature of CSS3 is the ability to manipulate borders. You can play around with border color, border image, border radius, and box shadow applications to customize borders.

**Border-color
At the moment this is only available to those using Mozilla/Firefox browser. By using the CSS code available you can change the color of the border around a boxed set of text. Want the border around your message to be blue, just use the CSS code. Red,yellow, gray, or whatever color you want can now be used to give your borders more style.

**Border Image
This currently works in Firefox 3.1 and Safari. This feature is split into two categories which are border-corner-image and border-image. Instead of using the normal border of any element, you can now just use this feature to change the images around the border. You can change the corners or the whole box if you wish.

**Border Radius
This can be used on Safari 3 and Mozilla Firefox. This function allows the corners on a box to be rounded. You can choose to round off just one corner, or round off all corners of the box.

**Box Shadow 
This can be implemented in Firefox 3.1 and Safari 3+. Color is one attribute you can alter as well as three lengths that can be used. 
1. Horizontal offset of the shadow means that the shadow will be to the left of the box if using a negative offset, or will be to the right of the box when using a positive offset.
2. Vertical offset puts the shadow on the bottom of the box with a positive offset and the top of the box with a negative offset.
3. Blur Radius means how blurry you want the shadow to appear. A setting of zero will mean there is no blur and as your setting goes up the blurrier the shadow will be.

There are also other features for CSS3 that deal with colors. A feature that can be used with Mozilla, Konquerer, Safari 3 and Opera 9.5 is HSL colors. HSL stands for hue, saturation, and lightness. The colors and tunes are now available in a much wider spectrum than they were previously.

**Hue is a degree on the color wheel. The basic values are green is 120, blue is 240, and red is 0 or 360. Different shades are represented by the numbers in between.

**Saturation deals with a percentage value with 100 percent being the full color. 

**Lightness also deals with percentages, with black being zero percent and 100 percent being light. 

HSLA sets the opacity of an element and is currently only available for Firefox 3 beta and Safari 3.

There are also features you can use that apply to user interface. These include box sizing, resize and outline. 

**Box Sizing
Can be used with Firefox and Safari 3. Changes the behavior of the browser in calculating the width of an element. By using the border-box setting the browser will render the box with whatever height and width are specified while also adding the border and the padding within the box.

**Resize
Allows user to specify if a box can be resized. You can resize vertically, horizontally, or both.

**Outline
Currently works in Safari, Firefox and Opera. Offset can be rendered away from the specified element, and the outline will be another box surrounding the border. 

These are only some of the features available with the new CSS3. There are also newer features that are presently in the works as well. 

Comments

1 Comment

  • fly123
    by fly123 4 months ago
    Actually, cheap wow gold fresh water is in a short supply,buy wow gold fresh water consumption remains

    great.tiffany Besides, with the development of industry, wow buy goldmore water is needed.

    Moreover,cheapest wow golda lot of our rivers and lakes have been so polluted that water from them is undrinkableyy2010.5.5
Please login or sign up to post on this network.
Click here to sign up now.