Browser support: IE 10+ and Opera.
IE 9 and older versions doesn’t support this property.
add -webkit- for safari and chrome.
add -moz- for firefox.

.multicolumn_layout
{
-moz-column-count:3; /*To support Firefox */
-webkit-column-count:3; /*To support Chrome and Safari*/
column-count:3;
}
    

.column_gap{
	-moz-column-count:3; /*To support Firefox */
	-webkit-column-count:3; /*To support Chrome and Safari*/
	column-count:3;
	-moz-column-gap:30px; /*To support Firefox */
	-webkit-column-gap:30px; /* To support Chrome and Safari */
	column-gap:30px;
    }    
    

   .column_rule{
	-webkit-column-rule: 1px solid #CCCCCC; /*To support Chrome and Safari*/
	-moz-column-rule: 1px solid #CCCCCC;/*To support Firefox */
	column-rule: 1px solid #CCCCCC;
	-moz-column-count:3; /*To support Firefox */
	-webkit-column-count:3; /*To support Chrome and Safari*/
	column-count:3;
	}
   

For example: If our element’s width is 400px.The column gap is 20px and column width is 140px.
400px – 20px =380px/140px = 2.7
The browser can fit 2 columns by utilizing the space provided even if the column count is 3, as there is not enough space for a third column.

    .column_width{
	column-width:140px;
	-moz-column-width:140px; /*To support Firefox */
	-webkit-column-width:140px; /*To support Safari and Chrome */
	}
    

    .column_property{
	columns:120px 3;
	-webkit-columns:120px 3; /*To support Safari and Chrome */
	-moz-columns:120px 3; /*To support Firefox */
	border: 1px solid #d8d8d8;
}
    

On this property, effect take place in an element smoothly over a given time period. Specifying duration is compulsory to see the effect. We need to specify transition-property, transition-duration, transition-timing-function and finally transition-delay.

Web designers can easily provide beautiful effects with the help of transition withoutusing jquery.

Browser support: Firefox, Chrome, Opera, IE10+, and Safari. Add prefix -webkit- for chrome 25 and its earlier versions and safari.
Add prefix -moz- for firefox.
Add prefix -ms- for IE.

1. Transition-properties: Lists the properties which you need to be transitioned. Some properties which can be trasitioned are border, font-size, background-color, line-height, letter spacing etc. Whole list of the properties is mentioned on the w3c website.

   .div
   { 
   border-radius:90px; 
   width:120px; 
   height:120px; 
   background:#F60;
   }
   .div:hover
   { 
   width:150px;
   height:150px;
   transition-property:width;
   -webkit-transition-property: width, height; /* Safari */
   -moz-transition-property: width, height; /* Firefox 4 */
   -o-transition-property:width, height; /* Opera */
   transition-duration: 3s;
   -webkit-transition-duration: 3s; /* Safari */
   }
   

   hover

   Here transition property is applies to width and height.

2. Transition-duration: This sets the time or the duration of the effect.
3. Transition-timing-function: Six options are available in this function. Ease, ease-in, ease-out, linear, ease-in-out and cubic-bezier. By default ease is selected. You can use cubic bezier if you are looking for very fine effect. It helps you to choose your own value for the effect.
   1. Linear: Animation carries same speed from start to an end.
      Linear
   2. Ease: Speed is fast in the begining and slow down at the end.
      Ease
   3. Ease-out: Ease-out is quite similar to the ease. But it is slower in beginning in comparison to ease.
      Ease-out
   4. Ease-in: Ease-in gives the smooth effect to the animation.
      Ease-in
   5. Ease-in-out: Speed of an animation is slow in the beginning and at the end.
      Ease-in-out
   6. Cubic-bezier: The function can be customized by using the values of your own.
      Cubic-bezier
4. transition-delay: This function sets the time before animation begins.

   .div
   {
   position:absolute;
   left:0;
   opacity: 1;
   transition: opacity 2s ease-in 2s;
   -o-transition: opacity 2s ease-in  2s;
   -webkit-transition: opacity 2s ease-in 2s;
   -moz-transition: opacity 2s ease-in 2s;
   -ms-transition: opacity 2s ease-in 2s;				
   }
   

   
   

   In the above example image fading starts after 2 seconds.

Add prefix -ms- for IE9.

1. Translate: We need to specify two values in translate function. The first value is the x axis and the second value is the y axis. This property helps us to move the element in any direction without affecting the flow of the document.
   

   .div{
   	transform:translate(110px,45px);
           -webkit-transform:translate(110px,45px); /* Safari and Chrome */
           -ms-transform:translate(110px,45px); /* TO SUPPORT INTERNET EXPLORER 9 */	
   	background:#00CC66;
   	width:100px;
   	height:100px;
   	}

2. Rotate: The rotate transform function helps us to rotate a div. The positive value will rotate it in a clockwise direction and the negative value will rotate it in an anti clockwise direction. Values are mentioned in degrees.
   

   .div{
   	transform: rotate(50deg);
           -webkit-transform: rotate(50deg); /* Safari and Chrome */
           -ms-transform: rotate(50deg); /* TO SUPPORT INTERNET EXPLORER 9 */	
   	background:#00CC66;
   	width:100px;
   	height:100px;
   	}

3. Scale: This method is used to scale an element. We can easily increase or decrease the size of an old div to the new div. The first value is the x axis and the second value is the y axis.
   

   .div{
   	transform: scale(1.5,1.5);
           -webkit-transform: scale(1.5,1.5); /* Safari and Chrome */
           -ms-transform: scale(1.5,1.5); /* TO SUPPORT INTERNET EXPLORER 9 */	
   	background:#00CC66;
   	width:100px;
   	height:100px;
   	}

