4 Design Web

As we know CSS3 is the latest version and browser support version of Stylesheet.

Following are the CSS3 browser support and property syntax:

Every property is described as following:

1. First box: the <<official>> property
2. A box with all representing engine prefixes like –webkit- or –moz-
3. Finally an image with reference preview

For each property the following prefixes are used:

1. Presto (Opera): -o-
2. Trident (Windows, Internet Explorer, Avant Browser): -ms-
3. Gecko (Firefox, Camino…): -moz-
4. iCab (iCab) : -icab-
5. Khtml (Konqueror) : -khtml-
6. Webkit (Safari, Chrome, Shiira…): -webkit-

Border radius (Rounded corners)

Syntax: Border-radius :< value>;

E.g. border-radius: 15px;

Text shadow

Syntax:text-shadow: <x-offset> <y-offset> <blur-radius> color;

E.g. text-shadow: 3px -4px 1px white;

Transition

Syntax:transition: <affected-property> <duration> <delay (before transition)>

<transition-acceleration>;

E.g. transition: background-color 2s 0s linear;

Opacity

Syntax:opacity: <value>; //opacity value between 0 and 1

E.g. opacity: .45;

Red Green Alpha:

Syntax:color: rgba([0-255], [0-255], [0-255], [0-1]);

E.g. div#box { background-color: rgba(0, 0, 255, 0.5)

Multiple Column

Syntax:column-count: 3;
column-rule: 1px solid #bbb;
column-gap: 1em;

nth Selector

Syntax:parent > child:nth-of-type(n) {css}

E.g. ul#menu li:nth-of-type(3) {background-color: red;}

Word Wrap

Syntax:word-wrap: (normal|break-word)

E.g.word-wrap: break-word;

Border color

Syntax:border: 4px solid black; border-colors: color1 color2 color3 color4;

E.g.border: 7px solid black; border-colors: purple navy blue lime yellow #f82 red;

Tranform 2D

Syntax:transform: scale([0-1]) rotate([0-360]deg) translate(XXpx, XXpx) skew([0-360]deg, [0-360]deg);transform-origin: X% X%;

E.g. div#box { transfom: scale(.5) rotate(45deg) skew(30deg 0deg);

CSS3 Framework:

CSS3 Action Framework:

Hosted on Google code CSS3 Library will gather all of the most excellent CSS3.0 special effects at one place. With several very amazing demos like of Google re-design, this frame-work is also meaning a shot.

The CSS3 action framework library based on:

1. user action pseudo-classes: hovor, active and
2. the target pseudo-classes: target

E.g.

1. Hover
2. Active
3. Target
4. All in one
5. Google CSS3 redesign

52framework:

Features like grid system, text-shadow, html5 markup, box-shaow, rounded corners, css reset are just a little list, and this 52framework is important look in CSS3.