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,




Ürün Fotoğrafı
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..
Ürün Fotoğrafı
SKU : FFF333ddDDD
CSS Hazır ürün kutusu.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Kolay kullanılabilir. Hemen çalışmanıza ekleyebilirisiniz.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
SKU : FFF333ddDDD
Elemanların float:left ile soldan sağa sıralandıklarına dikkat edin.
29.999,89 TL
19.999,89 TL
Ürün Fotoğrafı
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
Ürün Fotoğrafı
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
Ürün Fotoğrafı
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

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Javascript Kopyalama Kodu

Javascript HTML İçerik Kopyalama Kodu Bu aşağıdaki becerikli kod id'si kopya olan HTML elemanının tüm içeriğini panoya kopyalar. Yani copy to clipboard denilen işlemi yapar. . function CopyToClipboard(kopya) {         if (document.selection) {             var range = document.body.createTextRange();             range.moveToElementText(document.getElementById("kopya"));             range.select().createTextRange();             document.execCommand("copy");         } else if (window.getSelection) {             var range = document.createRange();             range.selectNode(document.getElementById("kopya"));             window.getSelection().addRange(range);             document.execCommand("copy");             alert("Panoya Kopyalandı")         }     } Javascript ile web sayfasındaki bir metni tıklandığı zaman clipboarda kopyalamak mümkün. aşağıdaki butona tıkladığınızda, bu metin panoya kopyalanır. İstediğiniz y
Devamı

Javascript ile veriyi bir alt satıra nasıl yazdırabiliriz?

Javascript ile veriyi bir alt satıra nasıl yazdırabiliriz? HTML dilinde bir alt satıra geçmek için ya da şeklinde yazılan etiketi kullanırız. Javascirpt ile bir yere sonuç yazdırırken de yazdırdacağımız çıktı içine bu tag'i ekleyerek çıktı verilerimizi bir alt satıra yazdırabiliriz. Örnek senaryomuzda  biri mavi diğeri yeşil iki adet div bulunmakta. Mavi kutudaki "İçerik Metni" yazısını yeşil kutudaki "İşlemin Sonucu" metninin altına yazdırmak istiyoruz. Bunun için yazdir isminde bir fonksiyon oluşturuyoruz. Bu fonksiyon butona basıldığında çalışacak ve mavi kutudaki metni alıp yeşil kutudakinin altına ekleyecek. Önce veri isminde bir değişken tanımlayalım ve içine mavi kutudaki içeriği aktaralım.  var veri=document.getElementById("maviKutu").innerHTML; Sonra yeşil kutuyu yakalayalım ve veri değişkenindeki değeleri bukutunun içine yazdıralım. document.getElementById("yesilKutu").innerHTML+=""+veri;  Gördüğünüz gibi sadece
Devamı

JavaScript ile Mesai Sayacı

Resim
Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım. Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir. <p>Lütfen mesai bitiş saatini girin</p> <input type="tel" placeholder="HH:MM:SS" id="timeInputId" /> <input type="button" id="tmrBtn" value="Mesai Sayacını Başlat"/> <p id="demo"></p> <p id="demo2"></p> <script> var x; var finishTime= "00:00:00"; var brTitle= document.title; window.addEventListener("load",function(){ var timeBtn = document.getElementById("tmrBtn"); var timeInput = docume
Devamı