November 2010
1 post
9 tags
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...
October 2010
1 post
7 tags
Using Webkit CSS Gradients to Create iOS Tab Bar... →
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!
September 2010
3 posts
-webkit-line-clamp
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...
4 tags
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...
4 tags
Declaring Multiple Script Tags
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...
August 2010
8 posts
8 tags
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...
Lemonade →
9-bits:
Lemonade is a simple Ruby gem that adds automatic sprite generation to Sass.
Oooh. Nice.
6 tags
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...
4 tags
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.
3 tags
4 tags
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.
4 tags
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
4 tags
FontFonter →
Try out FontShop’s Web FontFonts on sites like New York Times, Twitter, digg or any site of your choosing.