Inclusive Design 24
https://css-tricks.com/inclusive-design-24/
Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS
https://css-tricks.com/lessons-learned-from-sixty-days-of-re-animating-zombies-with-hand-coded-css/
Editing HTML Like A Boss In VS Code
https://css-tricks.com/editing-html-like-a-boss-in-vs-code/
Next up in our ongoing series on Web History… Chapter 4: Search, by @jay_hoffmann
https://css-tricks.com/chapter-4-search/
What is the Value of Browser Diversity?
https://css-tricks.com/what-is-the-value-of-browser-diversity/
PostCSS 8.0 “President Ose” was released! Changes:
The main feature is the new plugin API. Migration guide:
https://github.com/postcss/postcss/releases/tag/8.0.0
https://evilmartians.com/chronicles/postcss-8-plugin-migration
🎬 VIDEO ALERT! 🎬
My fellow Cascadians, the videos of the talks from our meet-up last week are now available! 🥳
Check the playlist out, enjoy the incredible talent of
@5t3ph, @cassiecodes and @argyleink and please SMASH that subscribe button!
https://www.youtube.com/playlist?list=PLkKNUEV9943M_nX4-V5kVr0B3pjp5sqhM
Virtual Event Registrations with Wufoo Forms
https://css-tricks.com/virtual-event-registrations-with-wufoo-forms/
SVG Daily Tip #17
By animating the viewBox of your SVG, you can create a camera effect 🎥
x & y, make the camera moves.
width & height, make the camera zoom.
Animation & source code:
#SVGTipOfTheDay#SVG
Louis Hoebregts: SVG Daily Tip #16
You can use JavaScript to know the length of an SVG path with the method getTotalLength.
Very useful for hand drawing animations✍️
Animation & source code:
#SVGTipOfTheDay#SVG
https://codepen.io/Mamboleoo/pen/QWNjdby
https://twitter.com/Mamboleoo/status/1292779801854582786
Winamp Skin Museum
https://css-tricks.com/winamp-skin-museum/
content-visibility: the new CSS property that boosts your rendering performance
https://css-tricks.com/content-visibility-the-new-css-property-that-boosts-your-rendering-performance/
Interaction Media Features and Their Potential (for Incorrect Assumptions)
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/
.logo {
display: flex;
place-items: center;
gap: .5ch;
font-size: 20vmin;
}
.logo > img {
max-block-size: 1.25em;
}
🤩 logo img height is 125% of a responsive font-size (20vmin) letter M.. relative units are so cool!
https://codepen.io/argyleink/pen/VwaQGxB
Using a brightness() filter to generically highlight content
https://css-tricks.com/using-a-brightness-filter-to-generically-highlight-content/
How to Get Handwriting Animation With Irregular SVG Strokes
https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/
Defining “View Source”
https://css-tricks.com/defining-view-source/
