CSS3 Tutorial Examples




CSS3 linear gradients from top to bottom direction Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of Linear Gradients from Top to Bottom</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: blue;
            background: -webkit-linear-gradient(blue, yellow);
            background: -ms-linear-gradient(blue, yellow);
            background: linear-gradient(blue);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 linear gradients from left to right direction Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of Linear Gradients from Left to Right</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: green;
            background: -webkit-linear-gradient(left, green, yellow);
            background: -ms-linear-gradient(left, green, yellow);
            background: linear-gradient(to right, green, yellow);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html> 

Output

CSS3 linear gradients from left to right direction Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of Linear Gradients from Left to Right</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: green;
            background: -webkit-linear-gradient(left, green, yellow);
            background: -ms-linear-gradient(left, green, yellow);
            background: linear-gradient(to right, green, yellow);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html> 

Output

CSS3 linear gradients using multiple color stops Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of Setting Linear Gradients Direction Using Angles</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: orange;
            background: -webkit-linear-gradient(0deg, orange, yellow);
            background: -ms-linear-gradient(0deg, orange, yellow);
            background: linear-gradient(90deg, orange, yellow);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 Set the location of color stops while creating the gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of Setting the Color Stops Location</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: blue;
            background: -webkit-linear-gradient(blue, yellow 30%, lime 60%);
            background: -ms-linear-gradient(blue, yellow 30%, lime 60%);
            background: linear-gradient(blue, yellow 30%, lime 60%);
          }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 Repeating the linear gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Repeating the linear gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: blue;
            background: -webkit-repeating-linear-gradient(black, blue 10%, lime 20%);
            background: -ms-repeating-linear-gradient(black, blue 10%, lime 20%);
            background: repeating-linear-gradient(black, blue 10%, lime 20%);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html> 

Output

CSS3 radial gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 radial gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: red;
            background: -webkit-repeating-linear-gradient(black, red 10%, lime 20%);
            background: -ms-repeating-linear-gradient(black, red 10%, lime 20%);
            background: repeating-linear-gradient(black, red 10%, lime 20%);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 Set the shape of radial gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Set the shape of radial gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: red;
            background: -webkit-radial-gradient(circle, red, yellow, lime);
            background: -ms-radial-gradient(circle, red, yellow, lime);
            background: radial-gradient(circle, red, yellow, lime);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 Set the size of radial gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Set the size of radial gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: blue;
            background: -webkit-radial-gradient(left bottom, circle farthest-side, blue, yellow, lime);
            background: -ms-radial-gradient(left bottom, circle farthest-side, blue, yellow, lime);
            background: radial-gradient(circle farthest-side at left bottom, blue, yellow, lime);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 Set the size of radial gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Set the size of radial gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: blue;
            background: -webkit-radial-gradient(left bottom, circle farthest-side, blue, yellow, lime);
            background: -ms-radial-gradient(left bottom, circle farthest-side, blue, yellow, lime);
            background: radial-gradient(circle farthest-side at left bottom, blue, yellow, lime);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 Repeating the radial gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Repeating the radial gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: red;
            background: -webkit-repeating-radial-gradient(black, red 10%, lime 20%);
            background: -ms-repeating-radial-gradient(black, red 10%, lime 20%);
            background: repeating-radial-gradient(black, red 10%, lime 20%);
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html> 

Output

CSS3 Using transparency with gradients Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Using transparency with gradients Examples</title>
      <style type="text/css">      
         .gradient {
            width: 400px;
            height: 300px;
            background: url("css.gif");
            background: -webkit-linear-gradient(left, rgba(255,255,255,0),
            rgba(255,255,255,1)), url("css.gif");
            background: -ms-linear-gradient(left, rgba(255,255,255,0), 
            rgba(255,255,255,1)), url("css.gif");
            background: linear-gradient(to right, rgba(255,255,255,0), 
            rgba(255,255,255,1)), url("css.gif");
         }
      </style>
   </head>
   <body>
      <div class="gradient"></div>
   </body>
</html>

Output

