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].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
