Menu

CSS

Multi-Thumb Sliders: Particular Two-Thumb Case

January 7th, 2020

This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make…

How Auto Margins Work in Flexbox

January 6th, 2020

Robin has covered this before, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party. Say you have a flex container with some flex items inside that don’t fill the whole area. See the Pen ZEYLVEX…

New Year, New Job? Let’s Make a Grid-Powered Resume!

January 1st, 2020

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during…

So Many Color Links

December 27th, 2019

There’s been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment. Curated colors in context Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That’s a nice way to do it, because…

Moving Rainbow Underlines

December 23rd, 2019

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It’s not scroll-jacking — it’s just a minor design feature that uses scroll position to enact a little movement. To draw the rainbows themselves, we could use a linear gradient with…

Is Web Design Easier or Harder Than it was 10 Years Ago?

December 20th, 2019

Is it harder or easier to build a website now than 10 years ago? Has the bar gone up or down? I don’t have any data for you, but I can shell out some loosey-goosey opinions. HTML HTML5 was the only big HTML change in the last decade, and it wasn’t particularly dramatic. It’s cool…

CSS Architecture for Modern JavaScript Applications

December 6th, 2019

There is a lot to like from Mike Riethmuller here:

  • The title. When you’re building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it opens some doors to JavaScript-powered styles that you probably wouldn’t otherwise choose.
  • The personal experience and pragmatism. Drawing on five years of consulting, he’s seeing that component re-use and style understandability is suffering, not improving, partly due to every team having different approaches. He says “it’s

Read article

The post CSS Architecture for Modern JavaScript Applications appeared first on CSS-Tricks.

Firefox 71: First Out of the Gate With Subgrid

December 5th, 2019

A great release from Firefox this week! See the whole roundup post from Chris Mills. I’m personally stoked to see clip-path: path(); go live, which we’ve been tracking as it’s so clearly useful. We also get column-span: all; which is nice in case you’re one of the few taking advantages of CSS columns. But there…

Dark Mode Favicons

December 3rd, 2019

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel=”icon” href=”/icon.svg”>). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode!   <svg width=”100″ height=”100″ xmlns=”http://www.w3.org/2000/svg”> <style> circle…

Having a Little Fun With Custom Focus Styles

December 2nd, 2019

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find out…