I'm not saying your wrong, but the backgrounds of my png's are transparent and the mask/ gradient doesn't work. That example is sorely needed now!
Alex Zylka http://www.zylka.us/ On Thu, Aug 12, 2010 at 5:52 PM, Jordan Dobson <[email protected]>wrote: > It should work. I'll try an example tonight and send it your way. > > -- > Jordan Dobson > > (425) 444-8014 > http://Twitter.com/JordanDobson > > On Aug 12, 2010, at 3:36 PM, Mike Xu <[email protected]> wrote: > > Your pngs should transparent backgrounds behind the icons. The gradient > will not appear in areas that are transparent. > > > On Thu, Aug 12, 2010 at 3:29 PM, Alex Zylka < <[email protected]>[email protected] > > wrote: > >> Anyone have an idea on how to select one area of an image to add that >> gradient to? I'm stuck with something like this: >> <http://www.zylka.us/iscroll/images/uh-oh.jpg> >> http://www.zylka.us/iscroll/images/uh-oh.jpg >> >> >> On Thu, Aug 12, 2010 at 5:17 PM, Jordan Dobson < <[email protected]> >> [email protected]> wrote: >> >>> 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]> >>> [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]> >>>> [email protected]> wrote: >>>> >>>>> Alex - I recommend you use webkit-mask-image >>>>> >>>>> <http://cl.ly/1ykN>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]> >>>>> [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/>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/>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]> >>>>>> [email protected]. >>>>>> To unsubscribe from this group, send email to >>>>>> <iphonewebdev%[email protected]> >>>>>> [email protected]. >>>>>> For more options, visit this group at >>>>>> <http://groups.google.com/group/iphonewebdev?hl=en> >>>>>> http://groups.google.com/group/iphonewebdev?hl=en. >>>>>> >>>>>> >>>>> >>>>> >>>>> -- >>>>> Jordan Dobson >>>>> Owner + Director >>>>> MadeBySquad.com | Glue.Pro | <http://SquadBlog.com>SquadBlog.com >>>>> (425) 444-8014 >>>>> >>>>> Follow me on twitter at <http://Twitter.com/JordanDobson> >>>>> 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]> >>>>> [email protected]. >>>>> To unsubscribe from this group, send email to >>>>> <iphonewebdev%[email protected]> >>>>> [email protected]. >>>>> For more options, visit this group at >>>>> <http://groups.google.com/group/iphonewebdev?hl=en> >>>>> 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]> >>>> [email protected]. >>>> To unsubscribe from this group, send email to >>>> <iphonewebdev%[email protected]> >>>> [email protected]. >>>> For more options, visit this group at >>>> <http://groups.google.com/group/iphonewebdev?hl=en> >>>> http://groups.google.com/group/iphonewebdev?hl=en. >>>> >>> >>> >>> >>> -- >>> Jordan Dobson >>> Owner + Director >>> MadeBySquad.com | Glue.Pro | <http://SquadBlog.com>SquadBlog.com >>> (425) 444-8014 >>> >>> Follow me on twitter at <http://Twitter.com/JordanDobson> >>> 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]> >>> [email protected]. >>> To unsubscribe from this group, send email to >>> <iphonewebdev%[email protected]> >>> [email protected]. >>> For more options, visit this group at >>> <http://groups.google.com/group/iphonewebdev?hl=en> >>> 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]> >> [email protected]. >> To unsubscribe from this group, send email to >> <iphonewebdev%[email protected]> >> [email protected]. >> For more options, visit this group at >> <http://groups.google.com/group/iphonewebdev?hl=en> >> 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. > > -- > 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.
