ibrahimnergiz | Front-end Blog

8 veya 4 Karakterli HEX Renk Kodu

İlk karşılaştığımda şaşırmadım değil ama bi’ o kadar da sevindim. Chrome ve Firefox yeni update’leri sayesinde HEX renk formatlarında alfa kanalını da eklemeye izin veriyor. Bu ne demek oluyor peki?

.color {
  /* Kırmızı */
  background: rgb(255, 0, 0);

  /* Kırmızı */
  background: #ff0000;

  /* Alfa değeri ile %75 transparan kırmızı */
  background: rgba(255, 0, 0, 0.75);

  /* Yeni nesil alfa değerli kırmızı */
  background: #ff000080;

}

.color {

/* Kırmızı */

background: rgb(255, 0, 0);

/* Kırmızı */

background: #ff0000;

/* Alfa değeri ile %75 transparan kırmızı */

background: rgba(255, 0, 0, 0.75);

/* Yeni nesil alfa değerli kırmızı */

background: #ff000080;

}

Daha fazla bilgi için: https://www.chromestatus.com/feature/5685348285808640

Daha fazla bilgi için: https://bugzilla.mozilla.org/show_bug.cgi?id=567283

Sosyal Medya Paylaşımları için Gerekli Meta Tag’ler

Facebook’un kendi Open Graph standartı, Twitter’ın kendi standartı derken meta tag kullanımlarımız giderek artıyor. Peki bu ikisini ortaklaştırabilmek mümkün mü diye araştırma yapıyorken. Aşağıdaki kod bloğunu buldum. Open Graph aslında çoğu işi çözüyor gibi…

<!--  Gerekli META Tagleri -->

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">


<!--  Gerekli olmayan ama önerilen META Tagleri -->

<meta name="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">


<!--  Gerekli olmayan ama analiz için gereken META Tagleri -->

<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">

CSS Mask ile Doku Kullanımı

İnternette dolaşırken doku kullanımına rastladım. Yeni CSS özellikleri ile önceden doku kullanılan alanları direk imaj olarak kaydedip web sitesinde gösterme tarihe karışacak. Güncel internet tarayıcılarında CSS yardımıyla bu dokuları “background-clip” ve “mask-image” yardımıyla SVG (<clippath>, <pattern> ve <mask>) ve canvas’lara uygulayabilir olduk. Tabi bunların da kendine özgü kullanım ve zorluk dereceleri de yok değil. Ben de en basit olanı konu edeyim dedim.

CSS mask-image

Başlayabilmek için örnek dokumuzu PNG-24 formatında kaydediyoruz: Örnek Doku

Bu doku, herhangi bir renkte olan alanlarda, bir kısmı veya tüm alanı transparan olan elementlerde kendini gösterecek. İşin ilginç yanı da bunu 2 satır kod ile yapabilioruz.

.doku {
   -webkit-mask-image: url("doku.png");
   mask-image: url("doku.png");
}

.doku {

-webkit-mask-image: url("doku.png");

mask-image: url("doku.png");

}

Bu basit takniğin en güzel yanı da oldukça geniş alanlarda kullanılabilir olması. Herhangi bir renkteteki elementte uygulandığında arkaplanda görünür duruma geçiyor. Başlıklarda, butonlarda, SVG ve ikonlarda da aynı efekti alabilmem mümkü oluyor:

See the Pen CSS mask-image by Ibrahim Nergiz (@phyesix) on CodePen.

Flexbox ile Footer Sabitleme

Hemen hemen tüm geliştiricilerin kariyerlerinde en az bir kere karşılaştığı sorunlardan birisi de, içeriği az olan sayfalarda footer’ın en aşağıda yer almaması olsa gerek. Aslında, footerın yüksekliği bilindiği taktirde bunun bi’ çözümü vardı.

Flexbox, işte tam bu noktada yardımımıza koşuyor. Genellikle internette yatay pozisyonlamalar için kullanılsa da dikey yönlü çözümlerle de öne çıkıyor.Yapacağınız tek şey de, içeriği tek bir element içerisine aldıktan sonra gerisini flexbox‘a bırakmak olacaktır.

HTML tarafı için:

<body class="webpage">
  <header>header</header>
  <main class="webpage-content">içerik</main>
  <footer>footer</footer>
</body>

<header>header</header>

<main class="webpage-content">içerik</main>

<footer>footer</footer>

</body>

CSS tarafı için:

.webpage {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.webpage-content {
  flex: 1;
}

.webpage {

display: flex;

min-height: 100vh;

flex-direction: column;

}

.webpage-content {

flex: 1;

}

Canlı örnek için:

See the Pen OPOLxr by Ibrahim Nergiz (@phyesix) on CodePen.

Eski IE Versiyonları için CSS Fixleri

Aslında farklı tarayıcılar için CSS özelleştirmesi diye bi’ şey olmaması gerekiyor diye düşünüyorum, ama gel gör ki böyle fix’ler mevcut ise bazı durumlarda gerekli olabiliyor diyebiliriz.

Burada eski IE versiyonları için basit CSS fixleri mevcut, IE 6 için alttan çizgi (_) ve IE 7 için de yıldız (*) ı kullanıyoruz. Örnek kullanımları için de:

color: red; /* tüm browserlar için */
*color: blue; /* IE7 ve altı için */
_color: green; /* IE6 ve altı için */

color: red; /* tüm browserlar için */

*color: blue; /* IE7 ve altı için */

_color: green; /* IE6 ve altı için */

Sizce bu özellikler gerekli mi? veya daha önce kullandınız mı?