CSS3 box shadow effect Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 box shadow effect Examples</title>
      <style type="text/css">      
         .box{
            width: 200px;
            height: 150px;
            background: red;
            box-shadow: 5px 5px 10px #999;
         }
      </style>
   </head>
   <body>
      <div class="box"></div>
   </body>
</html>

Output

CSS3 Adding multiple box shadows to an element's box Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Multiple Box Shadow Effects</title>
      <style type="text/css">      
         .box{
            width: 200px;
            height: 150px;
            background: #ccc;
            box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
         }
      </style>
   </head>
   <body>
      <div class="box"></div>
   </body>
</html>

Output

CSS3 text shadow effect Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of CSS3 Text Shadow Effect</title>
      <style type="text/css">      
          h1 {
            text-shadow: 5px 5px 10px #ccc;
         }
         h2 {
            text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
         }
      </style>
   </head>
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
   </body>
</html>

Output

CSS3 translate() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 translate() method Examples</title>
      <style type="text/css">
         img {
            -webkit-transform: translate(200px, 50px); 
           -moz-transform: translate(200px, 50px); 
           -ms-transform: translate(200px, 50px); 
            transform: translate(200px, 50px);    
         }
        .box{
            margin: 50px;
            width:153px;
            height:103px;
            background: url("css3.jpg") no-repeat;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <img src="css3.jpg" alt="CSS3">
      </div>
</body>
</html> 

Output

CSS3 Rotating the elements using the rotate() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 rotate() Method</title>
      <style type="text/css">
         img {
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg); 
            -ms-transform: rotate(30deg); 
            transform: rotate(30deg);     
         }
         .box{
            margin: 50px;
            width:120px;
            height:110px;
            background: url("css3.jpg") no-repeat;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <img src="css3.jpg" alt="CSS3">
      </div>
   </body>
</html>   

Output

CSS3 scale() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>Example of CSS3 scale() Method</title>
      <style type="text/css">
         img {
            -webkit-transform: scale(1.5); 
            -moz-transform: scale(1.5);  
            -ms-transform: scale(1.5);  
            transform: scale(1.5);  
            opacity: 0.5;
         }
         .box{
            margin: 50px;
            width:103px;
            height:130px;
            background: url("css3.jpg") no-repeat;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <img src="css3.jpg" alt="Octopus">
      </div>
   </body>
</html>                    

Output

CSS3 matrix() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 matrix() Method</title>
      <style type="text/css">
         img {
            -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);
            -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);
           -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  
            transform: matrix(0, -1, 1, 0, 200px, 50px); 
         }
         .box{
            margin: 50px;
            width: 108px;
            height: 136px;
            background: url("css3.jpg") no-repeat;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <img src="css3.jpg" alt="CSS3">
      </div>
   </body>
</html>

Output

CSS3 Multiple 2D Transformation Examples

<!DOCTYPE html>
<htmlgt;
   <head>
      <title>CSS3 Multiple 2D Transformation</title>
      <style type="text/css">
         img {
            -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); 
            -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) 
            -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); 
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);     
         }
         .box{
            margin: 50px;
            width: 108px;
            height: 136px;
            background: url("css3.jpg") no-repeat;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <img src="css3.jpg" alt="CSS3">
      </div>
   </body>
</html>                                    

Output

CSS3 translate3d() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 translate3d() Method</title>
      <style type="text/css">
         .container{
            width: 125px;
            height: 125px;
			   perspective: 500px;
            border: 4px solid #e5a043;
            background: #ccc;
            margin: 30px;
         }
         .transformed {
            -webkit-transform: translate3d(25px, 25px, 50px);
            transform: translate3d(25px, 25px, 50px);
         }
      </style>
   </head>
   <body>
      <h2>Before Translation:</h2>
      <div class="container">
         <img src="css3.jpg" alt="CSS3">
      </div>
      <h2>After Translation:</h2>
      <div class="container">
         <img src="css3.jpg" class="transformed" alt="CSS3">
      </div>
   </body>
</html>

Output

CSS3 rotate3d() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 rotate3d() Method</title>
      <style type="text/css">
         .container{
            margin: 50px;
            width: 125px;
            height: 125px;
            perspective: 300px;
            border: 4px solid #a2b058;
            background: red;
         }
         .transformed {
            -webkit-transform: rotate3d(0, 1, 0, 60deg);
            transform: rotate3d(0, 1, 0, 60deg);
         }
      </style>
   </head>
   <body>
      <h2>Before Rotation:</h2>
      <div class="container">
         <img src="css3.jpg" alt="CSS3">
      </div>
      <h2>After Rotation:</h2>
      <div class="container">
         <img src="css3.jpg" class="transformed" alt="CSS3">
      </div>
   </body>
</html>

Output

CSS3 scale3d() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 scale3d() Method</title>
      <style type="text/css">
         .container{
            margin: 50px;
            width: 125px;
            height: 125px;
            perspective: 300px;
            border: 4px solid #6486ab;
            background: #e9eef3;
         }
         .transformed {
            -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); 
            transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);  
         }
      </style>
   </head>
   <body>
      <h2>Before Scaling:</h2>
      <div class="container">
         <img src="css3.jpg" alt="CSS3">
      </div>
      <h2>After Scaling:</h2>
      <div class="container">
         <img src="css3.jpg" class="transformed" alt="CSS3">
      </div>
   </body>
