Pinterest-Style Column Layout In Pure CSS


<div id="wrapper">
    <div id="columns">
    
        <figure>
        <img src="demo.jpg" alt>
        <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</figcaption>
        </figure> 

        <figure>
        <img src="demo_2.jpg" alt>
        <figcaption>caption goes here...</figcaption>
        </figure> 

        <figure>
        <img src="demo_3.jpg" alt>
        <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</figcaption>
        </figure> 
..................
        
    </div>
</div>  

<------------ CSS ------------>  
#wrapper {
        max-width:80%;
        margin: 0 auto;
    }
    #columns {
        column-gap: 15px;
        column-width: 220px;
        -moz-column-gap: 15px;
        -moz-column-width: 220px;
        -webkit-column-gap: 15px;
        -webkit-column-width: 220px;
        background: rgba(0, 0, 0, 0);
        font-family: Arial,sans-serif;
        padding: 15px;
        width: 100%;
    }    

    div#columns figure {
        background: none repeat scroll 0 0 #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        display: inline-block;
        margin: 0 2px 15px;
        padding: 15px 15px 10px;
        transition: all 0.4s ease-in-out 0s;
        text-align: center;
    }

    div#columns figure img {
        width: 100%; 
        height: auto;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 5px;
    }
    #columns figure figcaption {
        color: #444;
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
        text-align: left;
    }
Advertisements

Equal height columns using only CSS


<div class="page-container"> 
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.  
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,  
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,  
    dictum vitae mi. Donec sed bibendum ante. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.  
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,  
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,  
    dictum vitae mi. Donec sed bibendum ante.
    </div> 
   
    <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.
    </div> 
</div> 

.page-container { 
    display: table; 
} 
 
.content { 
    width: 450px;
    padding: 20px;
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #CCC; 
} 
 
.sidebar {
    width: 250px;
    padding: 20px;
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #999; 
} 

Shadow related CSS


BOX SHADOW:
————

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

BACKGROUND GRADIENT:
————

.background-gradient {
	background-color: #57839a;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#57839a, endColorstr=#58859d);
background-image: -moz-linear-gradient(left, #57839a 0%, #58859d 50%,#5a88a0 100%);
background-image: linear-gradient(left, #57839a 0%, #58859d 50%,#5a88a0 100%);
background-image: -webkit-linear-gradient(left, #57839a 0%, #58859d 50%,#5a88a0 100%);
background-image: -o-linear-gradient(left, #57839a 0%, #58859d 50%,#5a88a0 100%);
background-image: -ms-linear-gradient(left, #57839a 0%, #58859d 50%,#5a88a0 100%);
background-image: -webkit-gradient(linear, left center, right center, color-stop(0%,#57839a), color-stop(50%,#58859d),color-stop(100%,#5a88a0));
}

Background for different browser


background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top,  #f7f7f7 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f7f7f7 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f7f7f7 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f7f7f7 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(top,  #f7f7f7 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

How to use css image Sprites


CSS Sprites is a CSS technique to combine small images into one big image and then access them using the background-position property. It is used to save HTTP requests.

#container .background {
  background: url(/images/sprite-image.png) -xxpx -xxpx;
  width:  25px; /* width and height of the sprite image you want to display */
  height: 25px;
  position: absolute;
  top: 0;
  left: 0;
}