CSS Network

Various external hand-picked links to CSS-based content from around the web. Subscribe via RSS.

Decouple CSS

on | Comments Closed

An article on CSS modules posted on a new blog called “The Nitty Gritty”, just launched by Hans Christian Reinl and Kahlil Lechelt.

Sprites animated with steps()

on | Comments Closed

This is a cool technique from Simurai using CSS3 keyframe animations with the steps() syntax as the value for the timing function. Very innovative as it allows you to animate a PNG (which has more colors than GIF). He even links to a site that’s already using this technique for their logo.

Focal Point: Intelligent Cropping of Responsive Images

on | Comments Closed

This might be a tad overkill with the extra markup and calculations, but once you get used to it (and assuming it’s not bad for performance), it looks like a really cool solution to ensuring images have a common focal point on all screen sizes.

CSS prefixes: it’s not that simple

on | Comments Closed

Good article by David Storey. I like this part: “Online content becomes stale, but newer and more accurate information takes a while to bubble to the surface, because older articles have had time to build up strong search engine ranking.” Very true.

One div

on | Comments Closed

This resource, it seems, has just launched, so although there’s not much here, it would be cool to check it out in a few months or so. It’s a repository for easy copy-and-paste single div, pure CSS icons.

Hyphenation Works!

on | Comments Closed

A simple reminder from PPK that CSS3 hyphenation is now supported in three modern browsers. I wonder: Would this be something appropriate for a CSS reset?

jQuery Animations vs. CSS3 Transitions

on | Comments Closed

I have no idea of the validity or relevance of this test, but it’s interesting to see (in this example at least) how much better transitions perform than jQuery animations.

Hayaku!

on | Comments Closed

If you use Sublime Text 2, and want to speed up your CSS development, this looks very cool. Evidently, it’s supposed to learn your style of coding, so you don’t really have to remember any abbreviations. Seems too good to be true, and may cause more problems than it’s worth. But certainly worth a look.

Duri.me

on | Comments Closed

I still can’t wrap my mind around why data URIs even work to begin with, but this data URI generation tool looks like the nicest and easiest one to use yet.

The state of CSS 3D transforms

on | Comments Closed

I’m really disappointed that this demo is of a guy pointing a gun (do we need more violent imagery in this world?), but this article and demo are must-see content for CSS3 developers.

Code smells in CSS

on | Comments Closed

This article is one of the best articles you’ll read covering CSS practices to avoid. Great stuff by Harry Roberts that I’m sure we’re all guilty of.

Why I Switched From LESS to Sass

on | Comments Closed

A lengthy article, but probably relevant to anyone using a preprocessor, and particularly useful for those still wondering about the LESS vs. Sass issue.

display: none;

on | Comments Closed

Laura Kalbag discusses “mobile first”, with a focus on why display: none shouldn’t be overused in responsive layouts.

kids—an nth-child tester

on | Comments Closed

A nice easy visual way to test and learn how :nth-child() works. Probably more useful if you already know the syntax to some degree, because this won’t teach you from scratch, but a nice clean way to do it nonetheless.

The CSS Problem

on | Comments Closed

A briefly stated but valid concern about the direction and future of CSS, and our current understanding of it.

CSS3Ps

on | Comments Closed

Yet another one of these “Photoshop styles to CSS3″ tools, this time free and in the cloud.

CSS text-transform and clipboard functionality

on | Comments Closed

I’ve thought about this many times, whether or not uppercase text that is lowercase or title case in the source code should be copied to the clipboard in lower/title or upper. I don’t think CSS should affect what is copied to the clipboard. But Hallvord makes a good point in saying that this shouldn’t break user expectations.

An IE10+ Hack?

on | Comments Closed

Apparently this works in IE10 and nothing else, but might also work in later versions of IE.

Moving IE specific CSS into @media blocks

on | Comments Closed

I’ve seen this sort of hack before, but didn’t realize there were so many IE version-specific options for it. Interesting, and as pointed out in the comments, this might be useful for mobile first styles, so you can keep everything in the same place.

CSS Filters Polyfill

on | Comments Closed

Might be some performance issues with this, but an early polyfill for CSS filters, which are only available in Webkit right now.

CSS3 Conic Gradients

on | Comments Closed

This is not yet supported by any browser that I know of, but it looks like a couple of months ago the conic-gradient notation was added to the latest images spec (CSS4 images, which is, oddly, still part of CSS3).

Media Query Mario

on | Comments Closed

Another cool demo, this time on MDN. This is a Super Mario Brothers clone, but done using CSS3 animations that are triggered by resizing the browser window.

CSS Tucked Corners

on | Comments Closed

A simple technique for creating a ‘tucked corners’ effect, where it looks like a card with its corners tucked into little diagonal pockets.

Pure CSS3 Push Down Panel

on | Comments Closed

This is a very interesting effect that uses a checkbox to mimic some JavaScript behaviour. Pure CSS3, and it has pretty good browser support.

jResize jQuery Plugin

on | Comments Closed

There are so many responsive web design ‘testing’ tools and scripts. I haven’t yet found one that’s easier than just resizing the window. Until now. Maybe I’m wrong, but this one looks much more useful than all the others.