</html> 

Output

CSS3 matrix3d() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 matrix3d() Method</title>
      <style type="text/css">
         .container{
            margin: 50px;
            width: 125px;
            height: 125px;
            perspective: 300px;
            border: 4px solid #d14e46;
            background: blue;
         }
         .transformed {
            -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951,
            0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
            transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951,
            0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); 
         }
      </style>
   </head>
   <body>
      <h2>Before Transform:</h2>
      <div class="container">
         <img src="css3.jpg" alt="CSS3">
      </div>
      <h2>After Transform:</h2>
      <div class="container">
         <img src="css3.jpg" class="transformed" alt="CSS3">
      </div>
   </body>
</html>

Output

CSS3 Multiple 3D Transformation Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Multiple 3D Transformation</title>
      <style type="text/css">
         .container{
            margin: 50px;
            width: 125px;
            height: 125px;
            perspective: 300px;
            border: 4px solid #d14e46;
            background: yellow;
         }
         .transformed {
            -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0,
            -60deg) scale3d(1, 1, 2);
            transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, 
            -60deg) scale3d(1, 1, 2); 
         }
      </style>
   </head>
   <body>
      <h2>Before Transform:</h2>
      <div class="container">
         <img src="css3.jpg" alt="CSS3">
      </div>
      <h2>After Transform:</h2>
      <div class="container">
         <img src="css3.jpg" class="transformed" alt="CSS3">
      </div>
   </body>
</html>

Output

CSS3 transition effect to background-color Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 transition effect to background-color Examples</title>
      <style type="text/css">
         button {
            color: #ccc;
            border: none;
            padding: 10px 20px;
            font: bold 18px sans-serif;
            background: red;
            -webkit-transition: background 2s; 
            transition: background 2s; 
         }
         button:hover {
            background: yellow;
         }
      </style>
   </head>
   <body>
      <button type="button">Hover on me</button>
   </body>
</html>

Output

CSS3 transition effect to multiple property Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 transition effect to multiple property Examples</title>
      <style type="text/css">
         button {
            color: #ccc;
            padding: 10px 20px;
            font: bold 18px sans-serif;
            background: blue;
            border: 3px solid #dc5801;
            -webkit-transition-property: background, border;
            -webkit-transition-duration: 1s, 2s;
            transition-property: background, border;
            transition-duration: 1s, 2s;
         }
         button:hover {
            background: #3cc16e;
            border-color: #288049;
         }
      </style>
   </head>
   <body>
      <button type="button">Hover on me</button>
   </body>
</html>

Output

CSS3 transition shorthand property Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 transition shorthand property Examples</title>
      <style type="text/css">
         button {
            color: #ccc;
            border: none;
            padding: 10px 20px;
            font: bold 18px sans-serif;
            background: #fd7c2a;
            -webkit-transition: background 2s ease-in 0s; 
            transition: background 2s ease-in 0s; 
         }
         button:hover {
            background: orange;
         }
      </style>
   </head>
   <body>
      <button type="button">Hover on me</button>
   </body>
