CSS Lightbox
Benjamin De Cock has created a new lightbox demo based entirely on CSS, with no JavaScript used.
| CARVIEW |
Select Language
HTTP/2 302
server: nginx
date: Fri, 16 Jan 2026 02:00:00 GMT
content-type: text/plain; charset=utf-8
content-length: 0
x-archive-redirect-reason: found capture at 20101203200907
location: https://web.archive.org/web/20101203200907/https://webkitbits.com/
server-timing: captures_list;dur=0.745952, exclusion.robots;dur=0.051512, exclusion.robots.policy;dur=0.035478, esindex;dur=0.012318, cdx.remote;dur=50.436308, LoadShardBlock;dur=167.560075, PetaboxLoader3.resolve;dur=40.942055, PetaboxLoader3.datanode;dur=53.347498
x-app-server: wwwb-app211-dc8
x-ts: 302
x-tr: 260
server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0
set-cookie: wb-p-SERVER=wwwb-app211; path=/
x-location: All
x-as: 14061
x-rl: 0
x-na: 0
x-page-cache: MISS
server-timing: MISS
x-nid: DigitalOcean
referrer-policy: no-referrer-when-downgrade
permissions-policy: interest-cohort=()
HTTP/2 302
server: nginx
date: Fri, 16 Jan 2026 02:00:01 GMT
content-type: text/plain; charset=utf-8
content-length: 0
x-archive-redirect-reason: found capture at 20101118122245
location: https://web.archive.org/web/20101118122245/https://www.webkitbits.com/
server-timing: captures_list;dur=0.822818, exclusion.robots;dur=0.029541, exclusion.robots.policy;dur=0.012282, esindex;dur=0.013796, cdx.remote;dur=6.905264, LoadShardBlock;dur=116.852557, PetaboxLoader3.datanode;dur=114.605155, PetaboxLoader3.resolve;dur=133.643180, load_resource;dur=280.223727
x-app-server: wwwb-app211-dc8
x-ts: 302
x-tr: 450
server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0
x-location: All
x-as: 14061
x-rl: 0
x-na: 0
x-page-cache: MISS
server-timing: MISS
x-nid: DigitalOcean
referrer-policy: no-referrer-when-downgrade
permissions-policy: interest-cohort=()
HTTP/2 200
server: nginx
date: Fri, 16 Jan 2026 02:00:02 GMT
content-type: text/html; charset=UTF-8
x-archive-orig-date: Thu, 18 Nov 2010 12:22:45 GMT
x-archive-orig-server: Apache/2.2.3 (CentOS)
x-archive-orig-p3p: CP="ALL ADM DEV PSAi COM OUR OTRo STP IND ONL"
x-archive-orig-x-tumblr-user: webkitbits
x-archive-orig-link: ; rel=icon
x-archive-orig-vary: Accept-Encoding
x-archive-orig-x-tumblr-usec: D=238414
x-archive-orig-x-cache: MISS from rack1.tumblr.com
x-archive-orig-x-cache-lookup: MISS from rack1.tumblr.com:80
x-archive-orig-via: 1.0 rack1.tumblr.com:80 (squid/2.6.STABLE6)
x-archive-orig-connection: close
x-archive-guessed-content-type: text/html
x-archive-guessed-charset: utf-8
memento-datetime: Thu, 18 Nov 2010 12:22:45 GMT
link: WebKitBits · A tumblog about the browser engine built into Safari, Chrome, iPhone, and Android.
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!
Written by David Kaneda, Creative Director at Sencha. Submissions welcome.
Sponsor WebKitBits!
Latest from @WebKitBits:
How much does it cost to develop an iPhone application?
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 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 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 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
Bookmarked.
(Source: jayrobinson)
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 <p> 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.
2009–2010 David Kaneda