[Re]Encoded.com

How to Learn CSS3

Welcome the new age with a new technique. As time continues to grow then we must inevitably follow if we do not want to be called outdated.

Now we should have started learning the new techniques of CSS. CSS 3 has given us an easy way to create the effect / style to an HTML element by abandoning the old way, aided by Javascript and JQuery.

CSS3 is the new kid on the family stylesheet. Offers new possibilities for creating interesting effects on the design of your site, enabling you to use more diverse style sheets for different occasions and more. Since this is new, there are some that have not been compatible browser to CSS3. You can view a list of compatible

Modernizr

Modernizr used to help the browser does not support CSS3 features to be translated. Thus, if a web developer is using CSS3, but the browser is not supported, then the problem will be solved Modernizr library.

Cheat Sheet

This is a CSS3 Cheat Sheet (PDF) which contains a complete list of all existing properties in CSS3. Cheat Sheet can be as a guide for your developers when using CSS3.

CSS3 Cheat Sheet

CSS Properties Index

This cheat sheet is not fully, but it still will help you browse through each level css (to make comparisons easier)

New Features on CSS3

Border

There are several new features in CSS3, among others, you can set a border with the new border functions. Another very useful function is a function of radius border that allows you to create rounded corners in the code. You can also apply shadows on the boxes. Directly from the code, no need to use any additional image elements. This is some tutorial about border and corner

CSS3 Border Radius for Hover States

Awesome Overlays in CSS3

Rounded Corner Boxes the CSS3 Way

border-radius and -moz-border-radius

CSS3 border-radius property

Shadows and CSS3
Animation

CSS3 is rich in features for animation and fully support CSS animation effects. Whether it’s animation to text or objects, which previously could not be done by CSS2/CSS2.1. And can replace the role of image . If you want to learn about animation using CSS3, below is the source that may be useful for you

CSS Animations

Old School Clock

A Crash-Course in Advanced CSS3 Effects

Image Gallery

Matrix

Animated Rocket

Typography

Typography is one of the most important aspect to get right when designing a layout. Types can attract readers through the pages, giving a certain impression, provide impact, be subtle, or aid in separating the content.

Create Beautiful CSS3 Typography

Create Inset Typography with CSS3

Color

Color is one of the strongest function of CSS 3. Divided into three parts, namely RGBA Colors, HSLA Colors and HSL Colors. Three functions of these colors have their respective advantages and are used with certain conditions. For more details you can try the tutorial from the following sources

Super Awesome Buttons with CSS3 and RGBA

Colorful Clock

Awesome Overlays in CSS3

CSS3 HSL & HSLA