Isotope
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.
jQuery Masonry
A dynamic jQuery plugin for the flip-side of CSS Floats.

I recently came up against an issue in Safari where the background colour of an element seemed to ‘bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). After seeing David Cole tweet about the same issue I resolved to find a solution, and it came in the form of the -webkit-background-clip property.

We are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids:
email, for the email field
tel, for the telephone field
number, for the credit card number and security code
required, for required fields
placeholder, for the hints within some of the fields
autofocus, to put focus on the first input field when the page loads

HTML5 Please great site that tells you what #HTML5, #CSS3 etc. features are safe to use. /via @Xeelix

I wanted to see the kind of impact these nice UI elements have on performance.

@bergcloud You know, you can make your buttons animate in Firefox too

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. To use them in your project, simply add the class to the element.

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. I don’t think this is practical and I hope people are aware of the limitations. Images and SVG are better tools for the job.

I spent a while this week looking into how best to automatically hyphenate text on websites, to improve Today’s Guardian. I couldn’t find anything recent that summarised the options, so here’s a quick run-down of what I discovered. If you know any more, or any better, please do correct me.

The term Responsive Web Design was coined by Ethan Marcotte and is the practice of using fluid grids, flexible images , and media queries to progressively enhance a web page for different viewing contexts.

By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page's representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution.

I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

Wha..??! RT @waxpancake: Two lovely CSS scrolling effects I saw today for the first time.

The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment. Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that don’t require images.

I was messing around with making buttons in CSS and thought I’d share the code I wrote. I discovered that using an inset shadow gives the button a little glow on the top.

Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

I've created a 3D slide deck that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to 'zoom' into topics to as deep a level as necessary. Slides are nested, like an outline.

RT @azaaza: A fantastic wish-list of near-term HTML and CSS features. Do want! /thx @iangilman

Pretty awesome demo about mixing HTML5, CSS3, WebGL, websockets... etc. Must see.

This is my personal playground which I use to explore visual effects, interactive experiments and technologies.

Each one of these icons was rendered in nothing but CSS, no images. Viewed best in Safari 5 or Google Chrome.

Impressive if a bit pointless: RT @typekit: Check out these image-free iOS icons: [in Safari/Chrome] #CSS3

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more.

Live demos of CSS3 effects

This presentation was originally created by Marcin Wichary and modified by Ernest Delgado. The purpose of the presentation is to show the coming bleeding edge features for modern desktop and mobile browsers.

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

Awed by @desandro's design portfolio. Great examples of what can be done with CSS3, HTML5, jQuery /via @philpeace

After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image).

A while back, I woke up one morning thinking, John Resig’s got some great CSS3 support in jQuery but it’s all forced into JS statements. I should ask him if he could set things up like Dean Edwards‘ IE7 script so that the JS scans the author’s CSS, finds the advanced selectors, does any necessary backend juggling, and makes CSS3 selector support Transparently Just Work. And then he could put that back into jQuery.