Search
Making Tables Responsive With Minimal CSS
17.10.2019
Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:
See the Pen
Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt)
...
Variable Fonts Link Dump!
21.9.2019
There's been a ton of great stuff flying around about variable fonts lately (our tag has loads of stuff as well). I thought I'd round up all the new stuff I hadn't seen before.
Google fonts has a beta of hosted variable fonts and the announcement demo is on CodePen.
Speaking of Google Fonts...
Two Browsers Walked Into a Scrollbar
18.9.2019
Surprise: scrollbars are complicated, especially cross-browser and cross-platform.
Sometimes they take up space and sometimes they don't. Sometimes that is affected by a setting and sometimes it isn't. Sometimes you can see them and sometimes you can't unless you're actually scrolling. Styling...
Multiline truncated text with “show more” button
4.9.2019
Now that we've got cross-browser support for the line-clamp property, I expect we'll see a lot more of that around the web. And as we start to see it more in use, it’s worth the reminder that: Truncation is not a content strategy.
We should at least offer a way to read that that truncated content...
Navbar Nudging on @keyframers
22.8.2019
I got to be the featured guest over on The Keyframers the other day. We looked at a Dribbble shot by Björgvin Pétur Sigurjónsson and then slowly built it, taking some purposeful detours along the way to discuss various tech.
We start by considering doing it entirely in CSS, then go for some light...
The Twelfth Fourth
4.7.2019
CSS-Tricks is 12 years old! Firmly into that Early Adolescence stage, I'd say ;) As we do each year, let's reflect upon the past year. I'd better have something to say, right? Otherwise, John Prine would get mad at me.
How the hell can a person go to work in the morning
And come home in...
Making width and flexible items play nice together
1.7.2019
The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.
The long answer
Let’s say you want to align an image and some text next to each other with like this:
Now let's say you reach for flexbox to make it happen. Setting the parent element to display: flex; is a good...
Different Approaches for Creating a Staggered Animation
27.6.2019
Animating elements, at its most basic, is fairly straightforward. Define the keyframes. Name the animation. Call it on an element.
But sometimes we need something a little more complex to get the right “feel" for the way things move. For example, a sound equalizer might use the same animation...
Different Approaches for Creating a Staggered Animation
27.6.2019
Animating elements, at its most basic, is fairly straightforward. Define the keyframes. Name the animation. Call it on an element.
But sometimes we need something a little more complex to get the right “feel" for the way things move. For example, a sound equalizer might use the same animation...
Movin’ Modals Along a Path
4.6.2019
Modals always be just appearin'. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from "above" or "below." But we can get weirder than that. Why not have them come in on an offset-path?
Just a swoopy arc is kinda fun.
...
Prevent Page Scrolling When a Modal is Open
3.6.2019
Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal.
That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant...
Change Color of SVG on Hover
13.5.2019
There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.
Let's look at the ways.
Inline SVG
Inline SVG is my favorite way to use...
A responsive grid layout with no media queries
9.5.2019
Andy Bell made a really cool demo that shows us how to create a responsive grid layout without any media queries at all. It happens to look like this when you change the size of the browser window:
I think this is a wonderful layout technique that’s just 6 lines (!) of CSS.
.auto-grid...
Getting To Know The MutationObserver API
8.5.2019
MutationObserver watches the DOM, specifically the places you tell it to, like:
document.querySelector('#watch-this');
...and it can tell you (trigger a callback) when stuff happens — like when a child is added, removed, changed, or a number of other things.
I used it just the other day...
Simulating Mouse Movement
15.4.2019
If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides and while talking.
This happened to me when I needed to show this particles demo to my students. I didn't want to have to stay next to...
Creating a Custom Element from Scratch
20.3.2019
In the last article, we got our hands dirty with Web Components by creating an HTML template that is in the document but not rendered until we need it.
Next up, we’re going to continue our quest to create a custom element version of the dialog component below which currently only uses...
Control Icons with Font Size
27.2.2019
Here’s a nifty trick from Andy Bell that now seems a little obvious in hindsight: if you set an SVG to have a width and height of 1em then you can change the size of it with the font-size property.
Try and change the font-size on the body element below to see the icon scale with the text:
...
Chris Coyier’s Favorite CodePen Demos IV
25.2.2019
Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again and again to heart it just that...
Revisiting the abbr element
7.2.2019
An irresistible HTML element deep dive from Ire Aderinokun, this time on the <abbr title=""> element for abbreviations. You can kinda just use it (JUI) and it works fine, but if you're hoping to make a tooltip for them (which works on touchscreens as well), then it's much more complicated....
Slide an Image to Reveal Text with CSS Animations
29.1.2019
I want to take a closer look at the CSS animation property and walk through an effect that I used on my own portfolio website: making text appear from behind a moving object. Here’s an isolated example if you’d like to see the final product.
Here’s what we're going to work with:
See the...