CSS ile Mobilde Kaydırma Hassaslığı

Bildiğiniz gibi mobil için ayrı ayrı css kodları yazmak durumundayız, çünkü mobil tarayıcılar henüz her özelliği desteklemediği gibi, sadece mobil tarayıcılar için özelliklerde mevcut. Hal böyle olunca, yazarken dikkat edilmesi gereken bazı durumlar oluyor. Bu makalede en temel problem olan kaydırma problemini ele alacağız. Nedir bu problem dersenizde, aşağıdaki gif’e gözatalım;

Şimdi bunun html ve css kodları şu şekilde;

<div class="content">
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
........
</div>
<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
}
</style>

Hal böyle olunca kayma hassaslığı yok, ios cihazlarda boncuk boncuk kayar normalde. İşte kaymaya bu ivmeyi kazandırmak için css’de ufak bir kod eklemek gerekiyor. Yani kısaca;

<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
</style>

Ve sonuç ise;

İyi kodlamalar <3

CSS ile Kayan Label Yapımı vs jQuery Plugini

Bugün gezinirken şöyle bir jquery plugini gördüm;
https://www.jqueryscript.net/demo/jQuery-Floating-Placeholder-Text-Plugin-Placeholder-Label/

Amaç basit, input’un içine bir label yerleştiriyor, tıklayınca animasyonlu olarak onu yukarıya kaydırıyor. Eğer input’a yazı yazılırsa label yukarıda kalmaya devam ediyor ve label’ın texti değiştiriyor. Ve bunun için bir sürü kod yazması gerekmiş eklentiyi yazan arkadaşın.

Bende bu örneği sadece CSS ile nasıl yapacağımı göstermek istedim.

Kısaca şöyle bir HTML yapımız olsun;

<div class="field">
    <input type="text" required autocomplete="off" id="username" value="tayfunerbilen">
    <label for="username" title="Kullanıcı adınızı girin" data-title="Kullanıcı adı">
</div>

Ve CSS kodlarımız;

.field {
    position: relative;
    margin-bottom: 15px;
}

.field label::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 15px;
    line-height: 40px;
    font-size: 14px;
    color: #777;
    transition: 300ms all;
}

.field input {
    width: 100%;
    line-height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.field input:focus {
    outline: 0;
    border-color: blue;
}

.field input:valid + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    padding: 0 6px;
    left: 9px;
    content: attr(data-title);
}

.field input:focus + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    color: blue;
    padding: 0 6px;
    left: 9px;
}

Daha fazla detay için dersi izlemeniz yeterli

Demo

See the Pen CSS Input Placeholder Animation by Tayfun Erbilen (@tayfunerbilen) on CodePen.

CSS Flex ile Sticky Footer Yapmak

Bu dersimde son zamanlarda sıkça kullandığım css’in flex özelliğini kullanarak sticky (yapışkan) footer yapımını göstermek istiyorum. Temel anlamda aslında kodlarım şunlardan ibaret;

<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>

<style>
body {
   height: 100%;
   display: flex;
   flex-direction: column;
}
.content {
   flex: 1;
}
</style>

Daha detaylı görmek isterseniz aşağıdaki örneği inceleyebilirsiniz;

See the Pen Sticky footer with CSS Flex – Erbilen.net by Tayfun Erbilen (@tayfunerbilen) on CodePen.

CSS :nth-child() Örnekleri

Daha önce mutlaka :nth-child() filtresini kullanmışsınızdır css yazarken. Ancak bu filtrenin bazı güzel ipuçları var, işimize yarayacak. Bu yazıda size hızlıca bunları göstermek istiyorum. Önce basit bir html yapısı kuralım;

<ul>
  <li>kutu 1</li>
  <li>kutu 2</li>
  <li>kutu 3</li>
  <li>kutu 4</li>
  <li>kutu 5</li>
  <li>kutu 6</li>
  <li>kutu 7</li>
  <li>kutu 8</li>
  <li>kutu 9</li>
  <li>kutu 10</li>
</ul>

<style>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  overflow: hidden;
}
ul li {
  list-style: none;
  float: left;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

Şimdi gelelim örneklerimize..

İlk 5’i seçmek (:nth-child(-n+5))

Burada 5 yerine kaç yazarsanız ilk o kadarı seçilecektir.

ul li:nth-child(-n+5) {
   background-color: yellow;
}

Son 5’i seçmek (:nth-child(n+6))

Burada dikkat etmeniz gereken son kaçı seçecekseniz her zaman bir fazlasını yazmanız.

ul li:nth-child(n+6) {
   background-color: yellow;
}

3 ile 8 aralığındakileri seçmek (:nth-child(n+3):nth-child(-n+8))

ul li:nth-child(n+3):nth-child(-n+8) {
   background-color: yellow;
}

3’er 3’er seçmek (:nth-child(3n))

Ayrıca odd ve even ile de kullanımı var. Her ikisini de aşağıda gösteriyorum.

ul li:nth-child(3n) {
   background-color: yellow;
}


Her 3’ü ama sadece çift olanlar olsun istersek. Yani her 3’ü seçecek ama çift olan 6. oluyor. Dolayısı ile 3. yü atlayacak 6’yı seçecek 9. yu atlayacak 12’yi seçecek.

ul li:nth-child(3n):nth-child(even) {
   background-color: yellow;
}


Tam tersinde ise tekleri seçecek. Yani 3’ü seçecek 6’yı atlayacak 9’u seçecek…

ul li:nth-child(3n):nth-child(odd) {
   background-color: yellow;
}

4. den başlayıp 3’er 3’er seçmek (:nth-child(3n+4))

Burada eğer 2. den başlayıp 4’er 4’er seçmesini isterseniz 4n+2 demeniz yeterli 🙂

ul li:nth-child(3n+4) {
   background-color: yellow;
}

Daha fazla örnek görmek isterseniz, şuraya bir gözatın: http://nthmaster.com/

Tasarımlarda Standart Sistem Fontunu Kullanmak

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.