CSS3 Click Chart by Impressive Webs

Example Syntax

#box-sizing {
	padding: 0 30px 0 30px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

CSS3 Box Sizing

Description: Allows you to change the way the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.

Browser Support: IE8+, Firefox 3+, Opera 9.6+, Chrome 2+, Safari 3.1+

W3C Info: CSS3 Box Sizing

Example Syntax

#border-radius {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

CSS3 Border Radius

Description: Creates rounded corners on boxes, allowing you to specify which corners are rounded.

Browser Support: IE9+, Firefox 3+, Chrome 4+, Safari 3.1+

W3C Info: CSS3 Border Radius

Example Syntax

#text-shadow {
	text-shadow: #555 4px 4px 4px;
}

CSS3 Drop Shadow

Description: Creates a drop-shadow effect on text.

Browser Support: Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+

W3C Info: CSS3 Text Shadows

Example Syntax

#box-shadow {
	-webkit-box-shadow: #244766 5px 5px 10px;
	-moz-box-shadow: #244766 10px 10px 10px;
	box-shadow: #244766 10px 10px 10px;
}

CSS3 Box Shadow

Description: Creates a drop-shadow effect on a box.

Browser Support: Firefox 3.5+, Chrome 2+, Safari 4+

W3C Info: CSS3 Box Shadow

Example Syntax

#rgba {
	background: rgba(98, 135, 167, .5);
}

CSS3 RGBA Colors

Description: Allows an alpha (transparency) value to be given, along with RGB.

Browser Support: Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+

W3C Info: CSS3 Colors, RGBA

Example Syntax

#columns {
	-webkit-column-count: 2;
	-webkit-column-width: 250px;
	-webkit-column-gap: 35px;
	-webkit-column-rule: 1px solid #6d94b4;
	-moz-column-count: 2;
	-moz-column-width: 240px;
	-moz-column-gap: 35px;
	-moz-column-rule: 1px solid #6d94b4;
	column-count: 2;
	column-width: 240px;
	column-gap: 35px;
	column-rule: 1px solid #6d94b4;
}

CSS3 Multiple Columns

Description: Allows the text in an element to be divided into colums, similar to newspaper layouts.

Browser Support: Firefox 3+, Chrome 2+, Safari 3.1+

W3C Info: CSS3 Multi-Column Layout

Example Syntax

#hsla {
	background: hsla(207,38%,47%,.8);
}

CSS3 HSLA Colors

Description: Allows colors to be set by Hue, Saturation, Lightness, and Alpha (transparency).

Browser Support: Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+

W3C Info: CSS3 HSLA Color Values

Example Syntax

#gradient {
		background-image: -moz-linear-gradient(top, #4477a1, #81a8cb); /* FF3.6 */
		background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Saf4+, Chrome */
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8 */
}

CSS3 Linear Gradients

Description: Allows creation of a linear gradient.

Browser Support: Firefox 3.6+, Chrome 2+, Safari 3.1+

(Note: The example code also includes proprietary filters for IE)

WebKit Info: CSS3 Gradients in WebKit

Gecko Info: CSS3 Linear Gradients in Firefox 3.6

Example Syntax

#radial {
		background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #cae0f2 10%, #4477a1 70%);
		background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#cae0f2), to(#4477a1));
}

CSS3 Radial Gradients

Description: Allows creation of a radial gradient.

Browser Support: Firefox 3.6+, Chrome 2+, Safari 3.1+

WebKit Info: CSS3 Gradients in WebKit

Gecko Info: CSS3 Radial Gradients

Example Syntax

#multi-bg {
	background: url(images/bg-cake.gif) center center no-repeat, url(images/bg-diamond.gif) top left repeat;
}

/* Below is for IE6-8 */
#multi-bg {
	background: transparent url(images/bg-diamond.gif) repeat top left;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-cake.gif', sizingMethod='crop');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-cake.gif', sizingMethod='crop')";
}

CSS3 Multiple Backgrounds

Description: Allows more than one background to be placed on a single HTML element.

Browser Support: Firefox 3.6+, Chrome 2+, Safari 3.1+

(Note: The example code also includes a hacky solution for IE6+)

W3C Info: CSS3 Backgrounds

Example Syntax

#stroke {
	-webkit-text-fill-color: #fff;
	-webkit-text-stroke-color: lightblue;
	-webkit-text-stroke-width: 2px;
}

CSS3 Text-Stroke

Description: Allows text to be stroked, or outlined.

Browser Support: Chrome, Safari

WebKit Info: CSS3 Text-Stroke

Example Syntax

#reflect {
	-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
}

CSS3 Box-Reflect

Description: Allows reflections of text or boxes, with even the hover effect being reflected, and does not affect layout.

Browser Support: Chrome, Safari

WebKit Info: CSS3 Reflections

Example Syntax

#rotation {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
}

CSS3 Transforms (Rotation)

Description: Allows elements to be rotated.

