CSS Hazır Basit Product Box Kodu(Transition Efektli)

Product Box'lar, E-Ticaret sitlerinde ürün kutusu olarak bilinen ve kategori sayfalarında ürünlerin gösterilmesi için kullanılan site elemanlarıdır. Kullanıcılar bu kutucuklardaki bilgilere bakarak ürünler hakkında özet bilgi edinirler. Tıkladıklarında ürün detay sayfasına yönlendirme yapar. Bazılarında sepete ekleme butonları ve çeşitli aksiyon elemanları bulunur. Bu örnekte temel seviyede bir ürün kutusu kodlaması yaptım. Basit kolay anlaşılır bir kodlar kullandım. Sadece hover etkisini basit transition ile daha şık yapmak için bir iki ufak CSS3 kodu kullandım. Kodlar aşağıdaki gibidir.

<style>

  .productBox {

    border: solid 1px #ddd;

    width: calc((100% - 10px)/4);

    min-width: 150px;

    min-height:340px;

    height: auto;

    display: block;

    font-family: Arial;

    float: left;

    margin: 5px;

    border-radius: 2%;

    -webkit-border-radius: 2%;

    -moz-border-radius: 2%;

    transition: all .5s;

    background: #fff;

  }

  .productBox:hover {

    border: solid 1px #ccc;

    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px 0px;

  }

  .productImg {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 5px auto;

  }

  .productBox a {

    text-decoration: none;

    color: #717171;

  }

  .productName {

    font-size: 0.8rem;

    padding: 5px 7px;

    margin: 0px auto;

    display: block;

  }

  .productBox a:hover .productName {

    color: #141414;

  }

  .productSku {

    font-size: 10px;

    margin: 0px auto;

    padding: 0 7px;

  }

  .productPrice {

    padding: 5px 7px;

    font-size: 1rem;

    font-weight: bold;

    color: #439e4a;

  }

  .productOldPrice {

    padding: 1px 7px;

    font-size: 0.7rem;

    text-decoration: line-through;

    color: #999;

  }

</style>

<div class="productBox">

  <a href="#" title="CSS hazır ürün kutusu">

    <div class="pictureBox">

      <img src="/css-hazir-basit-product-box.jpg" alt="Ürün Fotoğrafı" class="productImg" />

    </div>

    <span class="productSku"> SKU : FFF333ddDDD</span>

    <div class="productName">

      Lorem ipsum dolor sit amet, consectetur adipiscing elit

    </div>

    <div class="productOldPrice">

      29.999,89 <small>TL</small>

    </div>

    <div class="productPrice">

      19.999,89 <small>TL</small>

    </div>

  </a>

</div>

Bu kodların canlı hali,

SKU : FFF333ddDDD

Lorem ipsum dolor sit amet, consectetur adipiscing elit

29.999,89 TL

19.999,89 TL

 

İsterseniz bu kutucukları yan yana koyarak bir ürün vitrini oluşturabilirsiniz..

SKU : FFF333ddDDD

CSS Hazır ürün kutusu.

29.999,89 TL

19.999,89 TL

SKU : FFF333ddDDD

Kolay kullanılabilir. Hemen çalışmanıza ekleyebilirisiniz.

29.999,89 TL

19.999,89 TL

SKU : FFF333ddDDD

Elemanların float:left ile soldan sağa sıralandıklarına dikkat edin.

29.999,89 TL

19.999,89 TL

SKU : FFF333ddDDD

Float:left olmasının bir dez avantajı var. Ürün listesinden sonra gelen eleman, listenin en son elemanının sağına yerleşir.

29.999,89 TL

19.999,89 TL

SKU : FFF333ddDDD

Bunu önlemek için son elemandan sonra clear:both CSS kodunu içeren bir boş div kullanın.

29.999,89 TL

19.999,89 TL

SKU : FFF333ddDDD

Ürün kutularının boyları içeriğe göre değişiklik gösterir. Boyları eşitlemeniz lazım. Bu kutucukların boyları nasıl eşitlenecek? Bunu bir sonraki yazıda anlatacağım.

29.999,89 TL

19.999,89 TL

Saygılarımla...
Turgut ARSLAN