Here's a retina version for the bottom tab bar
http://jordandobson.com/webkit_mask_iphone_nav/retina/
Also I've updated the gradient to be more apple like
http://jordandobson.com/webkit_tab_bar_gradients/
I haven't added that into the previous example though.
Hope this helps guys. :)
- Jordan
On Thu, Aug 12, 2010 at 5:37 PM, Jordan Dobson <[email protected]>wrote:
> 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
>
--
Jordan Dobson
Designer + Developer
(425) 444-8014
http://JordanDobson.com | http://MadeBySquad.com | Glue.Pro
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.
