WebKitBits

Syndicate content
A tumblog about the browser engine built into Safari, Chrome, iPhone, Palm Pre, and Android.Written by David Kaneda, Creative Director at Sencha. Submissions welcome.Sponsor WebKitBits!
Updated: 1 year 3 weeks ago

Flexible nav demo

Mon, 01/10/2011 - 14:24
Flexible nav demo:

Benjamin De Cock is at it again with an awesome navigation bar that makes use of flexible CSS box layouts and some WebKit animations.

lukees: The Android 3.0 Preview looks fine. I reallllly don’t...

Thu, 01/06/2011 - 14:55


lukees:

The Android 3.0 Preview looks fine. I reallllly don’t like the navigation icons at the bottom left of the screen.

Chrome Web Store

Tue, 12/07/2010 - 17:00
Chrome Web Store:

Sure, it looks eerily like the iTunes store, but the Chrome Web Store is live with and pre-stocked with a variety of web apps, extensions, and themes.

The Nexus S, a new Android phone from Google looks pretty snazzy...

Tue, 12/07/2010 - 16:37


The Nexus S, a new Android phone from Google looks pretty snazzy and comes pre-packed with Android 2.3, “Gingerbread.” While it doesn’t pack a lot of new features in the browser (boo!), it does look like a noteworthy entry into the Android market. TechCrunch summarizes their review with:

The bottom line is this. If you are an iPhone user this isn’t going to make you switch. If you’re an Android user you will want this phone more than any other.

WebKit Clock is a gorgeous demo app, optimized for Safari and...

Tue, 12/07/2010 - 15:26


WebKit Clock is a gorgeous demo app, optimized for Safari and Chrome.

This site is driven with HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and NO image files. It’s optimized to WebKit rendering engine and you can see it with Safari and Google Chrome.

"That’s what HTML5 brings to the table, the freedom to create rich, dynamic and interactive..."

Tue, 12/07/2010 - 14:58
“That’s what HTML5 brings to the table, the freedom to create rich, dynamic and interactive experiences for any platform with a web browser.”

- John Ciancutti, VP of Personalization Technology at Netflix

Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support

Tue, 11/23/2010 - 14:59
Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support:

Word started spreading yesterday that the new 4.2 Safari handled WebSockets, but it looks like there was a lot more to the update than met the eye. Can’t wait to play with the accelerometer in browser.

Benjamin De Cock’s vCard

Mon, 11/22/2010 - 14:46
Benjamin De Cock’s vCard:

A simple new vCard website, with some beautiful CSS effects built in.

Google’s “20 Things I Learned About Browsers &...

Thu, 11/18/2010 - 15:36


Google’s “20 Things I Learned About Browsers & the Web” is an amazing, immersive use of Canvas and other cutting-edge HTML5 & CSS3 technology. It is so beautiful, in fact, that it resembles nothing of a Google product, but has the fit and finish of work you’d expect from the finest web designers. Bravo!

UPDATE: Joseph Schmitt informs me this project was outsourced to Fantasy Interactive.

CSS Lightbox

Mon, 11/08/2010 - 13:47
CSS Lightbox:

Benjamin De Cock has created a new lightbox demo based entirely on CSS, with no JavaScript used.

How much does it cost to develop an iPhone application?

Wed, 11/03/2010 - 13:04
How much does it cost to develop an iPhone application?:

fling:

An awesome thread on the real costs of developing an iPhone application. The market is skewed towards fast and cheap development. While we are seeing the entire consumer app market is focused on quality. The math doesn’t add up.

… Unless you can build as a web app.

37signals introduces Chalk, a simple drawing app for iPad, built...

Tue, 11/02/2010 - 13:14


37signals introduces Chalk, a simple drawing app for iPad, built on web technologies. Very nice use of Canvas. To view on your iPad, just pull up chalk.37signals.com.

It appears that Microsoft’s Outlook 2011 will be running...

Mon, 11/01/2010 - 17:16


It appears that Microsoft’s Outlook 2011 will be running WebKit under the hood:

While demonstrating Outlook for Mac and the HTML rendering engine, Microsoft employees revealed that instead of using the Word HTML rendering that previous versions of Mac Office used (and the PC version as well), Microsoft has moved over to Apple’s Webkit rendering engine to render HTML mails. Outlook 2011 also uses WebKit to create HTML mail.

Proud to say my avatar is one of the tiles in that Fix Outlook poster.

Wonder WebKit makes use of the WebKitCSSMatrix to create an...

Mon, 11/01/2010 - 10:00


Wonder WebKit makes use of the WebKitCSSMatrix to create an awesome book browser.

The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the 4 end points of the element, which is done porting OpenCV’s cvGetPerspectiveTransform function and some trickery, the JavaScript code is here.

List of CSS Cursors for WebKit

Wed, 10/27/2010 - 14:25

simurai: ZEPPELIN is an experiment trying to create a glass...

Mon, 10/25/2010 - 17:45


simurai:

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. Yes, another useless CSS3 demo. But I always try to keep the markup as minimal as possible.. this time there is only one extra

tag needed. I tried to use the :after pseudo-element, but somehow the animation didn’t work.

The refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cutout by the text using -webkit-background-clip: text. For the embossing effect a -webkit-text-stroke with a low opacity is used. Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike, it’s not just Flash, CSS can be misused too. So make sure you don’t loop the animation forever.

This experiment is inspired by Trent Walton’s example.

See the live demo.

Web Directions South 2010 Opening Titles

Tue, 10/19/2010 - 14:53
Web Directions South 2010 Opening Titles:

All done in HTML, CSS, and JavaScript. If you’re a designer with Gotham in your font collection, pop it open in Chrome — you won’t be disappointed.

HP webOS 2.0

Tue, 10/19/2010 - 13:25
HP webOS 2.0:

New minisite launched for the upcoming OS from Palm.

Jason from 37signals has posted a follow up to his first WebKit...

Thu, 10/14/2010 - 13:05


Jason from 37signals has posted a follow up to his first WebKit article, this time detailing how to customize forms with CSS3 and WebKit.

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

Fri, 10/08/2010 - 12:43
How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards:

This is the presentation I gave last week at Web 2.0, in which I discussed some of the ways to take a web page, and make it feel more like an application using HTML5, CSS3, and a variety of WebKit-specific features.