Profile

Cover photo
4,186 followers|9,335 views
AboutPostsPhotosVideos

Stream

WebKit

Shared publicly  - 
 
Timothy Horton landed support for the CSS4 Images cross-fade() function. It can be used as a value for any property that expects an image, such as background-image and border-image, and will render a cross faded combination of the two images (including gradients) given.

The syntax is as follows:

background-image: -webkit-cross-fade(
url("background.png"),
url("foreground.png"),
50%);

Other use-cases include tinting an image with a solid color, fading it out using a linear gradient or highlighting part of the image using a radial gradient.

WebKit's implementation is currently available in WebKit nightlies, and is not completely finished yet. Support for animating cross-fades is still pending, and it's likely that there still are bugs as well.

The commit: http://trac.webkit.org/changeset/100535
Specification: http://dev.w3.org/csswg/css4-images/Overview.src.html#cross-fade-function

WebKit nightlies: http://nightly.webkit.org/
Examples: http://peter.sh/files/examples/cross-fading.html
45
62
Binyamin Laukstein's profile photoVinci Wong's profile photoEric Eggert's profile photoMilena Szałacka's profile photo
8 comments
 
There is no such thing as CSS4. There will never be a CSS4. https://plus.google.com/u/0/110977198681221304891/posts/8mRQaTPCTvo
Add a comment...
Have them in circles
4,186 people

WebKit

Shared publicly  - 
 
The rewritten implementation of the CSS Flexible Box Layout module has just been enabled! It doesn't only align WebKit much more accurately with the specification, but also delivers a lot more performance! +Ojan Vafai +Tony Chang

While not the entire specification has been implemented yet, it's definitely mature enough to replace the old implementation. Keep an eye out on http://webkit.org/b/62048 for updates on the missing features.

The commit: http://trac.webkit.org/changeset/100198
Specification: http://www.w3.org/TR/css3-flexbox/
15
39
Thomas Broyer's profile photoMoshe Brevda's profile photo
2 comments
 
+Moshe Brevda This is all about the "old" flexbox module, not the rewritten one (which no-one, but webkit as of now, supports; even IE10 ships with support for the old version).
Compare http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ and http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
Add a comment...
Story
Tagline
Unofficial page about WebKit, an open source web browser engine.
Introduction
WebKit is an open source web browser engine powering Apple Safari, Google Chrome, QtWebKit and WebKitGTK+ and is being developed by a wide range of companies including Apple, Google, KDE, Motorola, Nokia, RIM, Samsung, and the University of Szeged. This is an unofficial page curated by Peter Beverloo.