shadeed9

shadeed9, 8 days ago to random

Two things I want to see in browser DevTools:

• Show the computed value of a CSS variable on hover (e.g: --offset: calc(1rem + 2cqw).
• Show the computed value in clamp() and highlight the active value.

🙏

shadeed9, 26 days ago to random

New article: Handling The Indentation of a Treeview Component

A look at how to handle the Treeview component indentation in CSS. I explored examples from GitHub, Photoshop Web, Figma, and more.

https://ishadeed.com/article/tree-view-css-indent/

shadeed9, 1 month ago to random

The view transitions spec is one of the best (if not the best) specs out there. Full of real-life examples and demos ✨

https://www.w3.org/TR/css-view-transitions-1/

shadeed9, 1 month ago to CSS

Here is a great use case for #CSS container queries, inspired by LinkedIn's feed.

✨ Show or hide each post action label (e.g: 'Like' or 'Comment') based on the container width. ✨

Learn more in my recent interactive guide about container queries: https://ishadeed.com/article/css-container-query-guide

video/mp4

shadeed9, 1 month ago to random

✨ An example showing the power of container queries, inspired from Github.

Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible.

Learn more: https://ishadeed.com/article/css-container-query-guide#github-repo-header

A video showing a mockup of Github's repo UI. When using media queries, UI elements are hidden even though their container is large enough. I showed how container queries are more suitable for that.

shadeed9, 1 month ago to random

container queries + style queries + :has() = 🤩🤩

A demo of a timeline that changes its design based on the container width and the number of items.

Learn more about container queries in this interactive guide: https://ishadeed.com/article/css-container-query-guide

A video depicting the resizing of a browser window. It features a timeline component that adjusts responsively according to the container size and the quantity of items it accommodates.

shadeed9, 1 month ago to random

Do I qualify for a home barista now?

shadeed9, 1 month ago to random

ICYMI, I published an interactive guide about CSS container queries ✍️

In the following demo, I showed how a news section can work with and without container queries. Play with it and see it yourself ✨

https://ishadeed.com/article/css-container-query-guide

An interactive demo of resizing a browser window. The layout contains multiple news card components with a switch to change between media and container queries.

shadeed9, 1 month ago to random

📝 Excited to share the interactive guide to CSS container queries.

I wrote about what container queries are, what the problems they solve, and how to use them along with interactive examples and visuals. Happy learning!

https://ishadeed.com/article/css-container-query-guide

shadeed9, 2 months ago to random

I'm working on the first section of my new CSS container queries interactive article.

I'm trying to focus on showing the problem they solve without using a card component example. Almost there 😅

shadeed9, 2 months ago to random

Good morning 😍

Not perfect, but I'm getting there! #LatteArt

shadeed9, 2 months ago to random

💡 With CSS :has(), we can build a simple quiz component that detects which answer is correct. If the user picks an incorrect answer, it will fade the correct one.

Details in the CSS :has() guide: https://ishadeed.com/article/css-has-guide

video/mp4

shadeed9, 3 months ago to CSS

With #CSS :has(), the possibilities are endless. Here is an idea 💡

Say we have a "File Download" component. If there is no image, we can show an icon based on the file extension.

.file:has([href$=".pdf"]) {
--bg: "icon-pdf.png";
}

Learn more: https://ishadeed.com/article/css-has-guide#file-download

video/mp4

shadeed9, 3 months ago to random

This is one of the demos in the CSS :has() guide. An interactive bookshelf 😬

I used CSS :has() to:

• Shift books from stacked to upright.
• Mount the frame on the wall.
• Throw the plant and globe onto the ground.

The guide: https://ishadeed.com/article/css-has-guide

A video shows a demo that represents a bookshelf. The user will add or remove books and the bookshelf will interact based on the number of books.

shadeed9, 3 months ago to random

🎉 I'm happy to publish a new interactive guide about CSS :has() selector.

The guide includes tons of visual and interactive demos that teach you everything you need to use :has() today.

https://ishadeed.com/article/css-has-guide

Happy reading!

Delete modal
A visual demo that showcase the usage of :has() to control a shelf with books.
A demo that shows how to use the value of a checkbox without JS.

shadeed9, 3 months ago to random

Almost there with one of the most extensive CSS articles that I wrote. This time, it's about CSS :has().

⌛️ Coming soon

shadeed9, 4 months ago to random

👋 In case you missed it, I published a guide on designing better target sizes.

This is one of the demos where the reader can experience tapping on small targets with different thumb sizes.

https://ishadeed.com/article/target-size

video/mp4

shadeed9, 4 months ago to random

I'm doing a research on CSS :has() and this is one of the best articles that I read. Learn about some advanced :has() use-cases, by @5t3ph.

https://www.smashingmagazine.com/2023/01/level-up-css-skills-has-selector/

shadeed9, 4 months ago to random

Small targets can be challenging to tap in shaky environments. This interactive demo simulates the experience of using your phone in a metro.

Learn more: https://ishadeed.com/article/target-size

A simulation that shows a mobile phone with a user who is trying to tap items from the bottom navigation while in a shaking environment.