Merhaba arkadaşlar, bu yazı serisinde sizlere Front-end geliştirme yaparken ihtiyacınız olabilecek kodlardan bahsedeceğim.

CSS ile Ortalama (Yöntem 1) –  (Bu yöntemi çok önermiyorum çünkü responsive kısmı canınızı sıkabilir.)

Dikey ve yatay olarak, her şeyi (hemen hemen) ortalamak için kullanabilirsiniz.

.box{ /* Bu alana göre ortalanacak */
 position: relative; 
}
.box .ortala{ /* Ortalama yapılacak kısım */
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

Örnek


CSS ile Ortalama (Yöntem 2)

Dikey ve yatay olarak, her şeyi (hemen hemen) ortalamak için kullanabilirsiniz.

.container { /* Ortalanacak alan bu kısmın içinde olacak */
    height: 300px;
    text-align: center;
    font: 0/0 a; /* Ortalama işleminin sorunsuz olması için font değerlerini sıfırlıyoruz */
}
.container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.container .ortala { /* Ortalanacak alan */
    display: inline-block;
    vertical-align: middle;
    font: 16px/1 Arial sans-serif; /* Font değerlerini tekrar belirliyoruz */
}

Örnek


Custom Scrollbar

Bazı projelerde, scrollbar stilleri web sitemizde çok kötü durabilir. Bu durumdan kurtulmak için scrollbar stilini değiştirebilirsiniz.

::-webkit-scrollbar-track{ // Scrollbar ana bar
 box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: blue;
}
::-webkit-scrollbar{ // Scrollbar'ın kendisi
 width: 10px;
 background-color: #000;
}
::-webkit-scrollbar-thumb{ // Scrollbar'ı kontrol etmemizi sağlayan bar
 border-radius: 10px;
 box-shadow: inset 0 0 10px rgba(0,0,0,.3);
 background-color: green;
}

Örnek


CSS Placeholder

Belki dikkat etmiş olmayabilirsiniz ama bir input’un yazım rengi ile placeholder rengi genellikle farklılık göstermektedir. Bu durumdan kurtulmak için aşağıda yer alan kodu değiştirip kullanabilirsiniz.

input{
  color: #000;
}

/* Placeholder */
input.css_placeholder::-webkit-input-placeholder {
  color: green;
}
input.css_placeholder::-moz-placeholder {
  color: green;
}
input.css_placeholder:-ms-input-placeholder {
  color: green;
}
input.css_placeholder:-moz-placeholder {
  color: green;
}

Örnek


JS ile Basit Şekilde Mobil Cihaz Kontrolü

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
       //  Telefon ise uygulanacak Kodlar 
}

Örnek


JQuery ile Input File’da Seçtiğimiz Dosyanın İsmini Alma

$("input:file").change(function() {
  var fileName = $(this).val();
  fileName = fileName.substring(fileName.lastIndexOf('\\') + 1);
  if (fileName != "") {
    $("#file_name").html(fileName);
  } else {
    $("#file_name").html('<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>');
  }
});

Örnek