CSS Network

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

Animating flexboxes: the lowdown

on | Comments Closed

“On a recent plane flight, I starting noodling around with combining flexbox properties, animations and transitions. I came to the conclusion that, for simple accordion-type UI features (see Figure 1), this can be quite useful.”

Writing the best CSS when building with HTML5

on | Comments Closed

Lengthy piece by Todd Motto, and probably nothing new to those using OOCSS or modular CSS. What I especially like about this article is that it gives some real practical reasons why these approaches are better than what we might be accustomed to doing.

Architecting Scalable CSS (Slide Deck)

on | Comments Closed

A nice slide presentation by Harry Roberts from his talk at Industry Conf. Best line in this one: “Changing a dozen classes in your HTML is a lot simpler… than picking apart a tangled stylesheet.”

Responsive News blog by BBC news crew

on | Comments Closed

I just discovered this blog that evidently is updated by the BBC news crew. Definitely worth subscribing to if you’re looking for responsive design trends associated with large applications.

Is Your Responsive Web Design too Fragile?

on | Comments Closed

I’ve noticed this problem and patiently have worked around it, but didn’t realize it was happening because of scrollbars. Good info from Craig Buckler, and you can also check out his follow-up post on the same subject.

shame.css

on | Comments Closed

I think this is a great idea by Harry Roberts. Bad code happens anyhow, so why not set some rules for it?

border-corner-shape Preview

on | Comments Closed

Lea Verou has created a tool to preview a far-future CSS property: border-corner-shape. Not entirely useful at the moment with no browser support, but it’s cool that she’s using SVG to mimic the effect.

Sportsnet TV Commecial — Responsive Design

on | Comments Closed

This is pretty cool. A national sports channel here in Canada is using the phrase “responsive design” in its TV ad. Interesting to see a web design term become this universal, used by non-techies.

Fun animations with CSS3

on | Comments Closed

First, this is a nicely designed website by Stephen Burgess, who is a Flash developer now starting to get into CSS3 and HTML5. And this is a nice little post explaining the animations he uses on his site.

Icon Stacks

on | Comments Closed

This might have performance/repaint issues, but an interesting improvement on icon fonts. Conor Muirhead discusses how to create complex multi-color icons using icon fonts, instead of the usual single-color icons.

Shadow DOM 201: CSS and Styling

on | Comments Closed

I haven’t yet delved into the details on shadow DOM. If you have, then you might be interested in this piece that talks about styling shadow DOM elements. Definitely not light reading, and probably far future as far as real-world use, but it’s cool to know that things are moving ahead.

Dynamic Selectors

on | Comments Closed

Philip Walton discusses an approach using Sass for avoiding class name conflicts in selectors when mixing CSS libraries.

A Wall Clock in Pure CSS

on | Comments Closed

The code is awful (i.e. don’t ever do this in a real project unless it’s a game or something), but the result is quite impressive.

virtual lane graphics for swimming with css3

on | Comments Closed

When it comes to CSS, this is as creative as it gets. This student (Xiaoyang Kao) actually created a CSS 3D Transforms-based overlay for a real video feed of a swim meet, to mimic what they do with CGI on live broadcasts.

Animating Circular Paths Using CSS3 Animations.

on | Comments Closed

Zoltan Hawryluk with an in-depth look at creating circular animation paths with just two keyframes (a technique Lea Verou discusses in her “10 More CSS3 secrets presentation…”. He also includes a jQuery-based script polyfill for IE

Flexbox Syntax for IE10

on | Comments Closed

Zomigi creates a nice chart explaining the difference between the 2011 syntax for flexbox and the current one. This is particularly important because of the fact that IE10 was released before the new syntax was formulated. Hmmm, I wonder how IE10 could fix that problem? *cough* auto update *cough*

Gone in 60 Frames Per Second

on | Comments Closed

The slides from Addy’s talk at jQueryTO. Definitely one of the highlights of the conference. Believe it or not, he actually recommended that, in some cases, it would be better to use an image in place of box shadow, if page performance was significantly affected by adding shadows.

CSS Floats Explained

on | Comments Closed

Excellent slide show by Russ Weakley covering the topic of floats. Nothing new here for experienced CSS developers, but great for beginners and those who might not fully understand the concepts behind floats and clearing of floats.

Responsive Tables

on | Comments Closed

Very cool solution for responsive tables by Aaron Gustafson. Very nice idea to use a pseudo-element to grab the data-attribute.

Simulate “float: down”

on | Comments Closed

Hugo discusses lots of different ways to do a “float: down” sort of effect. I’m not really crazy about many of these solutions, but I think it’s great to problem solve like this, especially when different devs get involved.

Ditching responsive design

on | Comments Closed

When I first saw the title of this one, I immediately assumed I probably wouldn’t like the reasoning. But I stand corrected; these are some really good reasons not to do a responsive design.

Devising a Strategy for Responsive Design

on | Comments Closed

We need more articles like this one that lay out exactly the types of things that should be considered before a responsive design begins. Too often, we just start coding, without properly mapping out all the challenges and how we will resolve them.