CSS3 ? It's the future of our CSS2.1.
Nowadays, more and more browsers already support some CSS3 elements.
Whereas they are not yet official, they are already quite common everywhere, especially on this web site :-).
Because not every browser is supporting the sames CSS3 properties, it's not easy to know which property is supported by everyone of them. That's the reason I made this : I want to list most of CSS3 properties in order to have a live-view of the support progress.
All you need is to open this web-page with different browsers and you will directly see if it is supported or not.
Each property is described as following :
If there are some CSS3 properties that are not listed and that you would see here, please, let met know.
For each property, I use all of those prefixes :
NOTE : historically, the Webkit rendering-engine is based upon the Khtml engine.
It's not a wonder if a -khtml- property works also in a browser that uses Webkit, like Chrome or Safari.
Those are well-used on this whole web site. They allow you to have… Rounded corners !
border-radius: <value>;
Same radius on the 4 corners :
border-radius: 15px;
Only one corner have a rounded corner :
border-top-left-radius: 15px;
Different radius on each corner :
border-radius: 10px 20px 30px 40px
Elliptical design for one corner :
border-top-left-radius: 10px / 20px;
Elliptical design for four corners :
border-radius: 10px 20px 30px 40px / 4px 8px 12px 16px;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
Those made some shadow on text. It's very beautiful.
text-shadow: <x-offset> <y-offset> <blur-radius> color;
One shadow :
text-shadow: 3px -4px 1px white;
Multiple shadows :
text-shadow: 1px -2px 1px yellow, -1px -4px 1px lime, 1px -6px 1px green, -1px -8px 1px aqua;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
It makes one or more shadows on a box (a whole HTML block).
box-shadow: <x-offset> <y-offset> <blur-radius> color;
One shadow :
box-shadow: 10px 5px 8px white;
Multiple shadows :
box-shadow: 0px 7px 8px yellow, 0px -7px 8px red, 7px 0px 8px lime, -7px 0px 8px blue;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
This bring an important possibility to CSS : time. With this, you can, for example, gradually change background color from red to blue, or change sizes of boxes smoothly on a hover. It's a very powerful effect.
You can use it one many CSS properties : background-color, color, text-shadow… But also on width and height, which is very interesting.
transition: <affected-property> <duration> <delay (before transition)> <transition-acceleration>;
Transition on background color :
transition: background-color 2s 0s linear;
Accelerations types are : linear, ease, ease-in, ease-out and ease-in-out ; (there is also an other one : cubic-bezier(x, x, x, x), which allows you to create your own function).
Multiple transitions are also possible :
transition: background-color 2s 0s linear, color 1s 1s ease-in;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
(no image, I need to make an animated gif…) |
Official | With browser prefixes | Reference image |
Opacity is not to be confused with transparent color (rgba).
Opacity rules a box and his content transparency. If your box is 50% opaque, the text and the images inside the box will be too.
opacity: <value>;
Where "value" is a value between 0 and 1.
a 45% opacity :
opacity: .45;
![]() Ipsum Dolor |
![]() Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
This adds an alpha-layer on your colors (border, shadow, background, text…), only the color and not the content will appearing to be transparent.
color: rgba([0-255], [0-255], [0-255], [0-1]);
a div#box with a semi-transparent blue background :
div#box { background-color: rgba(0, 0, 255, 0.5)
![]() Ipsum Dolor |
![]() Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
Another beautiful property, witch makes a border from images.
For this, the image needs to have a particular format. For some distance "a" the image needs to be "3 × a" wide. The first "a" will be the background of the first corner, the second will be the background of a whole side and the last will be the background of the second corner. Here, I made an image to explain this. The only image you need to create, is what you see in the middle (here is the one I used below). You can see the "a" distance.
border-image: url(<image>) <split-distance> (round|stretch) (round|stretch);
Of course, "split-distance" here, is what I called "a" before. By testing and changing the "a" distance in CSS with the same image, you'll be fixed to know how it works.
Round makes the border get the motif repeat, and stretch makes it… Stretch !
border-image: url(image.png) round round;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
CSS3 now supports more than one image as background of one only box.
The syntax is very easy : just separate the backgrounds by commas.
background: url(image) <position> <repeat>, url(image2) <position> <repeat>;
background: url(left_bg.png) top left repeat-y, url(center_bg.png) center repeat-y, url(right_bg.png) top right repeat-y;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
This great property, is one of the most interesting property.
It transforms the position and the shape of HTML elements. You can rotate, scale or even translate elements (combine it with a :hover effect and some transition and you don't need flash or JS anymore !
Each kind of transformation can be used separately, but I give them all here.
transform: scale([0-1]) rotate([0-360]deg) translate(XXpx, XXpx) skew([0-360]deg, [0-360]deg);
transform-origin: X% X%;
a div#box with a becoming a parallelogram and turned 45degrees to the left, it will be 75% his previous own size :
div#box { transform: scale(.5) rotate(45deg) skew(30deg 0deg);
And what's so amazing, is that the text still stay text (witch is not the case of PHP images with text in it), so you can still select the text.
![]() Ipsum Dolor |
![]() Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
Border color allows you to choose one color. Now, border colors allows you to choose many color, each of then will be one pixel wide.
So it are simple "multiple borders" of one pixel each.
border: 4px solid black; border-colors: color1 color2 color3 color4;
You see, first we need to declare border with a specific width, then each pixel of the width is colored in different colors.
border: 7px solid black; border-colors: purple navy blue lime yellow #f82 red;
Lorem Ipsum Dolor |
Lorem Ipsum Dolor |
|
Official | With browser prefixes | Reference image |
This CSS3 element gives multiple colums to a paragraphe. The effect is the same as in a newspaper. The text lines are shorter and more readeable.
column-count: 3; column-rule: 1px solid #bbb; column-gap: 1em;
Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est , qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? |
Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est , qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? |
|
Official | With browser prefixes | Reference image |
With the nth-of-type selector, you can aim a child element specificaly. For example, if you have a div with 10 paragraphs, you can aim the seventh or the fifth with one line of CSS.
parent > child:nth-of-type(n) { css }
ul#menu li:nth-of-type(3) { background-color: red; }
This will set a red background to the third list element of your ul#menu
Instead of a number, you can also give some keywords odd/even and even a mathematical function like 3n (will aim on child element out of 3) or 2n+1 (same effect as "odd").
|
|
Official | Reference image |
When you have a small column with a very long word inside, it can happen that the column is disformed, what can destroy your whole page desing.
Thanks to this word-wrap proprety, you can decide how those long word will appear : they can be normal or broken on to lines, to avoid they overflows out of the box.
word-wrap: (normal|break-word)
word-wrap: break-word;
This will make a long word will break on two (or more) lines if the shoud normally get out of it.
Graecis express asnoninvitilegantquisenimtamini nomini Romano est? Graecis express asnoninvitilegantquisenimtamini nomini Romano est? |
Graecis express asnoninvitilegantquisenimtamini nomini Romano est? Graecis express asnoninvitilegantquisenimtamini nomini Romano est? |
|
Official | With browser prefixes | Reference image |
Those are computed backgrounds where, for example, the color fades from one to another. In the futur, they could replace some background images
linear-gradient(<top|left|bottom|right|(angle)>, color1 begin-distance1, color2 begin-distance2, …)
The "begin-distance" is the distance for the gradient to begin. Before the full color is used, after, the gradient starts.
background: linear-gradient(top, red 0%, rgba(0,255,255, .6) 100%);
background: linear-gradient(left, red 0%, rgba(0,255,255, .6) 100%);
background: linear-gradient(45deg, red 0%, rgba(0,255,255, .6) 100%);
background: linear-gradient(top, navy 7%, blue 21%, green 35%, yellow 49%, orange 63%, red 77%, purple 93%);
Official | With browser prefixes | Reference image |
Another amazing CSS3 property, besides transtion, is animation.
You can make animations, that stays in time. One animation can even be repeated once, twice or many time. Even an infinite times.
animation: animName 3s 5 ease-in-out alternate;
@keyframes animName { 0% { color: 1px 1px 2px #00f } 20% { color: 1px 1px 2px #7f7 } 40% { color: 1px 1px 2px #ffa } 60% { color: 1px 1px 2px #faa } 80% { color: 1px 1px 2px #fdf } 100% { color: 1px 1px 2px #adf } }
Where :
Official | With browser prefixes | Reference image |
Created in May 2010
Last update : 01-12-2013.