Recreating MDN’s Truncated Text Effect
It’s no secret that MDN rolled out a new design back in March. It’s gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those gems is how card components handle truncated …
It’s no secret that MDN rolled out a new design back in March. It’s gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those gems is how card components handle truncated …
The :first
CSS pseudo-class is used with the @page
at-rule to select the first page in a printed document. It’s very similar to the way :first-child
selector works to target the first child element in a parent container, but instead …
The grid-auto-flow
CSS property is part of the CSS Grid Layout specification that allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties.
.grid-container {
display: grid;
… URL Shorteners are tools we use to make links shorter than they actually are. With a URL Shortener, you can transform a long link (maybe for a registration form or article) into a shorter version.
Behind the scenes, the long …
It’s not everyday that HTML headings are the topic de jour, but my folder of saved links is accumulating articles about the recently merged removal of the document outline algorithm in the WHATWG Living Standard.
First off, you should know …
Michelle Barker with my favorite sorta blog post: short, practical, and leaves you with a valuable nugget for your time. Here, she gets into logical property shorthands in CSS, particularly those that set lengths just on a single axis, …
Say you have a line in SVG:
<svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svg
You can use the stroke-dasharray
property in CSS to make dashes:
line {
stroke-dasharray: 5;
}
That 5
value is a relative unit based …
The grid-auto-columns
CSS property is part of the CSS Grid Layout specification, specifying the size of the grid columns that were created without having an explicit size. In other words, this property sets the size of implicit columns and …
The grid-auto-rows
CSS property is part of the CSS Grid Layout specification, specifying the size of the grid rows
that were created without having an explicit size. In other words, this property sets the size of implicit rows and …
I think it’s super timely that Jim Nielsen wrote about his office space the other day. My family recently re-rooted in Colorado and I was up late last night setting up my desk and everything around it. So late, in …
The print-color-adjust
CSS property is sort of like a cost-cutting measure when it comes to printing a webpage. You know how you can literally print a webpage on a piece of paper? That’s what we’re talking about. By applying print-color-adjust
…