Turgut Arslan

Sliderli Product Box Örneği

Sliderli Product Box Kodları :

<style>

.productBox{

display:block;

position:relative;

width:25%;

height:auto;

float:left;

box-sizing:border-box;

border:solid 1px #dedede;

border-radius:1rem;

padding:.3rem;

margin:.3%;

background:#fff;

}

.productImages{

position:relative;

width:100%;

height:auto;

display:block;

padding-bottom:100%;

box-sizing:border-box;

}

.productImage{

margin:auto;

max-width:85%;

height:auto;

display:none;

position:absolute;

z-index:1;

top:0;

left:0;

right:0;

bottom:0;box-sizing:border-box;}

.productImage:nth-child(1){display:block;}

.imageThumbs{display:flex;width:100%;justify-content: center;margin:0px auto;}

.imageThumbsItem{

display:block;

border:solid 1px #dedede;

width:1rem;

height:1rem;

border-radius:50%;

margin:1%;

box-sizing:border-box;

cursor:pointer;

}

</style>

window.addEventListener("load",function(){

var parent;

var imgOrd;

var upParent;

var allItems=document.getElementsByClassName("imageThumbsItem");

for(i=0;i<allItems.length;i++){

allItems[i].addEventListener("mouseover",function(){

parent = this.parentElement;

imgOrd=Array.prototype.indexOf.call(parent.children, this);

upParent=parent.parentElement;

var underImgs=upParent.getElementsByTagName('img');

for (j=0;j<underImgs.length;j++){

underImgs[j].style.display="none";

}

underImgs[imgOrd].style.display="block";

});

}

});

</script>

</div>

</div>

</div>

</div>

Saygılarımla...
Turgut ARSLAN

Babamı kaybedeli ne kadar zaman geçti?

Babamı 27 Ocak 2021 günü kaybetmiştim.

Salih Bey'in Ruhu için El Fatiha!

JS ve CSS ile HTML Elemanlarının Sıralamasını Nasıl Değiştiririz?

HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır.

Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır.

<style>

.kapsayici {

display: flex;

display: -webkit-flex;

flex-direction: column;

max-width: 92px;

height: auto;

margin: 0px auto;

flex-wrap: nowrap;

justify-content: flex-start;

align-items: stretch;

align-content: stretch;

}

.eleman,

.karistirButon {

padding: 3%;

border: solid 1px #f00;

margin: 2px;

max-width: 92px;

text-align: center;

}

.karistirButon {

background-color: red;

color: #fff;

margin: 0px auto;

margin-top: 5px;

cursor: pointer;

display: block;

padding: 1%;

max-width: 92px;

}

</style>

function siraDegistir() {

var sira = 0;

var siraliste = [];

var i = 0;

var elemanlar = document.querySelectorAll(".eleman");

for (i = 0; i < elemanlar.length; i++) {

sira = Math.floor(Math.random() * (elemanlar.length)) + 1;

if (!siraliste.includes(sira)) {

siraliste.push(sira);

elemanlar[i].style.order = sira;

} else {

i--;

}

</script>

</div>

<div class="karistirButon" onclick="siraDegistir();">Sırayı Karıştır</div>

Bu kodların çalışır hali

Sırayı Karıştır

Saygılarımla...
Turgut ARSLAN

JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

Bu işlemi yapan kodlar aşağıdaki gibidir

window.onload=function(){

/*eklenecek içerik*/

/*Ekleneceği eleman*/

var b=document.querySelectorAll(".disKutu")[0];

/*eklemek istediğimiz içeriği ilgili elemanın içeriğinin başına ekleyen kod*/

b.insertAdjacentHTML('afterbegin', a);

}

</script>

<div style="display:block;width:450px;height:55px;">Bu kutudaki içerikten önce eklenecek</div>

</div>

Kodun canlı çalışan örneğini görmek için aşağıdaki butona basın.

Bu kutudaki içerikten önce eklenecek

Saygılarımla...
Turgut ARSLAN

Cumhuriyet Bayramımız Kutlu Olsun

Cumhuriyetimizin 97. Yılı Kutlu Olsun

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>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit

</div>

29.999,89 <small>TL</small>

</div>

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

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>

CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz.

</div>

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" olan elemanların arka plan renk değişimine uygulandı. Bunu yapabilmek için "hoverKutu" classınnın CSS kuralına "transition" kodunu yazdım. Trasnsition efekti uygulanırken sırasıyla

Hangi özelliğe uygulanacak?
Ne kadar sürecek?
Zamanlama(Burada zamanlamadan kastımız geçiş efektinin belirlenen zman içinde ne şekilde tamamlanacağıdır. transition-timing-function: olarak bilinir.)

Burada transition: background-color 1.1s ease; kodu ile geçiş efektinin arkaplan rengini değişirken uygulanacağınız, 1.1 saniye süreceğini ve zamanlama kuralının easing olduğunu belirtmiş oluyoruz.

Sonrasında kullanıcı elamanın üstüne mouse ile geldiğinde efektin uygulanabilmesi için ".hoverKutu" classına ":hover" pseudo classı ile " background-color: #fff;" tanımlaması yaparak arkaplanın beyaz olmasını ve bu geçişin yumuşak bir şekilde gerçekleşmesini sağlıyoruz.

CSS Transition efekti uygularken dikkat edilmesi gereken üç önemli nokta var.

"transition" kodunu hangi elemana uygulaycaksanız, o elemanın CSS kuralları içine ekleyin.
Değişmesini istediğiniz CSS kuralının(genişlik, yükseklik, arakaplan rengi vs.) transition kodunu eklediğiniz elemanın kuralları içinde olduğuna emin olun.
Değişikliğin uygulanmasını istediğiniz aksiyon tanımlarında(:hover, :focus gibi) değişecek olan CSS kurallarının son hallerini yazın. Aynı arkaplan efekt sonunda beyaz olacak ise buradaki örnekte " background-color: #fff;" yazdığımız gibi.