Jordan Dobson

Tixato Webkit CSS3 Ticket Section

Sat, 06 Nov 2010 01:08:00 -0700

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

Fri, 15 Oct 2010 14:08:32 -0700

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!

-webkit-line-clamp

Wed, 29 Sep 2010 12:19:01 -0700

dropshadows:

-webkit-line-clamp is an unsupported WebKit property that limits the number of lines of text displayed in a block element. In order to achieve the effect, it needs to be combo-ed with a couple of other exotic WebKit properties.
<p style="
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
">
  WebKit Browsers will clamp the number of lines 
  in this paragraph to 2. Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim 
  ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat. Duis 
  aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur 
  sint occaecat cupidatat non proident, sunt in culpa qui 
  officia deserunt mollit anim id est laborum.
</p>
WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Very good to know!

Specification proposals from the WebKit project

Tue, 28 Sep 2010 17:41:15 -0700

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.

Declaring Multiple Script Tags

Fri, 24 Sep 2010 12:49:06 -0700

It would be nice if we could use a <script> tag like this to keep our HTML code nice and clean.

    <script type="text/javascript">
      <source src="_/app.js" />
      <source src="_/views/Viewport.js" />
      <source src="_/classes/Storage.js" />
    </script>

It’d make pages lighter and I think it’s much easier to read. This is similar to how the new HTML5 <video> or <audio> tags work.

Would you prefer this at all?

Webkit Masked iPhone Navigation

Thu, 12 Aug 2010 17:23:00 -0700

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.

Lemonade

Thu, 05 Aug 2010 13:22:14 -0700

Lemonade:

9-bits:

Lemonade is a simple Ruby gem that adds automatic sprite generation to Sass.

Oooh. Nice.

Resizable Webkit Animated Loading Indicator

Wed, 04 Aug 2010 16:42:00 -0700

Resizable Webkit Animated Loading Indicator:

I’ve revised my previous version of the loading indicator so that the positioning is much cleaner, using less markup, less specific CSS selectors and allows you to do simple resizing. It’s also resolution independent since it’s created entirely with CSS so it looks great on your desktop or retina display. :)

Next step is to add some JavaScript for Firefox and see if I can’t use less keyframes for the animation. I think this will be possible using -webkit-animation-timing-function but I need to read up on it more.

I encourage you to use this on your projects and email me (jordandobson at gmail) with any feedback or improvements you come up with.

Using CSS3 Transitions, Transforms and Animation

Wed, 04 Aug 2010 12:12:34 -0700

Using CSS3 Transitions, Transforms and Animation:

webkitbits:

A fantastic overview from Rich Bradshaw, forkable on GitHub.

Now that I have Firefox4 up and running I’ll have to give animations a try in that browser.

themorningchew: guillee: Placehold.it, a simple image...

Wed, 04 Aug 2010 12:06:59 -0700

themorningchew:

guillee:

Placehold.it, a simple image placeholder generator. It can make images of any size by changing the URL, like so: http://placehold.it/500x300. You can also specify the colors and placeholder text from the URL. Pretty useful stuff.

I will definitely use this in the near future.

Webkit Animated Loading Indicator

Mon, 02 Aug 2010 23:00:00 -0700

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.

HTML5 Interactive Dribbble Infographic

Mon, 02 Aug 2010 14:46:00 -0700

HTML5 Interactive Dribbble Infographic :

This is a nice infographic explaining what dribbble.com is all about for all of you “rookies” out there.

I especially like the use of the flipping card to reveal explanation of dribbble lingo.

Courtesy of Andrew Kelly

FontFonter

Mon, 02 Aug 2010 14:07:00 -0700

FontFonter:

Try out FontShop’s Web FontFonts on sites like New York Times, Twitter, digg or any site of your choosing.