Search
What I Wish I Knew About CSS When Starting Out As A Front-Ender
2.9.2021
Nathan Hardy shares when things “clicked”:
Reflecting back on this time, I think there are a few key concepts that were vital to things finally all making sense and fitting together. These were:
• The Box Model (e.g. box-sizing, height, width, margin, padding)•...
Efficient Infinite Utility Helpers Using Inline CSS Custom Properties and calc()
6.8.2021
I recently wrote a very basic Sass loop that outputs several padding and margin utility classes. Nothing fancy, really, just a Sass map with 11 spacing values, looped over to create classes for both padding and margin on each side. …
The post Efficient Infinite Utility Helpers Using Inline...
Using the Specificity of :where() as a CSS Reset
12.7.2021
I don’t know about you, but I write these three declarations many times in my CSS:
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
You might yell at me and say I can just put those in my CSS …
The post Using the Specificity of :where() as a CSS Reset appeared first on CSS-Tricks....
Use CSS Clamp to create a more flexible wrapper utility
17.2.2021
I like Andy’s idea here:
.wrapper {
width: clamp(16rem, 90vw, 70rem);
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
Normally I’d just set a max-width there, but as Andy says:
This becomes a slight issue in mid-sized viewports, such...
How to Create a Shrinking Header on Scroll Without JavaScript
16.2.2021
Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real …
The post How to Create a Shrinking Header on Scroll Without JavaScript appeared...
Using max() for an inner-element max-width
7.9.2020
I go into all this in The “Inside” Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is absolutely no problem using a nested element inside, but it’s also fun to look at the possibilities of making that work on...
Overlapping Header with CSS Grid
1.6.2020
Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:
Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom...
Create Diagonal Layouts Like it’s 2020
9.4.2020
Nils Binder covers the ways:
1. Use an SVG in the form of a triangle. This technique is nicely described by Erik Kennedy on CSS-Tricks.
2. Hide part of your section using clip-path. Read Diagonal Containers in CSS by Sebastiano Guerriero or Sloped edges with consistent angle...
Sass !default and themeable design systems
11.3.2020
This is a great blog post from Brad Frost where he walks us through an interesting example. Let’s say we’re making a theme and we have some Sass like this:
.c-text-input {
background-color: $form-background-color;
padding: 10px
}
If the $form-background-color variable isn’t defined then...
Negative Margins
9.3.2020
PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn't mention them at all, which I'll aim to fix.
Agree on this situation:
This is by far the most common use case for negative margins. You give a container a padding so that its contents have...
Fixed Headers and Jump Links? The Solution is scroll-margin-top
21.2.2020
The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the header you're trying to link to!
Fixed...
monica.css
20.2.2020
Monica Dinculescu:
I don’t want every possible padding and margin and colour and flexbox configuration in the world. I just want the ones that I know I end up using in every project. So here is monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take...
Animate Text on Scroll
13.1.2020
We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.
That demo is here:
See the Pen
Selfie Crawl by Chris Coyier (@chriscoyier)
...
CSS-Only Carousel
10.1.2020
It's kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.
Setting some boxes in a horizontal row with flexbox is easy.
Showing only one box at a time with overflow and making it swipable with -webkit-overflow-scrolling is easy.
You can make the "slides" line...
How Auto Margins Work in Flexbox
6.1.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...
Make a smooth shadow, friend.
19.12.2019
One box-shadow is cool and all, but check out Philipp Brumm's tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look.
This reminds me very much of the idea for easing linear-gradient. In a gradient, this smoothing effect is handled...
Auto Layout lands in Figma
5.12.2019
Here’s a fresh update to my favorite design tool that is thoroughly exciting: Auto layout! That means we can make frames that resize based on the size of the content within it. That's particularly useful for buttons in a design system where you want to drop a button on the page and then keep...
Masking GIFs with other GIFs
3.12.2019
The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:
See the Pen
Masking gifs with other gifs......
Oh Hey, Padding Percentage is Based on the Parent Element’s Width
13.11.2019
I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It's weird having top padding based...
Pac-Man… in CSS!
11.11.2019
You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property.
See the Pen
Animated Pac-Man by Maks Akymenko (@maximakymenko)
...