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.

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/>

<table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;

border: solid 1px #f00;" cellspacing="0" cellpadding="0">

</table>

function objGoster() {

var jsonVeri = document.getElementsByName("jsonGir")[0].value;

var obj = JSON.parse(jsonVeri);

var nesneBaslikSay = Object.keys(obj[0]).length;

var icerik = "<tr>";

var icerikBaslik = "<tr>";

var icerikDeger = "";

for (i = 0; i < nesneBaslikSay; i++) {

icerikBaslik += "<th> " + Object.keys(obj[0])[i] + " </th>";

}

icerikBaslik += "</tr>";

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

for (j = 0; j < nesneBaslikSay; j++) {

icerikDeger += "<td> " + obj[i][Object.keys(obj[i])[j]] + " </td>";

}

icerikDeger += "</tr>";

}

icerik += icerikDeger;

document.getElementById("tabloIcerik").innerHTML = icerikBaslik + icerik;

}

</script>

</body>

</html>

Bu kodların çalışan hali,

HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın

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.
Not: Eğer JSON kodunuz okunmadıysa kodu [ ] parantezleri arasın alın. Bu basit bir kod ve arraya dönüşmeyen içerikleri okuyamıyor

CSS Timeline Side Bar

CSS ile side bar alanına eklenebilen basit bir timeline kutusu.

<style>

.listTimeLine {

margin: 0px;

padding: 10px;

border-left: 1px solid #717171;

font-family: Arial;

width: auto;

display: block;

background-color: #ddd;

max-width: 40%;

height: auto;

display: block;

}

.listTimeLine li {

margin: 4px 0;

}

.listTimeLine li.listDate {

list-style-type: none;

color: #717171;

font-size: 12px;

margin: 18px 0 0 0;

}

.listTimeLine li.listDate:first-child {

margin: 0;

}

.listTimeLine li.listItem {

list-style-type: none;

font-size: 16px;

font-weight: bold;

color: #545454;

padding-left: 15px;

}

.listTimeLine li.listDate:before {

content: "■";

padding-right: 10px;

margin-left: -15px;

line-height: 10px;

vertical-align: top;

display: inline-block;

font-size: 16px;

}

.active {

color: #e04235 !important;

font-weight: bold;

}

</style>

<li class="listDate active">Haziran 30, 2020</li>

<li class="listItem active">Lorem ipsum dolor</li>

<li class="listDate">Haziran 18, 2020</li>

<li class="listItem">Sed ut perspiciatis unde omnis iste</li>

<li class="listDate">Haziran 17, 2020</li>

<li class="listItem">Ut enim ad minima veniam, quis nostrum exercitationem</li>

<li class="listDate">Haziran 10, 2020</li>

<li class="listItem">Lorem ipsum dolor sit amet</li>

</ul>

Google Shopping Türkiye'ye Kapanıyor.

Rekabet Kurulu ile anlaşamayan Google 10 Ağustos 2020 Tarihinden itibaren Google Shopping reklamlarının Türkiye'deki arama sonuçlarından kaldırılacağını duyurdu.

Merchant Center üzerinden kontrol ettiğimiz Google Alışveriş reklamlarının, diğer Alışveriş Karşılaştırma Siteleri için haksız rekabete sebep olacak şekilde piyasayı domine ettiği, arama sonuçlarında Alışveriş Karşılaştırma Sitelerine de yeterince gösterim hakkı tanımadığı kararının alınmasını ardından Rekabet Kuruluna Google Tarafının sunduğu çözüm önerilerinin kabul edilmemesi üzerine, Google Türkiye tarafından bu kararın alındığı açıklandı. 10 Ağustostan itibaren ülkemizden yapılan arama sonuçlarında shopping reklamlarını göremeyeceğiz.

Detaylar için

https://turkiye.googleblog.com/2020/07/google-alisveris-reklamlari-ile-ilgili29.html

Responsive CSS Hazır Metin Kutusu

Metin kutusu kodları

<style>

.mainBox{

display:block;

max-width:100%;

height:auto;

padding:2.5%;

background-color:#f1f1f1;

margin:5px auto;

border:solid 1px #dfe6e9;

box-sizing:border-box;

}

.innerBox{

background-color:#ffffff;

padding:5px;

width:100%;

height:auto;

display:block;

border:0px;

border-left: solid 3px #e74c3c;

text-align:justify;

box-sizing:border-box;

color:#2c3e50;

}

</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Bu kodların canlı hali

Javascript ile bul değiştir işlemi nasıl yapılır?

Javascript ile bir string ifadeyi tüm sayfada aratıp istenen değerle replace edebilirniz.

Javascript kelime değiştirme kodumuz

var kelime=/aranan kelime/ig;
var yeniKelime="yeni ifade";
var x = this.document.body.innerHTML.replace(kelime,yeniKelime);
this.document.body.innerHTML = x;

Bu koddaki kırmızı yerleri değiştirip tarayıcı konsolunda çalıştırdığınızda HTML sayfasında aradığınız kelime ile eşleşen tüm ifadelerin değiştirildiğini görebilirsiniz.

Javascript ile tıklanan elemanın sira numarasini bulmak

Bazı projelerde kullanıcının tıkladığı elemanın indeks sırasını bilmemiz gerekir. Herhangi bir şekilde JQuery vb javascript kütüphanesi kullanmadan saf javascript ile tıklanan elemanın sıra değerini öğrenebilirsiniz. Aşağıdaki kısa kod örneği bu işin kolayca yapılabilmesini sağlıyor.

<style>
li.demo{display:block;margin-top:2px;padding:5px;background-color:#4caf50;width:50px;text-align:center;color:#fff;cursor:pointer;}
</style>
<ul id="kutu">

<li class="demo">-1- </li>

<li class="demo">-2- </li>

<li class="demo">-3- </li>

<li class="demo">-4- </li>

<li class="demo">-5- </li>

</ul>

<div>Sıralama Bilgileri</div>
<strong id="siraSonuc"></strong>
<script>

var elemanlar=[];
var sira;
var ind;

elemanlar=document.querySelectorAll(".demo");

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

elemanlar[i].addEventListener("click",function(){
var ata=this.parentNode;
ind=Array.prototype.indexOf.call(ata.children, this);
sira=Array.prototype.indexOf.call(ata.children, this)+1;
document.getElementById("siraSonuc").innerHTML="Index no: "+ind+" | Sıra no: "+sira;

});

}
</script>
Bunun canlı hali aşağıdaki gibidir. Sonuçları görmek için aşağıdaki sayılara tıklayın.

Sıralama Bilgileri

Turgut Arslan

CSS Transition Background Efektli Kutucuklar

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

HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın

CSS Timeline Side Bar

Google Shopping Türkiye'ye Kapanıyor.

Rekabet Kurulu ile anlaşamayan Google 10 Ağustos 2020 Tarihinden itibaren Google Shopping reklamlarının Türkiye'deki arama sonuçlarından kaldırılacağını duyurdu.

Responsive CSS Hazır Metin Kutusu

Javascript ile bul değiştir işlemi nasıl yapılır?

Javascript ile tıklanan elemanın sira numarasini bulmak

Google Ads'te TBM Düşüren Bir Anahtar Kelime Stratejisi