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.

OS X El Capitan Sass Kurulum Hatası ve Çözümü

Yakın zamanda mac’de işletim sistemimi güncelledim.
Ancak daha sonra sass’ı kullanamaz oldum.
Kurulum yaparken ise şöyle bir hata alıyordum;

ERROR:  While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

Daha sonra biraz araştırınca benim gibi bir çok kişi el capitan’da sorun yaşamış.
Şöyle bir issue‘ya denk geldim ve çözümünü burada buldum. Sorun yaşayanlar için çözüm;

sudo gem install sass

yerine

sudo gem install -n /usr/local/bin sass

şeklinde kurulum yapmak.

Sorun yaşanlar olursa diye blog’da bulundurmak istedim bu konuyu 🙂
Bol kodlamalı günler.

Responsive Tablo Yapımı

Başlık biraz aldatıcı olabilir ama teknik olarak responsive tablo yapımı evet 🙂
Uzun bir tablonuzu tablet ya da telefon boyutlarında nasıl düzgün şekilde gösterebileceğinizden kısaca bahsettim.

Video

Demo

http://www.erbilen.net/demo/responsive-tablo/

Not: Telefon ve tabletlerde gerçek boyutta gözükmesi için aşağıdaki meta etiketini eklemeyi unutmayın!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Css’de geniş yazıyı üç nokta ile sınırlandırmak

Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;
Okumaya devam et Css’de geniş yazıyı üç nokta ile sınırlandırmak

Reset CSS Kullanımı

Eric Meyer’in reset.css’ini kullanıyorum. Ancak bazı kısımları hatalı, mesela gitmiş strong’u em’yi sıfırlamış ne eğik yazılıyor ne kalın.. Ee ne anladım o işten 😀 Eric reyiz bize yanlış yaptı, bende onun reset.css’ini biraz düzenledim. Böylesi daha tatlı oldu.

Not: Mevcut tüm reset.css’lere aşağıdaki bağlantıdan ulaşabilirsiniz.
http://www.cssreset.com/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}
img {
    border: 0;
}
:focus {
    outline: 0;
}
.clear {
    clear: both;
}

CSS Grayscale Özelliği (Tüm Tarayıcılarla Uyumlu)

CSS ile bir nesnenin görünümünü gri tonda yapabilmemiz mümkün. Aslında gri ton bu özelliğin sadece bir değeri 🙂 Her neyse, lazım olur diye bende bloğumda paylaşıyorum.. Örneğin resme grayscale özelliğini vermek için graysale adında bir class ekleyelim. Daha sonra css’de bu class’ı tanımlayalım.
Okumaya devam et CSS Grayscale Özelliği (Tüm Tarayıcılarla Uyumlu)

LESS Kullanımı

LESS, CSS yazımınızı hızlandıracak, daha basit ve kullanışlı hale getirecek bir araçtır.
LESS ile değişkenler tanımlayabilir, mixinler oluşturabilir, tanımlı fonksiyonları kullanabilir, matematiksel hesaplar yapabiliriz..

Başka Alternatifler Var mı?

Elbette alternatif mevcut. Örneğin LESS yerine SASS kullanmayı seçebilirsiniz. Ancak ben LESS’i tercih ettim. Kullanımı ve kurulumu çok daha kolay zira.
Okumaya devam et LESS Kullanımı