Nice Mike! Good call on the webkit-mask-size yeah that's a much better approach and only one asset is needed.
Thanks for that gradient! You could probably recreate the shadow if you used ::before and :after pseudo elements to create the selected state and the shadow on separate layers.. then position with z-index. I think that could work!!! - Jordan On Thu, Aug 12, 2010 at 2:51 PM, Mike Xu <[email protected]> wrote: > 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]<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]. For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
