Topic: CSS

Learning from Lego: A Step Forward in Modular Web Design

by

It’s time to reexamine the toys in your conceptual toy box. When you see how to make web components modular down to the elements level, you may leave the Russian nesting doll metaphor and start to envision content blocks as Lego bricks. Samantha Zhang calls it a game changer.

Using CSS Mod Queries with Range Selectors

by

When you distractedly agree to do something that you then realize you don’t actually know how to do, what do you do? Briefly panic, and get down to work. Patrick Clancey comes up with a little arsenal of tools to help him deal with mods, ranges, and ranges within mods, allowing him to break away from standard-implementation fixed length or fixed-layout lists.

A Redesign with CSS Shapes

by

At least one set of crude hacks has left the building. With progressive and responsive enhancement—and using new CSS features—we can define how text should flow past a floated element. Eric Meyer explains what An Event Apart recently learned about floating shapes and feature queries.

Practical SVG

by

“Sizing svg is more complicated than sizing an img,” writes Chris Coyier in this excerpt from his new A Book Apart title Practical SVG. But, he continues, it’s complicated in a good way—it gives us more control and opens up some interesting new possibilities. Read on.

Meaningful CSS: Style Like You Mean It

by

Our markup too often remains a snarl of divs, our CSS a chaos of classes. Tim Baxter urges us to move beyond that. We can use real objects now instead of abstract representations. We can write CSS to support our markup instead of the other way around, and both can be more semantic and meaningful. The browser support is there; the standards are in place. Only habit is stopping us.

Finessing `feColorMatrix`

by

CSS filters lack the ability to do per-channel manipulation—a huge drawback. They may be convenient, but CSS filters are merely shortcuts derived from SVG; as such, they provide no control over RGBA channels. SVG (particularly the feColorMatrix map) gives us much more power and lets us take CSS filters to the next level. Una Kravets guides us through feColorMatrix and shows us how we can harness its power to create detailed filters.

Blending Modes Demystified

by

In an ideal world, we’d be able to modify a design or graphic for the web while keeping the original intact, all without opening an image editor. We’d save tons of time by not having to manually reprocess graphics whenever we changed stuff. Graphics could be neatly specified, maintained, and manipulated with just a few licks of CSS. Oh. Wait. We can do that! Justin McDowell gives us the lowdown on blending modes.

Mixing Color for the Web with Sass

by

We use color to influence mood, create an environment, and tell a story. 125 years ago, impressionist painter Claude Monet changed the way we think about color by describing light’s role in it. His observations have largely been lost on design for the web—but a preprocessor like Sass offers us unprecedented power to mix tints and shades that will imbue our palettes with more nuance.