by As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Although it is currently under development, it is being popular rapidly.It offers a huge variety of new ways to create an impact with your designs, with quite a few important changes.
There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.
- Link Transitions:There is new added the css property, -webkit-transition. Note that the -webkit prefix specifies that this will only work in Webkit engines, or Safari and Chrome. Luckily, other modern browsers have their own implementations as well.
- Background Transitions:Another basic use of changing states is to change the background of an input box on focus. We can use this background transition in so many other cases. 🙂
- Transitioning Multiple Properties:CSS transitions are actually relatively straight forward to add to existing hover functionality, and give your site that extra polish for browsers that support CSS3.We can change multiple properties at one time like background, padding and more interestingly easing and timing is also available.
- Putting the Pieces Together:We can make animation to separate parts and combine them together to get nice effect.
- Introducing Animations:Different animation techniques are available in CSS3.We can rotate the item in aour required degree and the options for number of times and timing are also available.
- Graceful Degredation with Modenizr:Once we have everything working, we should consider our users who are browsing without CSS3 capable web browsers. This is easily accomplished using a JavaScript library such as Modernizr, which adds classes to the HTML element relating to the browser capabilities.
