Sign in

Ahmad Shadeed

@ishadeed.com
8.5K followers 169 following 1.1K posts

Design Engineer. 🎼 CSS Course: thelayoutmaestro.com 📘 Book: debuggingcss.com ✍️ Blog: ishadeed.com 📪 Newsletter: buttondown.com/ishadeed 📂 Made: defensivecss.dev, rtlstyling.com, a11ymatters.com

PostsRepliesMedia
Reposted by Ahmad Shadeed
Ahmad Shadeed @ishadeed.com · 28/09/2026
The Layout Maestro course is $30 off until Wednesday, 30th Sep. No code needed. Learn how to think about web layouts and decide which method to use and when. Check it out: thelayoutmaestro.com
thelayoutmaestro.com
The Layout Maestro by Ahmad Shadeed
Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.
056
Ahmad Shadeed @ishadeed.com · 28/09/2026
The Layout Maestro course is $30 off until Wednesday, 30th Sep. No code needed. Learn how to think about web layouts and decide which method to use and when. Check it out: thelayoutmaestro.com
thelayoutmaestro.com
The Layout Maestro by Ahmad Shadeed
Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.
056
Reposted by Ahmad Shadeed
Ahmad Shadeed @ishadeed.com · 24/09/2026
✍️ New Article: Detect when elements overlap with CSS Can CSS tell when two elements overlap? At first, I thought this was not possible, but it turned out it can be done with scroll-driven animations and anchor positioning. ishadeed.com/article/css-...
ishadeed.com
Detect when elements overlap with CSS
Detecting when two elements overlap using only CSS anchor positioning and scroll-driven animations.
57419
Ahmad Shadeed @ishadeed.com · 24/09/2026
✍️ New Article: Detect when elements overlap with CSS Can CSS tell when two elements overlap? At first, I thought this was not possible, but it turned out it can be done with scroll-driven animations and anchor positioning. ishadeed.com/article/css-...
ishadeed.com
Detect when elements overlap with CSS
Detecting when two elements overlap using only CSS anchor positioning and scroll-driven animations.
57419
Ahmad Shadeed @ishadeed.com · 22/09/2026
I got multiple review requests for CSS projects/tools based on articles I wrote or other content from the web. And they are very clearly vibe-coded. Why should I care and spend time reviewing when the person on the other side didn't spend time writing it? Let the AI review it for you then. Big no.
4620
Ahmad Shadeed @ishadeed.com · 19/09/2026
Made cookies for this week and mainly for Alma's lunch box. 🍪 I used a combination of 100% + 64% dark chocolate, the taste is balanced and less sugary.
A top view photo on a counter top that shows a cookies try, and a paper dish on a scale.A hand fully open with 3 cookies on it. In the background, there is a coffee corner, and a box full of rest of the cookies on a scale.
091
Ahmad Shadeed @ishadeed.com · 18/09/2026
I love publishing new content on my blog, and will keep doing so. It's a joy to share what you do with others. 💫
2342
Reposted by Ahmad Shadeed
Ahmad Shadeed @ishadeed.com · 15/09/2026
While working on a project, I paused a bit to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line. ishadeed.com/article/alig... This is a result of using lh, aspect-ratio, height: auto, flexbox and more.
A screenshot from one demo shows controls for icon, font and list. In the middle, there is a checkmark icon next to "How to align an icon to a label".
7768
Ahmad Shadeed @ishadeed.com · 15/09/2026
While working on a project, I paused a bit to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line. ishadeed.com/article/alig... This is a result of using lh, aspect-ratio, height: auto, flexbox and more.
A screenshot from one demo shows controls for icon, font and list. In the middle, there is a checkmark icon next to "How to align an icon to a label".
7768
Ahmad Shadeed @ishadeed.com · 06/09/2026
Today is the beginning of 1st grade for Alma 💜 Kids grow up so fast! Just yesterday, we started kindergarten.
0140
Reposted by Ahmad Shadeed
Adrian Roselli, pH0 @aardrian.bsky.social · 27/08/2026
Updated my link + popover nav post: adrianroselli.com/2026/07/link... Now includes `flex-wrap: balance` for the navigation items thanks to Ahmad Shadeed’s post: ishadeed.com/article/flex... I am amazed how much new CSS I see, then forget, seemingly immediately. #CSS
ishadeed.com
Balancing flex items with flex-wrap: balance
A look at how flex items wrap and how to balance them across lines.
0164
Ahmad Shadeed @ishadeed.com · 27/08/2026
It looks like Chrome is displaying range syntax media queries by default now in Devtools when using `max/min-width` in CSS. I like that! But not sure how devs with no knowledge of range syntax will perceive it. Maybe a tooltip might help?
140
Ahmad Shadeed @ishadeed.com · 27/08/2026
Split view is my favorite new feature in Chrome! Helps a ton when testing multiple viewport or container sizes.
370
Ahmad Shadeed @ishadeed.com · 26/08/2026
Oh, can't wait to see the random() function in Chrome. I used 2 times in my lab category page! Check it out in Safari in case you are curious :D lab.ishadeed.com/container-qu...
010
Ahmad Shadeed @ishadeed.com · 25/08/2026
✍️ New Article: Balancing flex items with flex-wrap: balance I explored flex-wrap: balance and flex-line-count and really enjoyed using them. I even made a masonry layout by mixing flex-line-count, round, clamp, and container queries units! 😀 ishadeed.com/article/flex...
ishadeed.com
Balancing flex items with flex-wrap: balance
A look at how flex items wrap and how to balance them across lines.
36111
Ahmad Shadeed @ishadeed.com · 23/08/2026
I didn't check the feed for a few days, and I like getting back to see the status of the dark/light debate. What is the latest?
110
Reposted by Ahmad Shadeed
Patrick Brosset @patrickbrosset.com · 23/08/2026
Great news! The CSS sibling-count() and sibling-index() functions are now Baseline Newly Available! I.e implemented in all major browsers.
web-platform-dx.github.io
sibling-count() and sibling-index() - Web platform features explorer
The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a c...
413930
Ahmad Shadeed @ishadeed.com · 23/08/2026
That post represents me too 😅
010
Ahmad Shadeed @ishadeed.com · 15/08/2026
Being a father requires you to learn things you never imagined. For example, how to deal with a 9 month baby boy and a 5 yr girl. You want to play with the baby and provide the same, or even more, care to the 5.5-year-old. Sometimes I forget that and then feel bad afterward, but I'm learning. 😅
2200
Reposted by Ahmad Shadeed
Bramus @bram.us · 10/08/2026
When you scroll a 2D scroller on the web, the browser may ignore some minor scroll deltas in the non-main scrolling axis when the user’s intent was to scroll only one axis. Sometimes this “railing” gets in the way … and with `scroll-axis-lock: none`, you can soon remove it 😊 brm.us/scroll-axis-...
28610
Ahmad Shadeed @ishadeed.com · 09/08/2026
I wish that Safari DevTools will make it easier to expand in DevTools. Currently, I must click on the arrow to expand/collapse an element or use the keyboard. In Chrome, I simply click on the 3 dots icon "..." and the section is expanded.
120
Ahmad Shadeed @ishadeed.com · 08/08/2026
When using CSS gradients to build an unusual background pattern, do you often struggle to remember how color stops work, and end up looking up the syntax online?
5190
Ahmad Shadeed @ishadeed.com · 07/08/2026
This is a great post to read, lots of useful UX and usability thoughts. I like this approach.
030
Ahmad Shadeed @ishadeed.com · 06/08/2026
I wish @webdevs.firefox.com will enable scroll-driven animations by default this year. Please! 🙏
2130
Reposted by Ahmad Shadeed
Stuart Robson @sturobson.com · 06/08/2026
🎉 new post! Dynamic Colour Schemes With Modern CSS What magical CSS can we use to create not just a quick and dirty colour palette, but a whole colour scheme? Anogulous? Complementary? Triadic? It's all here! www.alwaystwisted.com/articles/dyna… 🙏🖤
alwaystwisted.com
Dynamic Colour Schemes With Modern CSS
A practical walkthrough of building dynamic, theme-aware colour schemes in CSS with custom properties, OKLCH, color-mix(), and contrast-color().
3409
Reposted by Ahmad Shadeed
Ahmad Shadeed @ishadeed.com · 01/08/2026
The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...
A screenshot of the vertical spacing demo.A screenshot of the list fade demo.A screenshot of aligning an image height with the nearest line of text.
87812
Ahmad Shadeed @ishadeed.com · 01/08/2026
The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...
A screenshot of the vertical spacing demo.A screenshot of the list fade demo.A screenshot of aligning an image height with the nearest line of text.
87812
Reposted by Ahmad Shadeed
Ahmad Shadeed @ishadeed.com · 28/07/2026
A friendly reminder that I have a course on CSS layouts! Check it out and use "JUL26" to apply a $20 discount (Valid until July 31). thelayoutmaestro.com
thelayoutmaestro.com
The Layout Maestro by Ahmad Shadeed
Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.
03213
Ahmad Shadeed @ishadeed.com · 28/07/2026
A friendly reminder that I have a course on CSS layouts! Check it out and use "JUL26" to apply a $20 discount (Valid until July 31). thelayoutmaestro.com
thelayoutmaestro.com
The Layout Maestro by Ahmad Shadeed
Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.
03213
Ahmad Shadeed @ishadeed.com · 23/07/2026
Now I know why my demo with flex-wrap: balance is suddenly working on Chrome stable! Niice 🤩
0130
Ahmad Shadeed @ishadeed.com · 20/07/2026
I wrote about how to build a sport standings layout with grid and subgrid. If you haven't learned subgrid yet, this might be a good use case to see how it works! ✨ ishadeed.com/article/fifa...
A screenshot from the articles that shows how the grid layout nesting works with subgrid.
2262
Ahmad Shadeed @ishadeed.com · 19/07/2026
✍️ New Article: Rebuilding FIFA Standings Layout with CSS Subgrid I rebuilt FIFA’s standings layout with CSS Grid and subgrid. It starts with the layout problem, then moves into the final solution, with interactive examples along the way, as usual! 🔗 ishadeed.com/article/fifa...
ishadeed.com
Rebuilding FIFA Standings Layout with CSS Subgrid
A look at how to rebuild the FIFA standings layout by using CSS grid, subgrid, and more.
1295
Ahmad Shadeed @ishadeed.com · 15/07/2026
I decided to launch the new design for my CSS lab while it's a work in progress. It's still not perfect on mobile, but here we go. I attached the current live result plus a behind the scenes look from the Figma file. lab.ishadeed.com I will use this as the home for any new CSS experiment.
1221
Reposted by Ahmad Shadeed
CSS by T. Afif @css-only.dev · 08/07/2026
📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-fo... This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)
css-tricks.com
Get Ready For the Powerful CSS border-shape Property!
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
1319
Reposted by Ahmad Shadeed
Josh W. Comeau @joshwcomeau.com · 06/07/2026
Just published a blog post about the new CSS Anchor Positioning API! ⚓ I’ve been learning about it over the past few weeks, and it’s friggin’ great, but it also took me a minute to really get the hang of it. My goal in this post is to share the most useful bits, so you can start using it today. 🔥
joshwcomeau.com
Getting Started with Anchor Positioning • Josh W. Comeau
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a...
918032
Reposted by Ahmad Shadeed
Sophie @localghost.dev · 05/07/2026
I've given my website a bit of a refresh, using Temporal and CSS color-mix to change the background colour depending on your time of day localghost.dev/blog/time-ba...
localghost.dev
Time-based background colour transitions with Temporal and CSS color-mix - localghost
A visual refresh with a background that changes colour according to the time of day, using the new Temporal API along with CSS custom properties that blend into each other.
817522
Ahmad Shadeed @ishadeed.com · 04/07/2026
This hits hard. I sometimes ask myself what I'm doing? Then go back to work again, and so on (this is about public stuff like the blog, the upcoming lab design, course content, etc). Freelancing-wise, things are harder now. Though, I have no option but to keep going and trying in this new world.
3320
Ahmad Shadeed @ishadeed.com · 29/06/2026
Good morning everyone! ☕
A top view of a coffee corner with the cup in focus. The cup has a tulip latte art.
2531
Reposted by Ahmad Shadeed
Bramus @bram.us · 22/06/2026
New Blog Post: “Do Websites Need to Function Exactly the Same on Every Platform?” www.bram.us/2026/06/21/d... (Betteridge’s Law of Headlines applies)
bram.us
Do Websites Need to Function Exactly the Same on Every Platform?
While we’ve accepted that websites don't need to look the same everywhere, we seem to be stuck on a new hurdle: the idea that websites need to function the same everywhere.
3308
Ahmad Shadeed @ishadeed.com · 24/06/2026
Looking forward to this in Firefox!
0131
Ahmad Shadeed @ishadeed.com · 23/06/2026
In these times, a newsletter still feels personal. I wrote a short thought on something I did in CSS lately, sharing it in the next issue! (going out in 40 mins). Subscribe for the latest on CSS and design. buttondown.com/ishadeed
buttondown.com
iShadeed
Hello, this is Ahmad Shadeed. I work at the intersection of design and code. I usually publish CSS articles on ishadeed.com, defensivecss.dev, and rtlstyling.com. This newsletter is a place where I ca...
151
Ahmad Shadeed @ishadeed.com · 20/06/2026
Another thought while working on this. I'm solving problems that look simple, but require care and thinking. I'm confident to say that LLMs won't be able to figure this out, as it's solely depend on your CSS knowledge. I will compile all those thoughts and share them as an article or a video.
4564
Ahmad Shadeed @ishadeed.com · 19/06/2026
Working on my wife's portfolio website and solved a design problem by using CSS round(). This is a less used yet very useful function! Here is my article about it, and will update it soon with a new use case: ishadeed.com/article/css-...
ishadeed.com
Better fluid sizing with round()
Using the round() function to get a more predictable fluid sizing.
27813
Ahmad Shadeed @ishadeed.com · 16/06/2026
100% this. I always think about how the DevTools doesn't reflect the CSS features we have today. It's limiting..
130
Ahmad Shadeed @ishadeed.com · 16/06/2026
I felt that my email newsletter delivery isn't as before, so I asked people to reply if they got my email. So far, the stats are: Total subs: ~3300 Replies: 44 Open rate: 48% Click rate: 7% More than ever, email is an important asset these days and glad that I'm back into it.
120
Reposted by Ahmad Shadeed
Adam Argyle @nerdy.dev · 14/06/2026
Prop For That 📣 An a-la-carte #JS library for #CSS developers that writes meaningful realtime CSS variables to an element: - value of an input - pointer position - size of scrollbar(s) - colors in an image/video - element's visibility - tons more… nerdy.dev/prop-for-that
nerdy.dev
Prop For That
Everything JS knows, now CSS knows.
313330
Ahmad Shadeed @ishadeed.com · 11/06/2026
Excited about my new lighting setup! 🤩 I've been wanting to make videos for a while about CSS and design. What would you actually want to see first? 📹
2150
Ahmad Shadeed @ishadeed.com · 11/06/2026
Now that I attended #CSSDay last year, the FOMO is much higher compared to previous years. Enjoy it, everyone!
4220
Reposted by Ahmad Shadeed
Saron Yitbarek @saron.bsky.social · 10/06/2026
Our video covering everything new for web developers in Safari 27 is now up and it's all about ✨quality✨. BUT we got some fun stuff for you too -- Grid Lanes, Customizable Select, the <model> element, and more. Check it out ❤️ developer.apple.com/videos/play/...
developer.apple.com
What’s new in WebKit for Safari 27 - WWDC26 - Videos - Apple Developer
Explore what's new in WebKit — from Grid Lanes and Customizable Select, to HTML Model and Immersive Environments, and the latest for Web...
2346
Ahmad Shadeed @ishadeed.com · 09/06/2026
Oh, this brought back memories! I remember when I was following Photoshop tutorials to replicate the Sony logo when I was 14 😄
0150