🎉 Brand-new blog post just published, all about creating lush, life-like shadows in CSS.

Check it out here:

Or, keep reading for some highlights. 👇 Two white boxes with shadows. One has a grey boxy shadow, th
First, I wanna clarify that this isn't all just about aesthetics. It's important to understand *why* shadows are such a powerful tool.

Shadows give our application depth and realism, and let us focus attention by elevating important elements.
In the past, when I wanted to add a shadow, I'd play with the numbers until I liked the way it looked. As a result, I had a mess of incongruous shadows, breaking the overall illusion of depth 😅

We can avoid this problem by understanding how shadows work.
With all of that precursor knowledge out of the way, we can jump to the ✨ effects ✨

We leverage two tricks to enhance our shadows:
• Layering
• Color-matching
Instead of a single shadow, here's what happens if we use 5!

We can play with the offsets and blur radius to create a diffuse, life-like shadow: Two boxes with shadows. One is boxy and fuzzy, the other is
Most devs will use a transparent black as the shadow color. The problem with this is that it desaturates the shadow, leading to a "washed-out" quality.

If we pick a color based on the backdrop, it looks much more lush and natural: A shadow that slightly blends the background color. Labeled A standard shadow, grey and washed out. Labeled "Too grA vivid, glow-like shadow with the words "too bright&qu
This is one of my most value-packed tutorials ever. Seriously, I think you'll learn a ton of good stuff. We cover a bunch of stuff I haven't mentioned here, like how to incorporate these ideas into a design system, and how to add shadows to irregular shapes like a tooltip: A tooltip with a shadow
Read the full tutorial on my blog:

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Josh W. Comeau

Josh W. Comeau Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @JoshWComeau

30 Aug
The final module in my CSS course, “Little Big Details”, should go out to all Early Access testers today 🎉

Now that all of the core content is completed, I wanted to take a second and tally it all up.

🧵 A thread about numbers… Screenshot of a Github PR showing 10,632 lines of code added
The course features a bunch of different types of content: videos, articles, exercises, minigames, workshops.

• There are >150 videos as part of the core curriculum, and another dozen videos as part of the Video Archive (and growing!)
• There are 226 individual MDX lessons, with about 150,000 words*

*The calculated total is closer to 170k, but that includes code snippets and MDX components, so I'm guessing it's actually ~150k
Read 12 tweets
26 May
🌠 It's so easy to get sucked into performance micro-optimization territory.

Someone will say that Method X is slow, and inevitably somebody else will point out that it doesn't really matter outside of contrived, unrealistic benchmarks.

🧵 I wanna dig into that a bit…
Here's an example. We have a list of users, and we wanna filter so that we only show the people who are online.

We can do that with a "filter", or with a "reduce", or with a "forEach". Which is faster? Does it matter? Why or why not?

Code: codesandbox.io/s/crazy-herman… Screenshot of code snippet, taken from linked CodeSandboxScreenshot of a grid full of random names, taken from the re
Well, we can measure how long it takes!

Browsers come with a "Performance" API that lets us take high-res snapshots, offering sub-millisecond precision, so we can measure small gaps.

Here's what that code looks like: Screenshot showing some additional time measuring code, from
Read 22 tweets
12 Apr
Are you interested in teaching stuff to developers? Maybe through a blog, or a workshop, or an online course?

🧵 This thread is a quick summary of some of the most-critical stuff I've learned, over years of blogging, teaching at a bootcamp, and working in edtech at Khan Academy.
I believe that there are two categories of learning: active and passive.

Active learning means that the learner is doing something. They're solving a problem, writing some code, playing with an example. Passive learning is watching a video, listening to a lecturer.
Which one is better? Well, I think active learning is probably more effective, but it's also more draining. Nonstop active learning is *exhausting*.

I like to treat it like interval training: I intersperse both types, so that we're constantly hopping between them.
Read 19 tweets
6 Apr
From March 2020 to ~October 2020, I wasn't really able to use a keyboard/mouse.

I've been pretty public about how I worked around it (joshwcomeau.com/blog/hands-fre…), but I haven't been as public about how I overcame it.

🧵 This thread is about my personal experience with RSI.
This is a story about my own experience, not a tutorial for how to solve RSI. Everyone's different, and just because something worked for me doesn't mean it'll work for you.

Please read all the way through before trying anything.

[cw medical stuff / surgery discussion]
In March 2020, I injured my left arm. Certain activities, like typing, would cause a burning pain in the elbow, and occasionally the wrist or fingers.

In May 2020, the same thing started happening in my right arm.
Read 35 tweets
5 Apr
Over the past decade, writing cross-browser CSS has gotten easier — by and large, browser vendors implement the spec without many custom flourishes.

There are some surprising differences though. 😮

👇 This thread shares some scarcely-known browser differences.
Starting in Firefox 88, CSS outlines will match the radius of their elements. In these photos, an element with border-radius is given an outline.

This even works with `outline-offset` — outlines that are further away will be more rounded! A square with a rounded outline, with the label "firefoA square with a square outline, labeled "Chrome"A square with a square outline, labeled Safari
Next, colors!

On MacOS, both Chrome and Safari will "soften" colours, making them less bright and vibrant. Like a shirt put through the wash a few too many times.

These boxes all use the same color, hsl(345deg 100% 50%). A bright red square, labeled FirefoxA slightly-less-bright red square, labeled ChromeA slightly-less-bright red square, labeled Safari
Read 7 tweets
9 Mar
Around this time tomorrow (10AM EST), I'll be launching my first product as an indie hacker, CSS for JavaScript Devs (css-for-js.dev).

It has been one heck of a ride 😅. In this thread, I wanna share what the journey's been like ✨
In early 2020, I developed an RSI that made it impossible to use a keyboard/mouse. I spent months not using a computer at all, and then months training myself to code with dictation and an eye-tracker.

It's mostly better now, but this was a catalyst for my abrupt career change. A desk showing an iMac. There is no keyboard or mouse on the
I mention this because I think it's important framing: I'm not the type of person that would typically quit their secure, very-well-paid job as a staff engineer *during a pandemic* to pursue an unproven venture. But it felt urgent to me that I do this right now.
Read 23 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!