Yayınlar

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.

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;" cellspacing="0" c…

CSS Timeline Side Bar

Resim
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>
<ul class="listTimeLine">   <…

Google Shopping Türkiye'ye Kapanıyor.

Resim
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

Resim
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> <div class="mainBox"> <div  class="innerBox"> 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> </div>
Bu kodların canlı hali

Lorem ipsum dolor sit amet, consectetur a…

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++){

  elemanla…