Tutorial Membuat Diamond Grid Menggunakan CSS3

Untuk demo/preview hasillnya bisa dilihat disini

CSS sudah lama menemani para web designer untuk styling pada website, CSS3 memungkinkan kita membuat shape tanpa gambar dengan propertinya yang baru. Ini memungkingkan para web designer bereksperimen bahkan membuat shape biasa menjadi lebih bagus dan menarik.

diamond2

Membuat shape berbentuk berlian(diamond) memang keren, tapi bagaimana jika menggabungkan berlian tersebut menjadi sebuah grid? nah tutorial hari ini akan membahas tentang cara membuat diamond grid menggunakan CSS3. Oke langsung simak ya tutorial berikut ini.

HTML

Untuk markupnya, gunakan unordered list  <ol> untuk shape berlian dan wrap semuanya dalam class  diamond-grid. setiap berlian akan memiliki tag anchor  <a> dengan class  diamond, dan untuk teksnya, kita wrap dalam div dengan class  text.

<ul class="diamond-grid">
     <li>
         <a class="diamond" href="http://www.trustme.co.id/" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id/" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id/" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id/" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id" target="_blank"></a>
           <div class="text">
               Shine Bright like a Diamond
           </div>
     </li>
     <li>
         <a class="diamond" href="http://www.trustme.co.id" 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>

Dengan markup diatas, kalian akan mendapatkan hasil yang mirip seperti ini.

diamond

CSS

Sebelum melakukan styling pada shape berlian, pertama kita beri background berwarna biru elegan seperti logo TrustMe pada body hehe.

body {
    background: #087BBB;
}

Selanjutnya, berikan style pada class  diamond-grid dengan 1000px width dan posisi tengah dari layar

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

Selanjutnya, tambahkan beberapa style pada diamond. Pertama buat setiap diamond float left dan berikan margin. Kemudian, tambahkan beberapa height dan width pada setiap diamond.

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);
}

Selanjutnya, style text di dalam diamond. Untuk ini, posisikan teks ke tengah dan putar dengan -45 derajat vertikal selaras dengan bagian tengah berlian.

.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;
}

Sekarang untuk membuat diamond grid yang sempurna, manipulasi margin untuk mendorong diamond satu sama lain. Menggunakan CSS3 pseudo-selector  nth-child, untuk menetapkan margin khusus untuk setiap diamond.

.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;
}

Terakhir, untuk menambahkan efek hover, tambahkan  :hover pada setiap diamond dengan code dibawah ini.

.diamond:hover {
    background: #fff;
    color: #087BBB;
}

untuk membuat efek hover menjadi smooth dengan delay, tambahkan transition di setiap diamond. copy code di bawah ini pada class  diamond.

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

Dan selamat kalian telah berhasil membuat diamond grid hanya dengan CSS3.

Biasanya diamond grid ini dipakai pada halaman team untuk menampilkan masing-masing anggota tim.

Untuk demo/preview hasillnya bisa dilihat disini

Sekian tutorial membuat diamond grid menggunakan CSS3, semoga artikel ini dapat membantu kalian. Terima kasih..

Comments

comments