Widodo

Membuat Grid Shop

Selamat siang teman-teman.

Udah beberapa hari ini s-widodo.com blm update karena disibukan oleh beberapa project kecil, oke untuk itu s-widodo.com akan memberikan sebuah tutorial lagi yaitu cara membuat sebuah grid shop menggunakan framework simplegrid  dan sedikit  css membuat efek dan hover-transition untuk yang lagi membuat sebuah web design tentang shop atau penjualan barang kali ini bisa dibuat contoh menampilkan produk-produknya dalam bentuk grid karna didalam sebuah web shop itu produk ditampilkan secara galery atau grid.

oke mungkin itu saya  yang bisa saya jelakan  untuk itu kita praktekkan bersama-sama..

1. Buatlah sebuah document baru

2. Jangan lupa download framework css simplegrid

3. Sekarang kita buat layout grid shopnya anda bisa menggunakan css dibawah ini

body {margin:0px; padding:0px;}
ul {list-style:none;}
li  {list-style:none;}
h2 {text-align:center; color:#eeeeee; font-family:Arial, Helvetica, sans-serif; font-size:30px;}
.header { background:#0099FF; color:#fff; height:30px; padding:5px; }
.product {min-height:300px; margin-bottom:20px; width:auto}
.product:hover {background:#3699DC;color:#ffffff!important;}
.container { margin: 0;
    padding: 0;
    height:250px;
    position: relative;
    display: block;
    overflow: hidden;}

	
.container img {width:100%; height:250px;}

.images-hover { opacity:0;
 background:rgba(255, 255, 255, 0.9) ;
  top: 0;
  display: none;
  height: 0;
  position: absolute;
  transition: height 100ms ease 0s;
  width: 100%;
  display: block;}
  
a .add-to-cart {color:#333; text-decoration:none;}
.add-to-cart {
opacity:0; 
bottom:0; 
height:30px;
display: none;
position: absolute; 
border: 0px none;
border-radius:1px; line-height:30px;
color:#999999;  background:#eee;
text-decoration:none; width:100px; font-weight:bold;
font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center;

}
.add-to-cart:hover{ background:#333; color:#fff;}


.descripsi { margin:0px; padding:5px;display:table;width:100%; font-family:Arial, Helvetica, sans-serif}
.descripsi h3 {font-size:17px; margin:auto; padding:4px; font-family:Arial, Helvetica, sans-serif; 
				text-align: left;}
.descripsi p {margin:0px; padding:0px; font-size:13px;}
.descripsi .price {float:right; font-size:14px;font-weight:bold; color:#444; padding:3px; margin:0px;}
.product:hover .images-hover {
  display:block; opacity:100;
  height:100%;
}
.product:hover .add-to-cart { margin:auto;
left:0;right:0;margin-left:auto;margin-right:auto;
  display:block; opacity:100;
  margin-bottom: 25px;
 
}

 

4. Sekarang kita tinggal memanggil cssnya dengan html seperti dibawah ini

<div class="grid grid-pad">
<ul>
<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>

<li class="col-1-4">
<div class="product">

<div class="container">
<img src="product4.jpg">
<div class="images-hover">
</div>
<a class="add-to-cart" href="#"><i class="icon-shopping-cart"></i> Add To Chart</a>
</div>

<div class="descripsi">
<h3> Popover Sweatshirt in Floral Jacquard</h3>
<p class="price"><i class="icon-usd"></i> 56</p>
</div>
</div>
</li>
</ul>
</div>
Catatan :
Silahkan gunakan font awesome untuk menampilkan icon.
Yang masih kesulitan silahkan download dibawah ini

Demo Download



0 Komentar