4. Skew: The skew function bends the element. The first value specifies the skew on x axis and the second value specifies the skew on the y axis.
   

   .div{
   	transform: skew(20deg, 20deg);
           -webkit-transform: skew(20deg, 20deg); /* Safari and Chrome */
           -ms-transform: skew(20deg, 20deg); /* TO SUPPORT INTERNET EXPLORER 9 */	
   	background:#00CC66;
   	width:100px;
   	height:100px;
   	}

5. Matrix: It is the combination of all the above methods. As the name suggests, values are in the matrix format which helps us to skew, rotate, scale and transform the element.
   
   

   .div{
   	transform: skew(20deg, 20deg);
           -webkit-transform: skew(20deg, 20deg); /* Safari and Chrome */
           -ms-transform: skew(20deg, 20deg); /* TO SUPPORT INTERNET EXPLORER 9 */	
   	background:#00CC66;
   	width:100px;
   	height:100px;
   	}

1. background-size
2. background-origin

1. contain: The Image is resized so it fits the container or we can say that the image is resized in such a way that its width and height(the bigger one) will not exceed the container’s dimensions. Note: original size of the image is 400px x 400px.

         .div{
              background:url(phpmind-background-size-image.jpg);
   	   background-size: contain;
   	   background-repeat:no-repeat;
   	   width: 600px;
              height:300px;
   	   border:1px solid #999;
              }
2. cover: The keyword “cover” is also accepted by the background-size property. The image is resized in such a way that either its width and height (the smaller one) covers the whole container but the image could be cropped if the image has a different aspect ratio.

              .div{
   		background:url(phpmind-background-size-image.jpg);
   		background-size: cover;
   		background-repeat:no-repeat;
   		width:	600px;
   		height:300px;
   		border:1px solid #999;
   		}
3. length: It helps us to define the width and height of the background image. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to “auto”.

               .div{
              	background:url(phpmind-background-size-image.jpg);
   		background-size:200px;
   		background-repeat:no-repeat;
   		width:	500px;
   		height:300px;
   		border:1px solid #999;
            	}
4. percentage: If the value is given in percentage then the size of the background image is relative to the parent element. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to “auto”.eg: If the width and height of the background-size is set to 80% 50% respectively then the image will cover 80% width and 50% height of the parent element.

               .div{
              	background:url(phpmind-background-size-image.jpg);
   		background-size:80% 50%;
   		background-repeat:no-repeat;
   		width:	500px;
   		height:300px;
   		border:1px solid #999;
            	 }

Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.

1. content-box:  The background image will be placed under the content div or It is relative to the content box.

               .div{
              	background:url(phpmind-background-origin.jpg);
   		background-origin: content-box;
   		background-repeat: no-repeat;
   		width:	300px;
   		height:300px;
   		padding:20px;
   		border:10px dotted #39C;
            	   }
2. padding-box:  The background image position is relative to the defined padding. The background image will cover the padding area also.

               .div{
              	background:url(phpmind-background-origin.jpg);
   		background-origin: padding-box;
   		background-repeat: no-repeat;
   		width:	300px;
   		height:300px;
   		padding:20px;
   		border:10px dotted #39C;
            	   }
3. border-box:  The background image position is relative to the border of the element.

               .div{
                    background:url(phpmind-background-origin.jpg);
   	         background-origin: border-box;
   		background-repeat: no-repeat;
   		width:	300px;
   		height:300px;
   		padding:20px;
   		border:10px dotted #39C;
            	   }

Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.

            .div{
                 background:#9CC;
		background-clip: content-box;/*padding-box, border-box or content-box as per need*/
		background-repeat: no-repeat;
		width:	100px;
		height:100px;
		padding:20px;
		border:10px dotted #39C;
		float:left;
         	}

Browser support: Firefox, IE9+, Chrome, Opera and Safari.

1. text-shadow
2. word-wrap

     p{
     	font-family:Verdana, Geneva, sans-serif;
		font-size:24px;
		font-weight:bold;
		color:#006600;
		text-align:justify;
		text-shadow: 4px 4px 7px #009900;
  	   }

     div{
     	 background:#EFEFEF;
         border: 1px solid #999999;
         color: #333333;
         padding: 10px;
         width: 200px;
         word-wrap: break-word;
  	 }

This word is very longgggggggggggggggggggggggggggggggggggggggggggggggggg to fit in a div. We can break it by using word-wrap property.

1. border-radius
2. box-shadow
3. border-image

   		div{
			border:3px solid #666666;
			padding:10px auto; 
			background:#73C22D;
			width:350px;
			border-radius:30px;
			}

1. The first value represents the horizontal offset of the shadow (x-axis). If the value is positive the shadow is drawn to the right side of the element, If negative the shadow is drawn to the left of the element.
2. The second value represents the vertical offset of the shadow (y-axis). If the value is positive the shadow is drawn below the element, if negative it is drawn above.
3. The third value (optional) represents the blur radius. This value defines how big and how much blurred the shadow is. The larger the value, the more the shadow’s edge is blurred. Negative values are not allowed.
4. The fourth value (optional) represents the spread distance of the shadow. Positive value expands the shadow in all directions while a negative value shrink the shadow.
5. This value (optional) allows designers to set the color of an element.
6. The keyword inset (optional) is used to define the outer and inner box-shadows.

   		div{
			border:3px solid #a1a1a1;
			padding:10px auto; 
			background:#ccc;
			width:350px;
			box-shadow: 5px 5px 8px 10px #666666 inset;
			}

This property is compatible with all modern browsers. But to maintain compatibility with old browser it is suggested to add prefix -moz- for mozilla, -webkit- for safari.and -o- for opera.

   		div{
			background: #FF6;
			padding: 10px 5px;
			width: 450px;
			border:20px solid transparent;
			border-image: url(phpmind-border-image-eg.png) 30 30 round;
			}