İ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 (, ve ) 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”); }

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.

//assets.codepen.io/assets/embed/ei.js