CSS: Gradient na besedilu

V porastu je oblikovanje oz. način programiranja v CSS-ju, kjer imamo besedilo v prelivni barvi ali pa je slednje maskirano s sliko. Na takšen način dosežemo »wow« efekt in uporabnika posledično zadržimo dlje časa na strani, vsaj takšen je namen.

Efekt, kjer imamo gradient na besedilu ali je slednje maskirano s sliko smo običajno pripravljali v grafičnih programih, kot je Photoshop. Drug način, s pomočjo programiranja pa z JavaScript kodo, primernih CSS rešitev ni bilo. Z vpeljavo značke “-webkit-background-clip” pa se to spremeni, vsaj v nekaterih brskalnikih.

Maskiranje besedila z barvnim prelivom

Dodana tudi dodatna koda, ki poskrbi za IE brskalnike, ki te značke ne podpirajo. V IE brskalnikih zato dobimo besedilo v eni barvi.

Pred uporabo je vedno potrebno preveriti ustrezno delovanje in podporo v različnih brskalnikih – Can I Use. Poleg tega moramo biti pozorni tudi na spletno dostopnost in če takšna oblikovalska rešitev dejansko predstavlja izboljšanje ali gre bolj za modno muho.

Dodatne vsebine

 

Komentiraj


*