CSS Network

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

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.

In Defense Of Rem Units

on | Comments Closed

Great comprehensive discussion of rem units by Matthew Lettini, which also includes some really practical reasons to use them.

Offsetting an HTML element in a flexible container

on | Comments Closed

Marko Dugonjić discusses “how to handle flexible widths and paddings on a child element, if the container itself is set with flexible lengths” in responsive designs — a question he says has come up a number of times in his workshops and elsewhere.

Defending Presentational Class Names

on | Comments Closed

Philip Walton (remember that name, he’s a smart up and coming front-end blogger) writes on Codrops about so-called “presentational” class names, which many purists feel are wrong to use.

CSS Day

on | Comments Closed

A new conference where “Eight world-class speakers discuss CSS modules”. Looks interesting. First one is in June in Amsterdam.

Scoped style sheets supported in Firefox 21

on | Comments Closed

I’m not crazy about this feature, because it does not degrade gracefully thus making it pretty useless until we have cross-browser support. In this post, Cameron McCormack discusses what this feature is all about and adds the news that Firefox will support it in a future release.

inline-block: The complete story

on | Comments Closed

Here’s a blog I’ve never seen before. This looks like a pretty comprehensive look at inline-block. The post is a couple of weeks old, but I like the fact that it focuses on one specific CSS feature.

Campbell’s Soup 3D

on | Comments Closed

This is too cool not to share. Great use of CSS3 transforms in this demo. This is just one example from the new Form Follows Function project by Jongmin Kim.

What No One Told You About Z-Index

on | Comments Closed

After reading this one: mind = blown. This is a very enlightening article for anyone who’s had trouble with z-index. Great stuff from Philip Walton. I’ve insta-subscribed to his RSS feed, and if you know what’s good for you, you’d do the same. :)

Typesetting Responsive CSS3 Columns

on | Comments Closed

A very nice interactive demo and detailed description of CSS3 columns by Tommi Kaikkonen (the same person that did the super-popular interactive typography thing.

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.