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?

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

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.

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:

CSS tarafı için:

Canlı örnek için:

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

“object-fit” ile İmaj Boyutlandırma

Responsive websitesi yaparken yaşadığımız en büyük zorluklardan birisi de imaj boyutlandırmaları olsa gerek. Kolay yoldan bunu küçük bi’ CSS kodu yardımıyla çözebiliyoruz:

[code lang=”css”]
img {
max-width: 100%;
height: auto;
}
[/code]

Ama hepimizin de bildiği gibi bu çözüm pek yeterli olmuyor. Bazen, imajın elementin hepsini kaplamasını, bazen en boy oranını korumasını veya her responsive davranışta ortalı olmasını isteyebiliriz. Hadi onu geçtim iframe videolarında responsive olarak da sıkıntılarımız mevcut. Her ne kadar bu sıkıntıların çözümleri mevcut olsa da baş belası olabiliyor … Kısacası, responsive tasarımlarda imaj veya video gibi medya elementleri ile başımız sık sık derde giriyor ve kontrol zorlaşabiliyor.

İnternette araştırırken “object-fit” adı altında yardımcımızın olduğunu öğrendim, çok da mutlu oldum. Web sitesine arka plan imajını koyabilmek için “background-size” gibi yöntemler kullanırken artık “object-fit” ve aldığı değerler ile fantezilerimizi gerçekleştirebiliriz.

[code lang=”css”]
img {
/* En boy oranını koruyarak, element içerisine imajı boyutlandırıyor. */
object-fit: cover;

/* İmajın tamamını göstermek için genişlik ve yüksekliğine göre boyutlandırıyor. */
object-fit: contain;

/* En boy oranı korunmayarak element içerisinde imaj boyutlanıyor. */
object-fit: fill;
}
[/code]

Codepen üzerinde güzel de bir örnek buldum:

See the Pen CSS object-fit by Ibrahim Nergiz (@phyesix) on CodePen.

Henüz yeni olduğundan browser konusunda da seçici davranıyor:

Browser Destek
Internet Explorer
Google Chrome v31+
Firefox v36+
Safari OS X 7.1+
Safari iOS 8+
Opera v19+

CSS ile Dikey Ortalama

3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz.

Aşağıdaki kod bloğu yardımıyla dikey ortalamayı yapabilir, hatta IE9’da bile çalıştırabilirsiniz:

[code lang=”css”]
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
[/code]

Kurcalamak isteyenler için de :

See the Pen Vertical center with only 3 lines of CSS by Ibrahim Nergiz (@PhyesiX) on CodePen.