Browser Support: Chrome, Safari, Firefox 3.5+

W3C Info: CSS 2D Transforms

Example Syntax

#scale {
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-o-transform: scale(.8);
}

CSS3 Transforms (Scale)

Description: Allows elements to be scaled (enlarged or shrunk).

Browser Support: Chrome, Safari, Firefox 3.5+

W3C Info: CSS 2D Transforms

Example Syntax

#transition {
	-webkit-transition: -webkit-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
	-moz-transition: -moz-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
	-o-transition: -o-transform 1s ease-in-out, background-color linear 1s, color linear 1s;

}

#transition:hover {
	-webkit-transform: rotateZ(-20deg);
	-moz-transform: rotateZ(-20deg);
	-o-transform: rotateZ(-20deg);
	background-color: #aaa;
	color: #326895;
	cursor: pointer;
}

CSS3 Transitions

Description: Allows property changes in CSS values to occur in animations over a specified duration.

Browser Support: Chrome, Safari, Firefox 3.7+

W3C Info: CSS Transitions

Example Syntax

#border-image {
		border-width: 19px;
		-webkit-border-image: url(images/border-image.gif) 19 19 19 19 repeat;
		-moz-border-image: url(images/border-image.gif) 19 19 19 19 repeat;
		border-image: url(images/border-image.gif) 19 19 19 19 repeat; /* for Opera */
}

CSS3 Border Images

Description: Allows a repeating or stretched image to appear as the border of an element.

Browser Support: Chrome 2+, Safari 3.1+, Firefox 3.5+, Opera 10.5

W3C Info: CSS Border Image

Example Syntax

.example-textselect p::selection {
		background: #50bc6b; /* for WebKit & Opera */
}

.example-textselect p::-moz-selection {
		background: #50bc6b; /* for Firefox */
}

CSS3 ::selection Pseudo-Element

Description: Allows the ability to change text color or background color on selected text.

Browser Support: Chrome 2+, Safari 3.1+, Firefox 3.5+(?), Opera 9.5+

SitePoint Reference Info: CSS3 ::selection Pseudo-Element

NOTE: According to the CSS3 selectors spec, the ::selection pseudo-element has been removed, so the future of this selector is unknown.

Example Syntax

#offset {
	outline: solid 1px #fff;
	outline-offset: 5px;
}

CSS3 Outline Offset

Description: If an element has an outline property set, the outline can be offset by a specified number of pixels.

Browser Support: Chrome, Safari, Firefox 3.5+ (?), Opera 9.5+ (?)

W3C Info: CSS3 outline-offset property

Example Syntax

#resizing {
	width: 150px;
	height: 50px;
	overflow: hidden;
	resize: both; /* can be "horizontal", "vertical" or "both" */
}

CSS3 Resize

Description: Allows an element to be resized by the user vertically and/or horizontally using a bottom-right handle.

Browser Support: Chrome, Safari

W3C Info: CSS3 Resize Property

Example Syntax

#wordwrap {
	word-wrap: break-word;
}

CSS3 Word Wrap

Description: Tells an element to break a long string to a second line in order to avoid long links and long words from overflowing their parents' boundaries.

Browser Support: Chrome, Safari, Firefox 3.1+, Opera 9.5+ (?), Internet Explorer 6+

W3C Info: CSS3 word-wrap Property

Example Syntax

#bgsize {
	background: #6287a7 url(images/bg-berries.jpg) center center no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-khtml-background-size: 100% 100%; // for Konquerer
	background-size: 100% 100%;
}

CSS3 Background Size

Description: Allows an element's background image to be sized by pixels or percentage for both width and height, relative to the containing box.

Browser Support: Chrome, Safari, Firefox 3.6+

W3C Info: CSS3 background-size Property

CSS3 Click Chart by Impressive Webs

Some Example Stroked Text

Hover over this

Hover over this box

Example Syntax

CSS3 Box Sizing

Example Syntax

CSS3 Border Radius

Example Syntax

CSS3 Drop Shadow

Example Syntax

CSS3 Box Shadow

Example Syntax

CSS3 RGBA Colors

Example Syntax

CSS3 Multiple Columns

Example Syntax

CSS3 HSLA Colors

Example Syntax

CSS3 Linear Gradients

Example Syntax

CSS3 Radial Gradients

Example Syntax

CSS3 Multiple Backgrounds

Example Syntax

CSS3 Text-Stroke

Example Syntax

CSS3 Box-Reflect

Example Syntax

CSS3 Transforms (Rotation)

Example Syntax

CSS3 Transforms (Scale)

Example Syntax

CSS3 Transitions

Example Syntax

CSS3 Border Images

Example Syntax

CSS3 ::selection Pseudo-Element

Example Syntax

CSS3 Outline Offset

Example Syntax

CSS3 Resize

Example Syntax

CSS3 Word Wrap

Example Syntax

CSS3 Background Size