Sure thing... I'll let you know once I get the mask setup for various resolutions.
:) On Thu, Aug 12, 2010 at 5:05 PM, Alex Zylka <[email protected]> wrote: > That's awesome Jordan! I hope you don't mind if I incorporate that code > into my app. > > Much appreciated, > > Alex Zylka > http://www.zylka.us/ > > On Thu, Aug 12, 2010 at 7:02 PM, Jordan Dobson <[email protected]>wrote: > >> Hey Guys, >> >> I've put together a quick example here: >> >> http://cl.ly/1ydM >> >> I think this addresses all the styling needed except the scaling of the >> image for different resolutions. I'll work on that tomorrow... or if anyone >> sets it up I can add it in. >> >> Feel free to share this with friends. Hope this helps. >> >> - Jordan >> >> >> On Thu, Aug 12, 2010 at 4:35 PM, Mike Xu <[email protected]> wrote: >> >>> Alex, >>> >>> Currently you're applying a gradient to the div behind the image's within >>> the div. Image mask works similarly to background-image: url() >>> >>> There should be a div where the image should be (or any kind of html >>> element) with the mask property that's pathed to your image. Here's an >>> example of the css: >>> >>> .icon1{ >>> -webkit-mask-box-image: url(images/icon.png); >>> background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A6A6A6), >>> to(#5F5F5F)); >>> >>> } >>> >>> >>> >>> On Thu, Aug 12, 2010 at 3:56 PM, Alex Zylka <[email protected]> wrote: >>> >>>> 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]<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]<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.
