CSS Network

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

Readable CSS

on | Comments Closed

This is a very short post by Peter Foti giving what I think is a very good suggestion for readable CSS. The only criticism I have is that you should avoid the ID selector he’s using, and use a class instead. But the imaginary descendant selector he’s indicating (which is great for development code before you minimize and push to production) is a nice piece of advice that might work well with modular CSS where you try to avoid the descendant selector as much as possible.

Flexible Foundations

on | Comments Closed

Trent Walton with a very informative and practical look at the importance of thinking about flexibility (i.e. responsiveness) all through our pages, not just in the basic structure.

3D Book Showcase

on | Comments Closed

Another great demo by Manoela of Codrops. Says “best viewed in WebKit” but it looks and functions great in latest stable Firefox too.

Using Form Elements and CSS3 to Replace JavaScript

on | Comments Closed

This is the second article I’ve written for Adobe’s Developer Connection, covering some unique JavaScript-like functionality that can be achieved with form elements and CSS3. The article tries to focus on the concepts behind the techniques. And kudos to those who have pioneered these techniques (linked at the end of the article).

Sass for Designers

on | Comments Closed

I’ve been wanting to write an introductory-ish tutorial on Sass syntax for a while now. This post by Laura Kalbag (she seems to be everywhere lately!) seems close to what I was intending to write, so if you’ve not yet looked into Sass, this might be a good start.

Easing Functions Chooser

on | Comments Closed

A gallery of sorts of easing functions, so you can pick the one you want. Might come in handy when doing CSS3 animation as it gives you the necessary cubic-bezier code for each easing example.

How to Create a Simple Multi-item Slider

on | Comments Closed

I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous […]

Dropdown menus with a buffer zone

on | Comments Closed

This tweet by Paul Irish links to an old example that visually demonstrates improved usability for dropdown menus. This was in response to a modern example of the same thing tweeted by Chris Coyier.

Responsive Design for Apps — Part 1

on | Comments Closed

Jason Grigsby on a topic that probably isn’t discussed enough. From the intro: “A few months ago I was tasked with finding a good solution for a client who wanted to move to responsive design, but had a web app that they needed to support as well. The question they asked is one that I’ve seen others argue about in the past: does responsive design make sense for apps?”

CSS calc

on | Comments Closed

David Walsh with a simple look at CSS3′s calc() notation for quasi-dynamic lengths that don’t require JavaScript or a preprocessor.

Where to Avoid CSS Hyphenation

on | Comments Closed

Eric Meyer’s preliminary thoughts on what HTML elements should have hyphenation removed in CSS, assuming you’ve applied hyphenation with the hyphens property. Be sure to read the comments, too.

CSS Architecture

on | Comments Closed

(Reposted due to URL error) An extensive post by Philip Walton. I like what he says near the start: “[I]nstead of laying out an argument for my own set of best practices, I think we should start by defining our goals. If we can agree upon the goals, hopefully we can start to spot bad CSS not because it breaks our preconceived notions of what’s good but because it actually hinders the development process.”

CSS Animations with only one keyframe

on | Comments Closed

A simple tip by Lea Verou. I think most experienced devs know this, and the only reason we ever include those extra keyframes is for readability/understandability when writing tutorials and such.

More effects than a Hollywood movie

on | Comments Closed

From Digitalpaint’s HTML and CSS Advent Calendar, this post is worth it just for the on-page demos (with adjustable sliders) showing off WebKit’s filter features (sepia, blur, shadows, etc).

Polygon Drawing Tool for CSS Exclusions

on | Comments Closed

To see this tool in action, download Chrome Canary, then launch it and type “chrome:flags” in the address bar. Look for “experimental webkit features”, enable it, then relaunch Canary.

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.