Profile

Cover photo
4,061 followers|23,535 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
Changeset 100535. Timestamp: 11/16/2011 17:28:25 (17 hours ago); Author: timothy_horton@apple.com; Message: Implement CSS3 Images cross-fade() image function https://bugs.webkit.org/show_bug.cgi?id=52...
46
59
Manik Rathee's profile photoRichard Assar's profile photoNicola Zanon's profile photoAnthony Montemorano'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,061 people
KevinG Lim's profile photo
Ricky Romero's profile photo
Ram Ratan Maurya's profile photo
Valentin Simion Pop's profile photo
Luciano Bonachela's profile photo
Егор Шахов's profile photo
Aleksandar Ružičić's profile photo
Ray Ni's profile photo
Riinav Gangar's profile photo

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
36
Marcel Jackwerth (sirlantis)'s profile photoIan Beveridge's profile photoIstiaque Ahmed's profile photoYoel Kaseb'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.