Semantic CSS3 Lightboxes

Create a modal CSS3 lighbox effect. If you’ve ever come across a link or image which — upon clicking — increases in size and where the rest of the screen gets “shaded” to focus on the content, you’ll know what I’m talking about. This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and excluding Internet Explorer will require no scripting at all…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

Efficiently Rendering CSS

I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

Let’s cover some of the big ideas they present, and then discuss the practicalities of it all…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Using CSS3 Transitions, Transforms and Animation

First things first – these demos are showing of CSS transitions, transforms 2D and 3D and animations. Currently May 2010, transitions and 2D transforms are available in all current browsers at least in a dev build apart from Internet Explorer, 3D transforms and animations are only in Safari. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

The New Lens Flare – CSS3

By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Random Color CSS3 Animation

Ever since I wrote my first lines of code, I have had a strange interest in the functions that generate random numbers. and yes, I know actual random doesn’t exist Every time I just want to fool around with some code, you will find me popping in a random function in somewhere. So when I started playing around with CSS3 Animations the urge to use more random was always lurking around many a corner. I ended up writing a 50 frame CSS3 Animation that just looped through a bunch of random colors…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

SuperStretch! – A Vertically Fluid Layout Using CSS

Here’s a technique I created a while back that I have revisited and tidied up a bit. It results in a layout that stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Raindrop Logo in CSS

Playing around with -moz-radial-gradient this past while, and seeing the amazing job done on the CSS Opera logo by David Desandro, I thought I’d have a go at recreating one of the logos I illustrated within the past year using pure CSS.

The Raindrop logo I created was the prime candidate, as my first thoughts were “hey, three of the corners are basically -moz-border-radius set to 100%!” Done. Next was to figure out how to construct it…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

-webkit-font-smoothing

I’m not a big fan of the default text rendering in WebKit, in my opinion, it’s too heavy. There used to be a workaround where setting text-shadow would make the text thinner, but updating to Snow Leopard rendered that useless. Then someone found another hack using -webkit-text-stroke that seemed to work nicely, but it wasn’t usable on text-heavy pages, causing performance issues when scrolling. So you can imagine how happy I was when I saw Faruk Ateş tweeting something about -webkit-font-smoothing. Being the CSS geek I am, I whipped up a demo page you need the latest WebKit Nightly to properly see that page to see what exactly it did…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)