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/
All the Ways to Make a Web Component
https://css-tricks.com/all-the-ways-to-make-a-web-component/
Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS
https://css-tricks.com/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/
Working with JavaScript Media Queries
https://css-tricks.com/working-with-javascript-media-queries/
Using max() for an inner-element max-width
https://css-tricks.com/using-max-for-an-inner-element-max-width/
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
Supercharging Number Inputs
https://css-tricks.com/supercharging-number-inputs/
A new collection of CSS Gradients: Lens Flare! Colorful linear gradients with radial gradients stacked on top to give a “lens flare” effect:
https://www.gradientmagic.com/collection/lensflare
Stroke Text CSS: The Definitive Guide
https://css-tricks.com/stroke-text-css-the-definitive-guide/
