CSS-Tricks @[email protected]

🎬 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/

Form design
https://css-tricks.com/form-design/

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

Read Me!
https://css-tricks.com/read-me/

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/

Proportional Resizing with CSS Variables by @shadeed9
.rect {
–size: 186px;
–aspect-ratio: 2.35;
width: var(–size);
height: calc(var(–size) / var(–aspect-ratio));
}
https://ishadeed.com/snippet/proportional-resizing-css-variables/

oh hey, the @toolsday podcast’s latest episode covers new and experimental#CSS
and who doesn’t need more @Una and @chrisdhanaraj in their#podcast feed, subscribe if you haven’t 🙆‍♀️
https://spec.fm/podcasts/toolsday/2shqs8x7

Try to build your idea with HTML and CSS and JavaScript and see how far you get. Just Google every single thing you don’t know. Start with “how to make a HTML page” Then “how to make text colored in HTML”. Then “how to make a button in HTML”
Great advice in Makebook by @levelsio

Setting up and Customizing the Ant Design System in a Nuxt App
https://css-tricks.com/setting-up-and-customizing-the-ant-design-system-in-a-nuxt-app/

How CSS Perspective Works
https://css-tricks.com/how-css-perspective-works/

AVIF has landed
https://css-tricks.com/avif-has-landed/

I’m excited for CSS to help distribute AVIF images! Here’s some demo code that follows current spec drafts:

• if in data saver / lite mode
• match first format supported
• match first resolution supported
• make that image the background
  image-set() spec
  Jake Archibald: 📝 AVIF has landed!
  ⬇️ Here’s how to use it today, and how it performs vs other web image formats.
  https://jakearchibald.com/2020/avif-has-landed/

One Action, Multiple Terminal Windows Running Stuff
https://css-tricks.com/one-action-multiple-terminal-windows-running-stuff/