We have HTML, we already have CSS (Cascading Style Sheet), and through many years, they are common languages for web designers. But – like other technologies which are being extended day by day – web content itself needs to take another step forward to follow the others. That’s what we’ve been doing with CSS3.
Make your design easier
Based on the old style, selectors and cascades from CSS 2.0, CSS3 now allows designers to perform new features like new selectors, pseudo-class and properties. The features below are innovations that CSS3 brings up to ease the way to design websites:
Text Effect: The latest version of CSS brings us the abilities to customize the font face and modify how our text will look like, such as shadowing, pressing, embossing, rotating, gradient, etc. … instead of using another image processing software like Photoshop or Corel Draw.
An example of text shadowing and text rotating by CSS3
Border: A common problem in CSS 2.0 is how to create an object like a box with rounded corner. First we need 4 images with each is a quarter of a circle, then place them into the corresponding corner. In CSS3, the only thing we need is the border-radius property.
A preview of how border-radius property works with the border, border in CSS3 will now be customized by parameters, not by specified images in CSS 2.0, see more on: http://www.css3.info/preview/multiple-backgrounds/[VD1] [t2]
Background: CSS3 also let designers bring multiple backgrounds into the website. Here is a demo
A background demo for CSS3, the box above has 2 dirrent background, 1 is a sheep and one is the grassfield with blue sky behind, see full demo on http://www.css3.info/preview/multiple-backgrounds/
The box above can be created with a simple block of code:
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
Animation Effects: just like HTML5, CSS3 provides more animation effects and can be viewed right on the web browser without using Adobe Flash – a good solution for mobile browsers.
An example of object animation by using CSS3, for more information and source code please visit: http://www.the-art-of-web.com/css/css-animation/#outerspace
The best friend of HTML5
If HTML is the bricks to build a wall, then CSS is the paint to decorate it. Although both CSS3 and HTML5 are under development, the way they two change how we design websites is just the matter of time. The new enhancements in many aspects will make web designing become something like “draw a website with your keyboard”.
“Introduction to CSS3, what is it ?” – Design Shack: http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
No comments:
Post a Comment