The CSS hacks and JavaScript-dependent techniques for styling were the ideal eye openers to ring out a way to progress the idea of introducing CSS3. Many unanswered questions left them diffident in experimenting with new ideas and foremost to leave the past and move forward to cultivate for a better techno- world.
CSS is a style sheet format, endorsed by the World Wide Web Consortium (W3C) that works with HTML documents using simple syntax and various style properties denoted by English language keywords.
CSS1 incorporated innumerable layout settings suitable for downloadable HTML pages which provide additional XML support, downloadable fonts and audio presentations for visually impaired users. CSS3 continues in development and its improved highlights include: vertical texts, backgrounds and borders, speech recognition and user interaction. Text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc are various new rules that help save time. CSS3 has been proved to be flexible in making it much easier to recreate the previously so complex effects.
Supported by most web browsers, CSS3 has gained a lot of popularity in recent times. Here are some features and techniques that can help you when designing a website:
Border Radius- Create Rounded Corners
CSS3 styling rule allows rounded corners to be set up. Supported by Firefox, Chrome and Safari3, the feature allows you to create round corners on box-items.
Using the code:
<div style=" background-color: #ccc; -moz-border-radius: |
You can get rounded corners like this:
This is how it can look when using rounded corners around a block of text.
CSS3 has a much wider range of color support with new colors like HSL, CMYK, HSLA and RGBA.
To get more information on the colors available and how to use them on your website, please visit http://leaverou.me/2009/03/css3-colors-today-mediacampathens-session
Border Image
This lets you use an image file as the order of an object.
To get the following
1.
2.
The syntax is:
1. border-image: url(border.png) 27 27 27 27 round round;
2. border-image: url(border.png) 27 27 27 27 stretch stretch;
http://www.css3.info/preview/border-image/
Box Shadow and Text Shadow
Shadow just adds that missing factor to a design and with CSS3 it's much easier to get them. Without wasting your time in photoshop , you can add that extra oomph to the box or text.
The property takes 3 lengths and a color as its attributes, the lengths are:
- the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
- the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
- the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
The text shadow property can be used with the following syntax:
text-shadow: 2px 2px 2px #000;
http://www.css3.info/preview/box-shadow
http://www.css3.info/preview/text-shadow
Multiple background Images
CSS3 allows you to add multiple background images on one element. So adding more than one background to a box or paragraph is very simple with the use of CSS3.
You just need to put commas between multiple backgrounds:
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;
http://www.css3.info/preview/multiple-backgrounds
Multiple Columns
Using the new modules on Multiple Column the content of an element can be laid out in multiple columns. CSS3 based columns offer a lot of flexibility in terms of the flow of content from one column to another. Based on the size of the viewport, number of columns keeps varying.
http://www.w3.org/TR/2007/WD-css3-multicol-20070606
Opacity and RGBA
CSS3 brought an extensive usage of opacity. It became much easier to set the transparency level for images, texts and boxes with the help of opacity feature. Where an opacity value 1 corresponds to fully opaque element, opacity value 0 means the element is completely transparent.
http://www.css3.info/preview/opacity
Preview Custom Web Fonts
With CSS3, adding custom fonts to your website couldn't get easier. An HTML5/ CSS3 powered web app Font Dragr lets you drag and drop fongt into the webpage and you can preview and edit the example text.
http://labs.thecssninja.com/font_dragr
CSS3 Selectors to Apply Link Icon
CSS3 lets you apply a number of icons to your link. Using CSS3 Selectors, you can apply an icon to any tag with an attribute.
http://www.css3.info/using-css-3-selectors-to-apply-link-icons
While these features come handy in enriching you design even more, there are a few problems that you might be ready to deal with. Most of the features are not compatible with Internet Explorer so there would be large number of visitors who might not see these features at all. It's very important then that you keep the basic necessities in place. Things like a regular border and primary colors should be a part of the design.
Commented by: Umarfaruk M, 23 August, 2010
thanks for this post... keep post...
Commented by: Warma, 27 September, 2010
thanks great post..