Post news Report content RSS feed A WebKit primer - part 1

WebKit is an amazing rendering engine, and what I'd like to accomplish in this article is give you a run down of various awesome features the WebKit rendering gives you with the use of an example: our chat UI.

Posted by jeffr on Sep 7th, 2009

Normally when you are designing a public webpage, you have to be really careful to make sure that it works in a number of browsers. Namely, FireFox, Safari, Chrome, Opera, IE 8, IE 7, and IE 6. The various versions of Internet Explorer are the worst because they are the most popular, yet also the most varied and broken. This forces you to use a very limiting subset of CSS and build up an encyclopedic knowledge of quirks in each browser.

However, there are a few times in a web developer's life when he or she is able to cast off these chains and focus on a specific browser. In our case, we are using WebKit to render all of Overgrowth's UI, thanks to the Awesomium library, built by the amazing AJS (accept no imitations).

WebKit is an amazing rendering engine, and what I'd like to accomplish in this article is give you a run down of various awesome features the WebKit rendering gives you with the use of an example: our chat UI.

Overgrowth Chat UI

This is actually relatively easy to make in WebKit, including the fancy animation effects (scroll down to see an animated gif).

First of all, all of the bubbles start out as a transparent border-image, like so:

-webkit-border-image: url(bubble.png) 7 10 12 10 stretch stretch;

Border image seems kind of unusual at first, but it is one of the most useful things in CSS 3. I will leave all of the specifics of how it works for another post, but basically it enables you to specify an image and a set of coordinates as seen above, and WebKit will deduce the four corners and four borders for your image. You can choose to either repeat or stretch the borders which means that your element can resize however you want and the borders will not be mangled. Pretty good for a single CSS definition.

Notice how the bubble can seamlessly grow both horizontally and vertically

Next, I need to give each bubble a color. This is easy, thanks to WebKit's ability to specify gradients as background colors. To convert the transparent border-image shown above into the green colored bubble, it takes a single line of CSS.

background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(rgba(43, 128, 0, 0.75)), from(rgba(169, 255, 127, 0.75)));

The text has a small white shadow to help legibility, with text-shadow:0 1px 0 rgba(255,255,255,0.2); and its fill opacity is reduced to 75% with -webkit-text-fill-color:rgba(0,0,0,0.75);

Long usernames are truncated seamlessly with an ellipsis with text-overflow: ellipsis;

If the text gets piled up too high before it has a chance to disappear, it gracefully fades out. To get this effect, I use the CSS mask property. This lets me specify a mask to finely control an elements transparency like so:

-webkit-mask: url(mask2.png) content, url(mask.png);

Finally, the coolest part of the chat system is the animations.

Overgrowth Chat UI

These are created with WebKit's CSS transitions. I will leave that for another post though.(permalink)

Track us on ModDB (visit our page)

Please join us here too:
Facebook icon ModDB icon Steam icon Twitter icon YouTube icon

Post comment Comments
feillyne Staff Subscriber
feillyne Sep 9 2009 says:

Very interesting and useful!

PS Among my all friends or people I talk with, only 1, only 1! uses Micro$oft IE. One person. Only one. And not original IE, but Avant addon!
Others mainly FireFox or Opera. Really. So IDK if IE is most popular... probably FF rocks most. ;-)

+1 vote   reply to comment
Packer Sep 9 2009 says:

Whale man :O!

+2 votes     reply to comment
INtense! Staff
INtense! Sep 9 2009 says:

I look forward to the day when all browsers use the same webkit library... the differences between them all (even the good browsers, firefox, safari etc) when it comes to rendering forms and effects is a daily nightmare

+2 votes   reply to comment
Dragonlord Sep 9 2009 replied:

If all would respect the W3C standards then there would be no need for webkits fixing browser drama. But this will most probably stay forever a dream. For the mean time though it's a workable solutions.

I assume that's a client side webkit then, right?

+2 votes     reply to comment
jeffr Author
jeffr Sep 9 2009 replied:

Yup :) It will be a long, long time before you can use this stuff publicly on the web. In Overgrowth, we have embedded WebKit with Awesomium, so we can go crazy with it. ;)

+2 votes   reply to comment
Kissaki Sep 11 2009 replied:

FF, Safari, and other webkit browsers a nightmare?
They are definitely not.

The one and only thing that will give me nightmares is IE, especially IE6.
The rest are smaller problems, if at all.

Of course, when using CSS3 style, you'll have to fiddle with more than necessary, as they have different names for the same things.
But that's not a problem either.

+1 vote     reply to comment
chris_sloany Sep 9 2009 says:

looks sweet!!

+2 votes     reply to comment
Noremakk Sep 9 2009 says:

Ooh, pretty.

+2 votes     reply to comment
Dra6o0n Sep 9 2009 says:

Any idea how much resources is used when your chatting with a lot of people?

+1 vote     reply to comment
Post a comment

You are not logged in, your comment will be anonymous unless you join the community. Or sign in with your social account:

Post news
Related Games
Overgrowth Adventure
Related Engines
Phoenix Engine
Phoenix Engine Commercial TBD
Related Groups
Wolfire Games
Wolfire Games Developer & Publisher with 4 members