Notebook

webkitbits:

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.

CSS Lightbox

Key: use the :target pseudo-class selector. Pretty cool.

webkitbits:

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

Sneak: Fixing the background 'bleed'

I recently came up against an issue in Safari where the background colour of an element seemed to ‘bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). After seeing David Cole tweet about the same issue I resolved to find a solution,…

CSS3 loading spinners without images • CSS & (X)HTML • Kilian Valkhof

Pretty cool. It uses Javascript to make the spinner rotate with interval break. But I think it can be easier controlled by CSS Animation. So I modified its animation CSS like this:

@-webkit-keyframes rotateThis {

0%, 12.49% {-webkit-transform:scale(0.5) rotate(0deg);}

12.5%, 24.99% {-webkit-transform:scale(0.5) rotate(45deg);}

25%, 37.49% {-webkit-transform:scale(0.5) rotate(90deg);}

37.5%, 49.99% {-webkit-transform:scale(0.5) rotate(135deg);}

50%, 62.49% {-webkit-transform:scale(0.5) rotate(180deg);}

62.5%, 74.99% {-webkit-transform:scale(0.5) rotate(225deg);}

75%, 87.49% {-webkit-transform:scale(0.5) rotate(270deg);}

87.5%, 99.99% {-webkit-transform:scale(0.5) rotate(315deg);}

100% {-webkit-transform:scale(0.5) rotate(360deg);}

}

Opera 10.50 alpha beta comes with a set of nice improvements, including the long-waited HTML5 <video> tag, CSS Transform, CSS Transition, and some enhanced CSS3 properties like box-shadow or border-radius.

To quickly sum up the usage of those newly supported properties, just notice:

• CSS Transform and Transition are implemented with the -o prefix, so properties look like -o-transform: rotate(5reg);.
• Other CSS3 properties are directly implemented without any prefix. Notice that border-radius property is implemented without prefix, too, unlike -webkit-border-raidus in Webkit and -moz-border-radius in Gecko.
• HTML5 <video> only supports ogg format, the same and open format supported by Gecko / Firefox.

Visiting the Opera Developer Network may help you with further details.