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.