10 CSS3 Features You Will Love and Want to Use

Even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced. CSS3 has taken a very large step forward in helping web developers get away from importing mass amounts of images/JavaScript and making it possible to do this only by using pure CSS. I am going to go over 10 CSS3 features you will love to start using!

Border Radius

This is a example with rounded corners!

Code for this example ↓


		#border_radius {
			background-color: #4b0a03; 
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			color: #fff;
			font-weight: bold;
			padding: 15px; 
			text-align: center;
			text-shadow: 1px 1px 1px #000;
		}

Border Image

This is a example with a border image!

Code for this example ↓


		#border_image {
			border-width: 0 10px;
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			-moz-border-image: url(../images/RButton.png) 0 12 0 12 stretch stretch;
			-webkit-border-image: url(../images/RButton.png) 0 12 0 12 stretch stretch;
			padding: 18px;
			text-align: center;
			text-shadow: 1px 1px 1px #000;
		}

Box Shadow

This box has a awesome drop shadow!

Code for this example ↓


		#box_shadow {
			background-color: #fff; 
			border: 1px solid #eee;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			-moz-box-shadow: 0 0 5px rgba(173, 173, 173, 0.55);
			-webkit-box-shadow: 0 0 5px rgba(173, 173, 173, 0.55);
			padding: 15px;
			text-align: center;
		}

Multi-Column Layout

Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. It offers a new way to arrange text in more of a "news paper" type way. You have the choice to pick the amount of columns, the column width, column gap width, and column separator. A feature like this was not possible before CSS3.

Code for this example ↓


		#multi-column {
			background-color: #fff; 
			border: 1px solid #eee;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px;
			/* For Mozilla: */
			-moz-column-gap: 1em;
			-moz-column-rule: 1px solid #000;
			-moz-column-count: 3;
			/* For WebKit: */
			-webkit-column-gap: 1em;
			-webkitcolumn-rule: 1px solid #000;
			-webkit-column-count: 3;
			padding: 15px;
		}

Multiple Backgrounds

Code for this example ↓


		#multiple_backgrounds {
			background: url(../images/bottom.png) bottom 117px no-repeat, 
						url(../images/top.png) top left no-repeat;
			margin-bottom: 10px;
			height: 47px;
			width: 254px;
		}

@font-face

This has a custom font.

Code for this example ↓


		@font-face {
			font-family: "MarketingScript";
			src: url(../font/MarketingScript.ttf) format("opentype");
		}

		#font-face {
			font-size: 34px;
			font-family: "MarketingScript", sans-serif;
		}

Attribute Selectors

Title with "a".
Title with "b".
Title with "a".
Title with "b".

Code for this example ↓


		li[title^=a] {
			background: #4b0a03;
			color: #fff;
			list-style: none;
			padding: 5px;
		}

		li[title^=b] {
			background: #fff;
			color: #333;
			list-style: none;
		}

:nth-child() and :nth-of-type()

First, Third and Fifth List Elements should be yellow.

Code for this example ↓


		#nth-child li:nth-child(2n+1) {
			background: #4b0a03;
			color: #fff;
		}

Opacity and RGBA

This is color #000000 with a transparency of 0.70

Code for this example ↓


			background: rgba(000, 000, 000, 0.7);
			padding: 20px;
			color:#fff;