Posts tagged CSS3

leaverou on CSS3 gradients

Really good deck on CSS3 gradients.

Best viewed in either Firefox or Chrome as Safari doesn’t support some of the declarations.

Powerful New CSS Techniques and Tools

Looks like a really good collection of CSS3 trickery and practical effects.

Not a mobile web, merely a 320pixel-wide one

It’s not a new post (it’s new to me though) but it provides a really sensible discussion of responsive design and a call for designers to consider the users context and the capabilities of the viewing device. The St. Paul’s school example is especially telling.

Collection of responsive web designs

Good collection of web sites that employ media queries to reflow their content according to browser window size/display resolution. Nice to play with in my test rig here:

Test rig for mobile CSS3 media queries

Particularly noteworthy is Naomi Atkinsons site which animates on resize rather than just reflowing. Here is a direct link to load it in the test rig:

Naomi Atkinsons site in test rig (at SVGA)

Try switching the orientation at SVGA resolution.

Simple test rig for CSS3 media queries targeting mobile devices and supporting multiple screen resolutions.

On Papersnail with source available for forking on Github.

dropshado.ws: -webkit-line-clamp

webkitbits:

Incredibly useful tip about -webkit-line-clamp from Dave Desandro’s new blog, DropShado.ws. -webkit-line-clamp is like text-overflow: ellipsis but for paragraphs!

I did some quick testing to find it works on iOS 3+ but it did not work on Android 2.1 (Eclair).

I’ve been searching for this for ages.