1stwebdesigner

Shine Bright like a Diamond: How to Create CSS3 Diamond Grids

Posted: 08 Jul 2014 06:00 AM PDT

CSS has come a long way. Creating of shapes using CSS3 alone without the use of images was made possible with its new properties. This enables developers and designers to experiment and do more with this basic shapes.

Creating a diamond shape using CSS is cool but how about combining diamonds to create a grid? Today’s tutorial will show you how to do CSS3 diamond grids.

Resource you need to complete this tutorial

Open Sans (Google Font)
Reset.css
Modernizr

Final Product

final-produce

Download Source Files View Demo

Folder Structure

folder-sturcute

For the file structure, this will include an index.html file and a CSS folder for the stylesheets.

index.html – this serves as our main file
CSS folder – for our stylesheets

Getting Started

Before you begin, first put the necessary files on the Head folder.This includes the stylesheets link, modernizr.js link and Google Font link.

  <!DOCTYPE html>  <html>  <head>              	<title>Creating Diamond Grid with CSS3</title>              	<meta charset="utf-8">              	<meta name="viewport" content="width=device-width, initial-scale=1.0">              	<link href="css/reset.css" rel="stylesheet">              	<link href="css/style.css" rel="stylesheet">              	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>              	<script src="js/modernizr.custom.87031.js"></script>              	</head>

The HTML

For the markup, use an unordered list for the diamonds and wrap everything under the class diamond-grid. Each diamond will have an anchor tag with a class diamond. And then for the text, wrap it in a div with a class text.

    <ul class="diamond-grid">          <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="http://www.1stwebdesigner.com/" target=              "_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>            <li>              <a class="diamond" href="#" target="_blank"></a>                <div class="text">                  Shine Bright like a Diamond              </div>          </li>      </ul>

With this markup, you'll get similar result like the image below.
html

The CSS

Before styling the diamonds, first give the body element a nice light green background.

  body {  	background: #3cddb9;  }

Next, style the diamond grid container. Give it a 1000px-width and center it to the screen.

  .diamond-grid {      width: 1000px;      margin: 0 auto;      padding-right: 10px;  }

Next, add some styles to the diamond. First float each diamond to the left and give necessary margins. Then, add some height and width to each individual square.

In order to create a diamond, you need to use the new CSS3 feature transform property to rotate the box 45 degrees off the screen. This will give you a nice diamond shape.

  ul li {  	list-style: none;  	float: left;  	margin-left: 66px;  	margin-top: 20px;  }    .diamond {  	height: 160px;  	width: 160px;  	background: transparent;  	color: #fff;  	display: block;  	overflow: hidden;  	position: relative;  	text-decoration: none;  	border: 3px solid #fff;  	-webkit-transform: rotate(45deg);  	-moz-transform: rotate(45deg);  	-ms-transform: rotate(45deg);  	-o-transform: rotate(45deg);  	transform: rotate(45deg);  }

Next, style the text inside the diamond. For this part of the code, center the text and then rotate it to -45 degrees to vertically align to the center of the diamond.

  .text {  	width: 170px;  	height: 170px;  	font-family: 'Open Sans', sans-serif;  	font-size: 13px;  	text-transform: uppercase;  	padding: 0 10px;  	display: table-cell;  	vertical-align: middle;  	-webkit-transform: rotate(-45deg);  	-moz-transform: rotate(-45deg);  	-ms-transform: rotate(-45deg);  	-o-transform: rotate(-45deg);  	transform: rotate(-45deg);  	text-align: center;  }

Now to create a perfect diamond grid, manipulate the margins to push the diamonds to each other. Using the CSS3 pseudo-selector nth-child, assign specific margins to each list item for the diamonds.

  .diamond-grid > li:nth-child(9n+6) {  	margin-left: 66px;  	margin-top: -6px;  }  .diamond-grid > li:nth-child(5) {  	margin-left: 182px;  }  .diamond-grid > li:nth-child(n+5) {  	margin-top: -51px;  }

Finally, to add creative hover effects, add hover state value on each individual diamonds using the code below.

  .diamond:hover {  	background: #fff;  	color: #3cddb9;  }

For a smooth delay on the hover effects, add a transition on each diamond. So go ahead and copy the code below to the class diamond.

  	-webkit-transition: color .35s linear;  	-moz-transition: color .35s linear;  	-o-transition: color .35s linear;  	transition: color .35s linear;

Wrapping Up

Awesome! You just created diamond grids with just CSS3.

A diamond is a perfect example to create grids; however, you can also try other shapes like polygons and use it on a team page to showcase each team members just like this site.

Although pure CSS3 was used to create diamond grids on this tutorial, there is a jQuery plugin called diamond.js that you can use to create the same effect easily.

Hope you enjoyed this tutorial and let me know what you think in the comment section. See you again next time!