I would also use a solid toolbar color and a transparent white gradient overlay. This allows you to recolorize the bars with a single color (for example going from the default light blue to the dark brown toolbar would only be a single css property instead of regenerating an entire gradient.)
webkit-mask-image is definately the way to go for the icons. The main issue is that you can't recreate the one pixel drop shadow on the icon pictures shapes that are in native apps. I would use high resolution masks and then scale them with -webkit-mask-size in ems instead of px. This makes it so you have a crisp image on iphone 3, 4, and android that rescales. Here's the gradient to use on the image masks: background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#DDE9F0), color-stop(0.6, #79B2EC), color-stop(0.7, #2E91E5), to(#3FC5F8)); On Thu, Aug 12, 2010 at 2:41 PM, Jordan Dobson <[email protected]>wrote: > Alex - I recommend you use webkit-mask-image > > http://cl.ly/1ykN > > Use that mask to define the the area of where the gradient should show > through and then you can change the gradient that shows through depending on > what class is applied. > > That's how I'd approach it. > > Let me know if you have any questions about this approach because I've > thought about it quite a bit but haven't time to implement it. I'd love to > help. :) > > > On Thu, Aug 12, 2010 at 2:32 PM, Alex Zylka <[email protected]> wrote: > >> So as you can probably tell from my title, I have resurrected the >> "fabled" iScroll/ iUI bottom bar. All I need right now are opinions. >> To make the icons look real, do I make the transparent png's and use >> CSS gradients to fill them in with the selected gradient, or grayed >> out one? Or do I stick with boring static images? You tell me! >> >> My testing ground for iUI(Scroll) is here: http://www.zylka.us/iscroll/. >> Please tell me what you think (and maybe contribute the CSS gradient >> codes - for selected icon and/or grayed out icon - so I don't go crazy >> trying to match the CSS gradient to the icon gradient!) >> >> Thanks, >> Alex Zylka >> http://www.zylka.us/ >> >> -- >> You received this message because you are subscribed to the Google Groups >> "iPhoneWebDev" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected]<iphonewebdev%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/iphonewebdev?hl=en. >> >> > > > -- > Jordan Dobson > Owner + Director > MadeBySquad.com | Glue.Pro | SquadBlog.com > (425) 444-8014 > > Follow me on twitter at http://Twitter.com/JordanDobson > > -- > You received this message because you are subscribed to the Google Groups > "iPhoneWebDev" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<iphonewebdev%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/iphonewebdev?hl=en. > -- You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
