Stealing Game Animation Techniques to Engage Users
@eli_the_brave at @devolverdigital shares the ultimate resource for animation inspiration on video games sites: the games themselves.
https://css-tricks.com/stealing-game-animation-techniques-to-engage-users/
Detecting Media Query Support in CSS and JavaScript
http://css-tricks.com/detecting-media-query-support-in-css-and-javascript/
RT Adam Argyle
CSS Gradient Shadow 😎
A pseudo-element, sized and positioned within the container, offset + scaled with transforms, then blurred with filters
demo
https://codepen.io/argyleink/pen/WNxeBKa
The Big Gotcha With Custom Properties
https://css-tricks.com/the-big-gotcha-with-custom-properties/
RT Nader Dabit | naderdabit.eth
My second ever blog post on @css is now live - Using Nuxt and Supabase for a Multi-User Blogging App
This project gave me the opportunity to dive back into @vuejs as well as @nuxt_js which I really enjoyed!
Blog post:
Code:
https://css-tricks.com/using-nuxt-and-supabase-for-a-multi-user-blogging-app/
https://github.com/dabit3/nuxt-supabase-full-multi-user-blog
RT Jen Simmons
Folks who write CSS:
What `-webkit-` prefixes do you still use most often?
I mean, which (if any) that you have to use to get things to work (not stuff a tool generates en masse).
Are there any `-webkit-` prefixed properties that you most want to have as real CSS properties?
RT Una Kravets 👩🏻💻
🚨 Add a custom color to your forms in 1 line of CSS: INTRODUCING the accent-color property!!
`accent-color: pink`= pink checkboxes, radio buttons, sliders, etc.
Landing in:
Chromium 93 (Aug 31)
Firefox 92 (Sept 7)
Read:
Try it:
https://web.dev/accent-color/
https://accent-color.glitch.me/
There are 253 Unicode arrows.
https://css-tricks.com/unicode-arrows/
"Basically, any time you run across some cool front-end thing, there might be an opportunity to make an interactive generator for that thing." —@johnpolacek
https://css-tricks.com/building-a-cool-front-end-thing-generator/
So, you have a reusable web component. And you have a CMS. @storykaboom shows how to make them work together in a WP setup.
https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/
Wanna see a whiter white?
https://css-tricks.com/wanna-see-a-whiter-white/
Where's the line between Static vs. Dynamic vs. Jamstack? @mikeneumegen says it's a lot blurrier than at first glance.
https://css-tricks.com/static-vs-dynamic-vs-jamstack-wheres-the-line/
Napkin: Sorta like Zapier, except you write code (if you want to) to make easy-to-build cloud functions that can be triggered by anything from RSS to HTTP requests to Slack messages.
https://css-tricks.com/napkin/
The little "View Source" tool by Neatnik makes it possible to view source on a mobile device!
https://css-tricks.com/view-source-on-mobile/
Parsing, processing, enhancing, and converting Markdown needs code. @KittyGiraudel has a way to keep Markdown out of the client in a Next.js application.
https://css-tricks.com/responsible-markdown-in-next-js/
One of the smaller and, yet for some reason, super exciting things about CSS nesting is how we'll be able to nest media queries.
https://css-tricks.com/css-nesting-specificity-and-you/
Cross-origin iframes are basically the heart of how CodePen works. You write code, we execute it for you in an iframe that doesn't share the same domain as CodePen itself, as the first line of defense. We didn't hear any heads up or anything.
https://css-tricks.com/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs/
Re Just another great post by @ChallengesCss
Great overview from Bramus on new units like lvh, svh, nd dvh, among others.
https://css-tricks.com/the-large-small-and-dynamic-viewports/
