Kayıtlar

Eylül, 2020 tarihine ait yayınlar gösteriliyor

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

Resim
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
Yorum Gönder
Devamı

CSS Transition Background Efektli Kutucuklar

Basit birkaç satır CSS3 koduyla liste kutularınıza şık ve zarif görünümlü arkaplan efektleri verebilirsiniz.  <style>   .hoverKutu {     background-color: #ededed;     color: #717171;     width: 90%;     height: 45px;     display: block;     line-height: 45px;     text-align: center;     cursor: pointer;     transition: background-color 1.1s ease;     border: solid 1px #dddddd;     margin: 5px auto;   }   .hoverKutu:hover {     background-color: #fff;   } </style> <div class="hoverKutu">   CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz. </div> <div class="hoverKutu">   Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz. </div> Bu kodların canlı hali şu şekildedir. CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz. Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz. Burada CSS Transition efekti class'ı "hoverKutu" o
Yorum Gönder
Devamı

JSON - HTML Tablo Dönüştürücüsü(JSON to HTML Converter)

JSON verilerini HTML tabloya çeviren basit bir JavaScript uygulaması yaptım. Kodlar aşağıdaki gibidir.  <!DOCTYPE html> <html> <body>   <style>     .objeTablo th,     .objeTablo tr,     .objeTablo td {       padding: 5px;       border: solid 1px #f00;       color: #717171;       text-align: center;     }   </style> <h2>HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın</h2> <strong>Bu kod sadece 1 seviye değerleri gösterir.Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz. </strong><br/>   <textarea cols="70" rows="20" name="jsonGir"></textarea><br />     <input type="button" value="JSON İçeriğini Göster" onclick="objGoster()" />   <table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;         border: solid 1px #f00;" cellspaci
Yorum Gönder
Devamı