Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!
If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:
* Mozilla/Firefox/Gecko: -moz-
* Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)
As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.
A Note About Demos on This Page
The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.
Drop Shadows
The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.
box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
Gradients
Gradients can be pretty confusing at first, especially when comparing the differences between -moz and -webkit. With -moz you first define the direction of the gradient, then determine the starting and ending color. -webkit gradients take a little more code. First you define the type of gradient. The next two values define the direction. Finally, the last two values define the starting and ending color of the gradient.
-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));
RGBA
The RGBA color method is actually easier than it may look at first. It takes four values, and in order they are: the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) color, you set the color in RGB mode, while the level of opacity can give the color a transparent look. The opacity accepts values between 0 and 1, with 0 being fully opaque and 1 being the actual defined color. The example below has an opacity value of .5, causing the element to be 50% transparent. rgba doesn’t actually require any of the browser extensions.
background-color: rgba(0, 54, 105, .5);
HSL
Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones. In this color model, HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel, while Saturation and Lightness are percentage values of the colors.
background-color: hsl(209,41.2%, 20.6%);
Border Color
With this style, you must define border-top, border-right, border-bottom, and border-left separately to get the effect below. You will notice that I have defined an 8px border along with 8 different colors for each border color style. That’s because the same amount of colors needs to match the amount of pixels in the border definition.
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
Text Selection Color
I have to say I think that changing the text selection color is a pretty exciting new feature. I first saw this on css-tricks and thought it was pretty sweet. With the ::selection pseudo-element, you can change the color and background when the user highlights a text element. Pretty nifty if you ask me. ::selection was removed form the current CSS3 draft, but lets hope they add it back in later!
::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}
Transform
With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size. On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15)
Multi-column Layout
With this new multi-column layout style, we can give our text a “newspaper” type look. This is very simple to implament compared to the normal way of doing this through CSS. Below I specified how many columns I want, what type of rule I want to seperate them, and how big of a gap I want between the columns. Simple huh?
-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;
Source : http://sixrevisions.com/css/css3-techniques-you-should-know/
If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:
* Mozilla/Firefox/Gecko: -moz-
* Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)
As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.
A Note About Demos on This Page
The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.
Drop Shadows
The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.
box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
Gradients
Gradients can be pretty confusing at first, especially when comparing the differences between -moz and -webkit. With -moz you first define the direction of the gradient, then determine the starting and ending color. -webkit gradients take a little more code. First you define the type of gradient. The next two values define the direction. Finally, the last two values define the starting and ending color of the gradient.
-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));
RGBA
The RGBA color method is actually easier than it may look at first. It takes four values, and in order they are: the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) color, you set the color in RGB mode, while the level of opacity can give the color a transparent look. The opacity accepts values between 0 and 1, with 0 being fully opaque and 1 being the actual defined color. The example below has an opacity value of .5, causing the element to be 50% transparent. rgba doesn’t actually require any of the browser extensions.
background-color: rgba(0, 54, 105, .5);
HSL
Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones. In this color model, HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel, while Saturation and Lightness are percentage values of the colors.
background-color: hsl(209,41.2%, 20.6%);
Border Color
With this style, you must define border-top, border-right, border-bottom, and border-left separately to get the effect below. You will notice that I have defined an 8px border along with 8 different colors for each border color style. That’s because the same amount of colors needs to match the amount of pixels in the border definition.
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
Text Selection Color
I have to say I think that changing the text selection color is a pretty exciting new feature. I first saw this on css-tricks and thought it was pretty sweet. With the ::selection pseudo-element, you can change the color and background when the user highlights a text element. Pretty nifty if you ask me. ::selection was removed form the current CSS3 draft, but lets hope they add it back in later!
::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}
Transform
With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size. On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15)
Multi-column Layout
With this new multi-column layout style, we can give our text a “newspaper” type look. This is very simple to implament compared to the normal way of doing this through CSS. Below I specified how many columns I want, what type of rule I want to seperate them, and how big of a gap I want between the columns. Simple huh?
-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;
Source : http://sixrevisions.com/css/css3-techniques-you-should-know/
