Tixato Webkit CSS3 Ticket Section

Here’s a recent ticket selection interface, using Webkit + CSS3, I designed and built for an upcoming Tixato mobile web app on SenchaTouch. This uses no images, only CSS3 and Webkit.

This layout was inspired by the screen shots originally released by the JQueryMobile.com team and is my interpretation built using webkbit + CSS3.

My goal has been to keep the rendering consistent across Android, iOS and BlackBery Torch platforms which all are Webkit browsers. I have it rendering great despite the rending disadvantages the Android & BlackBerry platforms have.

There are a few things I’ve learned while designing cross platform:

• BlackBerry Torch fails to render a rounded box shadow when used with rounded corners. 
• Try inset box shadows for consistent highlights & shadows.
• Use multiple inset box shadows for and inner border or glow.
• Try :before and :after pseudo elements for borders along with pointer-events:none; for consistency.
• BlackBerry Torch may “bug out” and hide an item that is set to rotate(30deg) but works fine with rotate(30.0001deg).
• Gradients render consistently and can help render sharp lines along with -webkit-background-size.
• Diagonal linear gradients work great for creating triangles arrows along with a rotate(45deg) -webkit-transform.
• Checkboxes can use :before and :after pseudo elements to great effect.
• Combine pseudo elements with checked states for basic interactions without Javascript. input[type=”checkbox”]:checked::before{ content: “on” }
• You can animate some checked states, but it only works great on the iphone.

This mobile app has to be quick, clear and easy to use. So one choice I made was to have the counter & subtract buttons only show after a ticket is added. This allows the buttons to also act as row indicators for quick scanning of the list. 

I’d love to hear your thoughts and make sure you view my iterations on Dribbble.

Using Webkit CSS Gradients to Create iOS Tab Bar Highlight →

Here’s an experiment I took onto see if I could recreate the iOS tab bar highlight state using only CSS gradients. It took me a few iterations to get it right, but I’m very happy with the results!

Specification proposals from the WebKit project →

webkitbits:

A listing of all of the specifications built into WebKit that are not necessarily part of the W3C yet. pointer-events is one of my favorites…

I agree completely. Having pointer-events would be great for being able to create visual effects overtop clickable elements and so on. I’ve been wanting this for a while. I’ll have to give this a shot in some of the mobile apps I’m working on to see how it works.

Webkit Masked iPhone Navigation →

There was a discussion on how to accomplish an iPhone like bottom nav element on the iPhoneWebDev Google Group and with a little help on the colors for the gradient I was able whip this example up. I’m quite happy with the outcome.

The only other thing I would like to do is handle various resolutions using -webkit-mask-size starting with a hi-res and scaling down for phones with a lower resolution.

This was my first attempt using -webkit-mask-image and other related properties and implementing it was a breeze. Check the source code for all the tasty tid-bits.

Webkit Animated Loading Indicator →

Today I worked on an approach for an animated loading indicator created entirely in CSS3 using Webkit. I’m pretty happy with it and have a few more iterations on this idea that I’ll post soon.

UPDATE I’ve revised this version and posted a new example.