CSS-Tricks
@css

A website about making websites. Since 2007!

css-tricks.com
Joined April 2011
3,702 Photos and videos
Load newest
Detecting Media Query Support in CSS and JavaScript css-tricks.com/detecting-med…

Detecting Media Query Support in CSS and JavaScript | CSS-Tricks

You can't just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:

css-tricks.com
17
78
CSS-Tricks retweeted
Adam Argyle
@argyleink
21 Aug 2021
CSS Gradient Shadow 😎 A pseudo-element, sized and positioned within the container, offset + scaled with transforms, then blurred with filters demo codepen.io/argyleink/pen/WNx…
a rounded, green to blue, rectangle with a green to blue shadow effect underneath, as if the colors of the surface of the rectangle are sent into the underlying shadow.

ALT a rounded, green to blue, rectangle with a green to blue shadow effect underneath, as if the colors of the surface of the rectangle are sent into the underlying shadow.

::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, hsl(150 100% 50%), hsl(190 100% 60%) ); z-index: -1; transform: translateY(15%) scale(.85); filter: blur(30px); }

ALT ::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, hsl(150 100% 50%), hsl(190 100% 60%) ); z-index: -1; transform: translateY(15%) scale(.85); filter: blur(30px); }

24
264
2,016
The Big Gotcha With Custom Properties css-tricks.com/the-big-gotch…
4
22
97
CSS-Tricks retweeted
nader dabit
@dabit3
19 Aug 2021
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: css-tricks.com/using-nuxt-an… Code: github.com/dabit3/nuxt-supab…

Using Nuxt and Supabase for a Multi-User Blogging App | CSS-Tricks

Nuxt is a JavaScript framework that extends the existing functionality of Vue.js with features like server-side rendering, static page generation, file-based

css-tricks.com
4
13
88
CSS-Tricks retweeted
Jen Simmons@jensimmons
18 Aug 2021
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?
50
22
119
CSS-Tricks retweeted
Una 🇺🇦
@Una
17 Aug 2021
🚨 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: web.dev/accent-color/ Try it: accent-color.glitch.me/
All of the colors and swap of colors

ALT All of the colors and swap of colors

Accent-color demo

ALT Accent-color demo

16
358
1,483
There are 253 Unicode arrows. css-tricks.com/unicode-arrow…
4
19
75
"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 css-tricks.com/building-a-co…

Building a Cool Front End Thing Generator | CSS-Tricks

Whether you are just starting out on the front end, or you’ve been doing it for a long time, building a tool that can generate some cool front-end magic can

css-tricks.com
2
17
81
Stay alert css-tricks.com/stay-alert/

Stay alert | CSS-Tricks

A few days ago, Chris wrote up his thoughts about how alert(), confirm(), and prompt() were being deprecated by Chrome and collected a bunch of thoughts from

css-tricks.com
2
6
27
So, you have a reusable web component. And you have a CMS. @storykaboom shows how to make them work together in a WP setup. css-tricks.com/using-web-com…

Using Web Components in WordPress is Easier Than You Think | CSS-Tricks

Now that we’ve seen that web components and interactive web components are both easier than you think, let’s take a look at adding them to a content

css-tricks.com
1
7
38
Wanna see a whiter white? css-tricks.com/wanna-see-a-w…

Wanna see a whiter white? | CSS-Tricks

Heck of a CSS trick here from Dongsung Kim.

css-tricks.com
2
6
49
Where's the line between Static vs. Dynamic vs. Jamstack? @mikeneumegen says it's a lot blurrier than at first glance. css-tricks.com/static-vs-dyn…

Static vs. Dynamic vs. Jamstack: Where's The Line? | CSS-Tricks

You'll often hear developers talking about “static” vs. “dynamic” sites, or you may have heard someone use the term Jamstack. What do these terms mean, and

css-tricks.com
9
33
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. css-tricks.com/napkin/

Napkin | CSS-Tricks

We took a surface level look at Pipedream the other day, which really does look cool. It's like a much more modern and fancy version of what Yahoo Pipes was.

css-tricks.com
2
19
The little "View Source" tool by Neatnik makes it possible to view source on a mobile device! css-tricks.com/view-source-o…

View Source (on Mobile) | CSS-Tricks

Have you ever wished you could see the HTML source of a web page while on a mobile browser, which generally doesn't offer that feature? If you have a desktop

css-tricks.com
3
14
65
Parsing, processing, enhancing, and converting Markdown needs code. @KittyGiraudel has a way to keep Markdown out of the client in a Next.js application. css-tricks.com/responsible-m…

Responsible Markdown in Next.js | CSS-Tricks

Markdown truly is a great format. It’s close enough to plain text so that anyone can quickly learn it, and it’s structured enough that it can be parsed and

css-tricks.com
11
37
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. css-tricks.com/css-nesting-s…
8
28
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. css-tricks.com/choice-words-…

Choice Words about the Upcoming Deprecation of JavaScript Dialogs | CSS-Tricks

It might be the very first thing a lot of people learn in JavaScript:

css-tricks.com
2
24
71
Exploring the CSS Paint API: Image Fragmentation Effect css-tricks.com/exploring-the…

Exploring the CSS Paint API: Image Fragmentation Effect | CSS-Tricks

In my previous article, I created a fragmentation effect using CSS mask and custom properties. It was a neat effect but it has one drawback: it uses a lot of

css-tricks.com
2
18
83
Just another great post by @ChallengesCss
8
Great overview from Bramus on new units like lvh, svh, nd dvh, among others. css-tricks.com/the-large-sma…

The Large, Small, and Dynamic Viewports | CSS-Tricks

We've got viewport units (e.g. vw, vh, vmin, vmax), and they are mostly pretty great. It's cool to always have a unit available that is relative to the entire

css-tricks.com
10
37
Recent Nuxt releases are taking the developer experience to the next level, with some newer features that speed up and simplify developer processes. @sarah_edo shows us what's new in this post! css-tricks.com/new-nuxt-feat…
3
18
87
Load more