search

saxifrage / caac-map

A Resource Map for the City as a Campus Project
http://cityasacampus.org/map/
0 stars 1 forks source link

Explore artistic backgrounds for topical grids #54

Open timothyfcook opened 9 years ago

timothyfcook commented 9 years ago

After we've launched, I'd like to explore the idea of adding some unique creativity to each topical grid.

With a drawing or watercolor or graphical aesthetic that pseudo-matched for each area, but was opaque enough that the UI was still easily navigable and contrasted.

https://img0.etsystatic.com/000/0/5872003/il_570xN.328501616.jpg

chadwhitacre commented 9 years ago

il_570xn 328501616

cameronscott137 commented 9 years ago

Something like this could be achieved in modern browsers with css -webkit-mask-image, which allows you to overlay a texture on top of any image or shape. As an example, this headline uses that technique to add a grunge texture over each letter. This would use a set of translucent watercolor textures, which we can vary via nth:child selectors. I've never done it, but it should be possible.

There may be a JS library that functions similarly, but I haven't been able to find one yet that wasn't super hokey.

timothyfcook commented 9 years ago

Excellent. We can look at this after pathways and all the UI fixes are completed.

timothyfcook commented 9 years ago

@chelseaerdner share out a mock-up here when you have it.