Hi people ! Feel free to check my gradient theme impl. It's not in fact just a gradient theme since i've included all images resources as base64 data images. Why base64 images? - reducing HTTP request numbers for images from 16 to 1 (remains loading.gif) - avoid SVG/canvas for back button
You can try it here: http://www.remi-grumeau.com/labs/iui/gradient-theme.html ps: i've also made some small modifications in iui.js, in order to give the backbutton a selected state. Remi Grumeau http://www.remi-grumeau.com Le 7 août 2010 à 02:16, Jordan Dobson a écrit : > Yeah this script is a little under 3k. And it can create the pressed state > and standard state and you see in the example. I bet it could be optimized to > be even smaller. > > So do you know if there is a way to make the canvas work easily with multiple > resolutions? > > I'll post my CSS version next week. It's currently integrated in a project > and I need to separate it out when I have a few moments. > > - Jordan > > On Thu, Aug 5, 2010 at 1:14 AM, Remi Grumeau <[email protected]> wrote: > Pretty cool ! > Any way to create a press effect on a canvas ? > The goal of a gradient theme is to minimize http calls to PNG files and to > reduce the project weight. > Would a canvas approach be lighter than 2x 4kb PNG ? I assume so but i'd like > your though. > > Even with backbutton as a PNG, this gradient theme is here already 3 times > lighter than the default one (see http://cl.ly/01294601bfcd7d5e1c1e) > > R. > > Le 31 juil. 2010 à 01:22, Jordan Dobson a écrit : > > > The one downside I found when using Canvas for buttons is that you > > have resolution issues with the Retina display since it has a > > different resolution. However a CSS approach works quite well with > > Retina Display. > > > > So if the goal is to have something flexible, we'd need to include a > > hi-res canvas button option for Retina Displays. > > > > Here's my first Canvas attempt: > > > > http://jordandobson.com/demo/jqtouch/canvas_buttons.html > > > > I'll put up my CSS only solution later today... then we can hopefully > > start to pick it apart and improve the approach. > > > > Most of these are experiments and I expect them to need refinements. > > > > - Jordan > > > > On Thu, Jul 29, 2010 at 4:10 PM, Sean Gilligan <[email protected]> wrote: > >> On 7/29/10 2:47 PM, Alex Zylka wrote: > >>> > >>> Sounds cool. Do you have an on-line demo? > >> > >> I do! It's here: http://www.zylka.us/btn_demo/ > >> And I will probably implement the svg backButton image into it (my demo) > >> soon. Thanks for bringing that to my attention. > >> > >> As Remi notes, SVG will not work on Android and perhaps on other platforms. > >> There may be a way of using SVG and then falling back if it's not supported > >> (I think I've seen a technique for doing this) Another possibility is > >> using > >> Canvas (and the SVG image might help you generate JavaScript that works > >> with > >> canvas) There are other imageless CSS techniques that I've heard people > >> talk about as well. One cool thing you can do with these approaches is > >> make > >> it really easy to change the color of the theme. > >> > >> There is more than one way to skin this cat and we can host multiple > >> approaches in the iUI repository. We'll see which techniques can make it > >> through beta testing... > >> > >> -- Sean > >> > >> -- > >> 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. > >> > > > > > > > > -- > > 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. > > > > -- > 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. > > > > > -- > 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. -- 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.
