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/
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/
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/
Jetpack 8.9: Take Donations, Capture Email Subscribers, AMP integration, and More
https://css-tricks.com/jetpack-8-9-take-donations-capture-email-subscribers-amp-integration-and-more/
Going to (or throwing?) a conference soon?
Now that we’re settling into all virtual events, it would be good to get the ol’ conferences site updated with lots of choices:
https://conferences.css-tricks.com/
Menu Reveal By Page Rotate Animation
https://css-tricks.com/menu-reveal-by-page-rotate-animation/
