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: s