In Defense of a Fussy Website
26.6.2020
The other day, I was doom-scrolling Twitter and saw a delightful article titled “The Case for Fussy Breakfasts.” I love food — especially breakfast — and since the pandemic hit I’ve been using my breaks in between meetings (or, shh, sometimes in meetings) to make a full bacon, poached...
Line-Animated Hamburger Menu
26.6.2020
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
CodePen Embed...
Inspirational Websites Roundup #16
26.6.2020
This special collection of wonderful websites will get you up-to-date on current web design trends.
The post Inspirational Websites Roundup #16 appeared first on Codrops
Grid for layout, flexbox for components
26.6.2020
When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
Ahmad...
The Mad Magazine Fold-In Effect in CSS
25.6.2020
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line...
Some Typography Links
25.6.2020
I just can’t stop opening excellent typography-related articles, which means I need to subject you to blog posts that round them up so I can clean up my open tabs.
Vistaserve is “a grass-roots web hosting initiative hailing from Thornbury, Australia. Inspired by the quirky web of...
Collective #611
25.6.2020
The Return of the 90s Web * keen-slider * Grid Cheatsheet * RSS Box * Styling Layout Wrappers In CSS
The post Collective #611 appeared first on Codrops
The Analytics That Matter
25.6.2020
I’ve long been skeptical of quoting global browser usage percentages to justify their usage of browser features. It doesn’t matter what global usage of a browser is, other than nerdy cocktail party fodder. The usage that matters is what users on your site are using, and that can...
How to Disable Code: The Developer’s Production Kill Switch
25.6.2020
The following is a guest post written by Carlos Schults.
Being able to disable code in production is a power that many developers aren’t aware of. And that’s a shame. The ability to switch off some portions—or even complete features—of the codebase can dramatically improve the software development...
Hide Scrollbars During an Animation
24.6.2020
CSS still can’t animate to auto dimensions.
.dropdown {
transition: 0.2s;
height: 0;
}
.dropdown.open {
/* the height will change, but it won't animate. */
height: auto;
}
There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back....
How to Make localStorage Reactive in Vue
24.6.2020
Reactivity is one of Vue’s greatest features. It is also one of the most mysterious if you don’t know what it’s doing behind the scenes. Like, why does it work with objects and arrays and not with other things, like localStorage?
Let’s answer that that question, and while we’re at it, make...
A Glitchy Grid Layout Slideshow
24.6.2020
An experimental grid slideshow with a stack-like navigation and glitch effect.
The post A Glitchy Grid Layout Slideshow appeared first on Codrops