Sunday, November 7th, 2010

CSS 3 Basics

In this tutorial, let us see about some of the CSS3 features and the browsers supporting them.

Border Radius

-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;  

Compatibility

: 3.0 +
: 4.0 +
: 3.1 +
: 9 +
: 10.5 +

 

Box Resize

resize: both;/*other options : horizontal, vertical */
overflow: auto;

Compatibility

: 4.0 +
: 3.1 +

 

Box Shadow

-webkit-box-shadow: 2px 3px 4px #0d0c0d;
-moz-box-shadow: 2px 3px 4px #0d0c0d;
box-shadow: 2px 3px 4px #0d0c0d; 

Compatibility

: 3.5 +
: 4.0 +
: 3.1 +
: 10.5 +

 

Box Sizing

/*content-box by default */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; 

Compatibility

: 1.0 +
: 0.2 +
: 3.0 +
: 8 +
: 7 +

 

Font Face

To know more about bullet-proof concept by Paul Irish for font-face and its usage click here.

@font-face {
font-family: 'Garamond';
src: url('Garamond.eot');
src: local('☺'),
url('Garamond.woff') format('woff'),
url('Garamond.ttf') format('truetype');
}

Compatibility

: 3.5 +
: 4.0 +
: 3.2 +
: 9 +
: 10.1 +

 

Gradients

background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));

Compatibility

: 3.6 +
: 4.0 +
: 4.0 +

 

Multiple Columns

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

Compatibility

: 3.0 +
: 4.0 +
: 3.1 +

 

Outline

outline: 10px solid #302b30;
outline-offset: 20px; 

Compatibility

: 3.0 +
: 4.0 +
: 3.1 +
: 9 +
: 10.5 +

 

RGBA

background-color: rgba(200, 250, 130, 0.7);
color: rgba(200, 250, 130, 0.7);

Compatibility

: 3.0 +
: 4.0 +
: 3.1 +
: 10.0 +

 

Text Shadow

text-shadow: 2px 2px 4px #1f021f;
filter: dropshadow(color=#1f021f, offx=2, offy=2);

Compatibility

: 3.5 +
: 4.0 +
: 4.0 +
: 9.6 +

 

Transform

-moz-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
-webkit-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
-o-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
-ms-transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);
transform: scale(1) rotate(5deg) translate(20px, 20px) skew(5deg, 5deg);

Compatibility

: 3.5 +
: 3.0 +
: 3.2 +
: 10.5 +

 

Transition

-webkit-transition: all 10s ease-in;
-moz-transition: all 10s ease-in;
-o-transition: all 10s ease-in;
transition: all 10s ease-in;

Compatibility

: 4.0 +
: 3.0 +
: 3.2 +
: 10.5 +

 

Category: HTML/CSS
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.