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 lupadownload framework csssimplegrid
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