Gradients in CSS3

You can create something as simple as the example below or as complex as displaying radial gradient circles positioned throughout your DIV. You can even create color stops similar to what is used within Photoshop anywhere you wish. The possibilities are endless.

The Code:


background-image:
     -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#999));

background-image:
     -moz-linear-gradient(100% 100% 90deg, #999, #eee);

an even shorter way for Mozilla:

background-image:
     -moz-linear-gradient(bottom, #999, #eee);

Multi-Column CSS3

Example of using multi column :

* column-count: The desired number of columns for the element.
* column-gap: The padding between each column.
* column-rule: The divider for each column; can be used to specify a border.
* column-width: Used to specifically state the width of each column.


#wrapper p {
				-webkit-column-count: 4;
				-webkit-column-gap: 10px;

				-moz-column-count: 4;
				-moz-column-gap: 10px;

				column-count: 3;
				column-gap: 10px;

				-webkit-column-rule: 1px dotted #fff;
				-moz-column-rule: 1px dotted #fff;
			}

View Demo

CSS3 Examples

1 CSS3 Transitions View Demo

a. Color Transition

.color-transition a{color: #e83119;font-size: 35px;text-transform: uppercase;}
.color-transition a:hover{color: #016dd2;}
.color-transition a{ -webkit-transition:color .4s ease-out;}

b. Border Transition

.border-nav{min-height: 120px;margin-top: 60px;}

.border-nav ul li{
	display: inline;
	list-style-type: none;}

.border-nav a{
	font-size: 22px;
	display: inline-block;
	margin: 0px 15px 0px 0px;
	text-decoration: none;
	float: left;
	border-bottom: 3px solid #e83119;
	-webkit-transition: border .3s ease-out;}

.border-nav a:hover{
	border-bottom: 50px solid #e83119;
	text-decoration: none; 
	color: #e83119;}

2: Background Clip View Demo

a. background-clip:text;

.bg-clip{
	background: url(../images/pat.png) repeat;
	margin-bottom: 60px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

b. Transform

.txt-rotate{
	background: url(../images/clipped_image.png) repeat;
	margin-bottom: 35px;margin-top: 0px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg);
	-o-transform: rotate (-5deg);}

3: CSS Transforms, Box Shadow and RGBa View Demo

.shadowed{
	margin-top: 30px;
	margin-bottom: 30px;
	border: 3px solid #fff;
	box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);}

.ontwerps1{  -o-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-webkit-transform: rotate(2.5deg);
	margin-bottom: -125px;}

.ontwerps2{  -o-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);}

.ontwerps3{  -o-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-webkit-transform: rotate(2.5deg)}

.ontwerps4{  -o-transform: rotate(-2.5deg);
	-moz-transform: rotate(-2.5deg);
	-webkit-transform: rotate(-2.5deg);
	margin-top: -40px;}

4: CSS3 Animations View Demo

a. Keyframe Animation

.circle_motion{
	-webkit-animation-name: track;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	}

@-webkit-keyframes track {
	0% {
		margin-top:0px;
	}
	25% {
		margin-top:150px;
	}
	50% {
		margin-top:150px;
		margin-left: 300px;
	}
	75% {
		margin-top:0px;
		margin-left: 300px;
	}
	100% {
		margin-left:0px;
	}
}


Download File View Demo

Multiple Backgrounds in CSS3

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Text Shadow in CSS3

Normal Shadow

Here is how to create a normal single color shadow with a slight blur.

The Code:

text-shadow: 1px 1px 2px #000;

Letter Press Effect

Here’s a quick example for pulling it off with text shadows.

The Code:

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Box Shadow in CSS3

Here is the basic use of the box shadow.

The Code:

-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;