</html>

Output

CSS3 Translate Animation Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Translate Animation Examples</title>
      <style type="text/css">
         .box {
            margin: 50px;
            width:153px;
            height:103px;
            background: url("css3.jpg") no-repeat;
            position: relative;
            -webkit-animation-name: moveit;
            -webkit-animation-duration: 2s;
            animation-name: moveit;
            animation-duration: 2s;
         }
         @-webkit-keyframes moveit {
            from {left: 0;}
            to {left: 50%;}
         }
         @keyframes moveit {
            from {left: 0;}
            to {left: 50%;}
         }
      </style>
   </head>
   <body>
      <p><strong>Note:</strong> Click the "Show Output"
       button to repeat the animation.</p>
      <div class="box"></div>
   </body>
</html>

Output

CSS3 Shake Animation Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Shake Animation Examples</title>
      <style type="text/css">
         .box {
            margin: 50px;
            width:120px;
            height:110px;
            background: url("css3.jpg") no-repeat;
            position: relative;
            left: 0;
            -webkit-animation-name: shakeit;
            -webkit-animation-duration: 2s;
            animation-name: shakeit;
            animation-duration: 2s;
         }
         @-webkit-keyframes shakeit {
            12.5% {left: -50px;}
            25% {left: 50px;}
            37.5% {left: -25px;}
            50% {left: 25px;}
            62.5% {left: -10px;}
           75% {left: 10px;}
         }
         @keyframes shakeit {
            12.5% {left: -50px;}
            25% {left: 50px;}
            37.5% {left: -25px;}
            50% {left: 25px;}
            62.5% {left: -10px;}
            75% {left: 10px;}
         }
      </style>
   </head>
   <body>
      <p><strong>Note:</strong> Click the "Show Output"
      button to repeat the animation.</p>
      <div class="box"></div>
   </body>
</html> 

Output

CSS3 Infinite Translate Animation Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 Infinite Translate Animation Examples</title>
      <style type="text/css">
         .box {
            margin: 50px;
            width:103px;
            height:130px;
            background: url("css3.jpg") no-repeat;
            position: relative;
            -webkit-animation: repeatit 2s linear 0s infinite alternate;
            animation: repeatit 2s linear 0s infinite alternate;
         }
         @-webkit-keyframes repeatit {
            from {left: 0;}
            to {left: 50%;}
         }
         @keyframes repeatit {
            from {left: 0;}
            to {left: 50%;}
         }
      </style>
   </head>
   <body>
      <div class="box"></div>
   </body>
</html> 

Output

CSS3 multi-column layouts Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 multi-column layouts Examples</title>
      <style type="text/css">
         p {
            -webkit-column-count: 3;  
            -moz-column-count: 3;  
            column-count: 3;  
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..</p>
   </body>
</html>

Output

CSS3 Set column count or width Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 multi-column layouts Examples</title>
      <style type="text/css">
         p {
            -webkit-column-width: 150px; 
            -moz-column-width: 150px;  
            column-width: 150px;  
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..</p>
   </body>
</html>

Output

CSS3 Set gap between the columns Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 multi-column layouts Examples</title>
      <style type="text/css">
         p {
            -webkit-column-count: 3;
            -webkit-column-gap: 100px;
            -moz-column-count: 3;
            -moz-column-gap: 100px;
            column-count: 3;
            column-gap: 100px;  
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..</p>
   </body>
</html>

Output

CSS3 Column Rules

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 multi-column layouts Examples</title>
      <style type="text/css">
         p {
            -webkit-column-count: 3;
            -webkit-column-gap: 100px;
            -webkit-column-rule: 2px solid red;
            -moz-column-count: 3;
            -moz-column-gap: 100px;
            -moz-column-rule: 2px solid red;
            column-count: 3;
            column-gap: 100px;
            column-rule: 2px solid red;  
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..</p>
   </body>
</html>

Output