CSS-Tricks @[email protected]

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/

Use#CSS to customize HTML list bullets (and more!) in the upcoming Chromium 86 release (Canary or Beta today)
🆕 individual && global selectors
li::marker {
color: var(–neon-pink);
}
li:first-child::marker {
font-size: 1ex;
}
Learn more 👉
https://web.dev/css-marker-pseudo-element/

How to Simplify SVG Code Using Basic Shapes
https://css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/

State of Jamstack 2020: Data Deep Dive by @kenticokontent.
https://css-tricks.com/state-of-jamstack-2020-data-deep-dive/

A Complete Walkthrough of GraphQL APIs with React and @fauna
(❥s for the sponsorship and useful info, Fauna gang!)
https://css-tricks.com/a-complete-walkthrough-of-graphql-apis-with-react-and-faunadb/

Re 😮 And there’s also a new#CSSPodcast today!
On one of my favorite topics: CSS Filters 🎉
Filter effects are very well supported and most can be polyfilled for IE6+
🤓 Learn more about them in Episode 23:
https://pod.link/thecsspodcast/episode/ZTU4NDI4ZGMtYTc1NC00Y2RlLWI5ZTYtYjlkM2IxOTAzNDZj

CSS Only Room Escape Game
This is an escape game only made in CSS.
I created all of the assets, using MS paint to draw the image, and Paint . net to make the background color of the PNG files into transparent.
#html#css#gamedev#game#puzzle
https://codepen.io/takaneichinose/pen/YzqreVp?editors=0000

Using @property for CSS Custom Properties
https://css-tricks.com/using-property-for-css-custom-properties/

making elements disappear with CSS
permalink:
https://wizardzines.com/comics/css-hiding/

Excluding Emojis From Transparent Text Clipping
https://css-tricks.com/excluding-emojis-from-transparent-text-clipping/

How to Use CSS Grid for Sticky Headers and Footers
https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/

Comparing Browsers for Responsive Design
https://css-tricks.com/comparing-browsers-for-responsive-design/