Home - Ahmad Shadeed
Deep-dive CSS articles, modern CSS and visual CSS explanations.| ishadeed.com
| Ahmad Shadeed
Using container queries and CSS :has() to build a feature image.| ishadeed.com
| Ahmad Shadeed
A few interesting CSS findings from the threads app by Meta.| ishadeed.com
A fresh look at the CSS grid template areas and how to take advantage of its full potential today.| ishadeed.com
Learn how to use CSS container queries today.| ishadeed.com
Let's learn about how CSS container queries work with lots of examples and use-cases.| ishadeed.com
How to align content with another section given that they are placed in different wrappers| ishadeed.com
In this article, you’ll learn how to build an Apple Music playback header in CSS. I will go through the non-logged state of it. Please note that basic knowledge in Flexbox and CSS Grid is required to follow along. However, I will try to make the concepts as simple as possible.| ishadeed.com
In CSS, we have the value auto which could be used for properties like margin, positioning, height, width, and a lot more. I felt that I need a place to document everything I know about them so that it can be a reference for anyone interested to dig into the auto thing.| ishadeed.com
Back in 2007, when I first learned about blending modes in Photoshop, it was a life-changing moment for a 15 years old kid. I wanted to explore them in CSS and share that experience with you.| ishadeed.com
While surfing the web, I noticed an old navigation design that dates back to 2010. I used to design such things on Photoshop that are rich with shadows, gradients, backgrounds and separator lines. They are called Skeuomorphic designs.| ishadeed.com
Learn how to use SVG and CSS to build UI components| ishadeed.com
In this article, we will explore a concept that lets us resize our components by using CSS relative units (%, em, or rem). Not just the type size, but all the UI in that component. We’ll look at practical examples, pros and cons of the approach, and even a complete web page built out in this manner.| ishadeed.com
How to align a button content in web fonts with large spacing above and below the text.| ishadeed.com
Have you ever tried to click or tap on an element (e.g.: button, link) and you realize that it doesn’t respond until you click on a specific area of it?| ishadeed.com
An introduction about CSS clip-path, how it works, with example and use-cases.| ishadeed.com
A note regarding how the browser deals with clipping scrollable areas on the block-start and inline-start sides| ishadeed.com
How to compare the design and the code result in CSS to achieve consistency| ishadeed.com
How to use CSS comparison functions to create a conditional border radius| ishadeed.com
CSS is condtional in many ways. In this article, I will go over a few CSS features that we use every day, and show you how conditional they are.| ishadeed.com
CSS Container queries, a long-requested feature by web developers is coming soon to CSS.| ishadeed.com
Variable fonts are an evolution of OpenType font specification that allows us to have different font variations (width, weight or style) in a single file. That means, we can load only one font that can have many variations, instead of having multiple fonts loaded for each weight or style.| ishadeed.com
My thoughts on why cross-browser development is better than in the past.| ishadeed.com
Learn how to use the native CSS aspect-ratio property| ishadeed.com
Colors play a vital role in making a web page usable or not. In CSS, we can control the foreground and background color of an element with the color and background properties. When I learned CSS back in the years, there wasn’t a straightforward guide or way to learn how to use colors in CSS.| ishadeed.com
From what I see, CSS counters are underused on the web, even though their support is really good (IE8+)!. In this article, I will explain how you can use CSS counters in your projects, along with some use-cases.| ishadeed.com
While building a component, we sometimes don’t think about what will happen in case there was no content. How does it will look? In CSS, we have a useful pseudo-class :empty that provide us with the ability to check if the content of an element is empty or not. In this article, we will explore some use cases and real world examples where :empty can be useful.| ishadeed.com
How to Build Web Form Layouts With CSS Grid| ishadeed.com
It’s almost the end of 2016, our needs for a robust and powerful way of laying out elements on the web is increasing everyday. We need to build a unique and art-directed layouts in the easiest way in CSS. Grid layout is here to provide us with a way to divide content into rows and columns, with the ability to move and shift them without affecting the source order.| ishadeed.com
A deep-dive into the CSS :has parent selector with some use-cases and examples.| ishadeed.com
How to use CSS logical properties to build multi-directional web layouts| ishadeed.com
Learn about CSS comparison functions min(), max(), and clamp()| ishadeed.com
When we’re very focused on working on a web project, we tend to forget or do some mistakes that can lead to an invalid CSS code. I like to call these “Autopilot mistakes”. The kind of mistakes that make us ask ourselves: “Oops, why did I do that?”, and solving them doesn’t take much time, only if you found them in the first place.| ishadeed.com
Thinking about how to enhance the CSS nesting UX in DevTools.| ishadeed.com
A new CSS property that will help in cropping images similar to how we use the viewBox in SVG.| ishadeed.com
A Deep CSS Dive Into Radial And Conic Gradients| ishadeed.com
An in-depth article on CSS scroll snap, why to use, how it works, and lots of examples.| ishadeed.com
An in-depth article on how to handle short and long content in CSS.| ishadeed.com
While working on a demo for an article, I needed an easy way to create a grid layout. For example, laying out a grid of five columns without touching CSS every time I change my mind. Throughout this article, I will explore some use cases and think out loud with you on how to do them.| ishadeed.com
Recently, while editing some CSS in Opera inspector, I noticed a CSS property called writing-mode, that was the first time I knew of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.| ishadeed.com
Learn about the old and new way to style custom scrollbars in CSS.| ishadeed.com
I was browsing the web and an interesting effect caught my eye on a website. It’s a custom link underline effect that is using hardcoded SVG.| ishadeed.com
I might be late to the game, but I decided to make a dark color version of my website. It becomes necessary now as Apple recently added this feature natively to iOS 13. More users will expect dark layouts over time. In this article, I’ll show you how I worked on the dark color version of ishadeed.com, my blog.| ishadeed.com
A deep dive into building Facebook Messenger’s Chat Bubble| ishadeed.com
A look at some interesting use-cases for CSS flexbox and grid in Figma app.| ishadeed.com
Learn how to debug and find the root cause of a CSS bug.| ishadeed.com
Flexbox is one of the best additions to CSS. I found it very useful to code elements and making them adapt easily to different screen sizes.| ishadeed.com
Using CSS flexbox default stretching behaviour to create a dynamic line separator.| ishadeed.com
While working on a design project, I needed to build a football ticket with cut-out edges on the right and left sides. Initially, I thought that it would be simple and won’t take much time. It turned out to be an exciting challenge that I’ve decided to document and share with you.| ishadeed.com
Since CSS Grid became supported in the major browsers back in March 2017 (Almost three years ago), I started using it in my personal and client projects, of course, with a proper fallback for non-supporting browsers. I also made a tool called grid-to-flex which generates a flexbox fallback for a grid.| ishadeed.com
Learn when to use flexbox and CSS grid with examples and use cases.| ishadeed.com
Handling Long and Unexpected Content in CSS| ishadeed.com
Learn how to handle text over images in CSS by taking accessibility in mind| ishadeed.com
Through our work as web developers, we need to hide elements for many reasons. For example, a button that should be visible in a mobile viewport, and hidden in a desktop viewport. Or, a navigation element that is hidden on mobile and shown on the desktop. There are three different states when hiding an element:| ishadeed.com
As a front-end developer, I use CSS display property in my day to day work. I can use block, grid or flex as a value for the property.| ishadeed.com
Often times, we forget about the in-between design variation, and we end up with a component or section being too wide or narrow.| ishadeed.com
An exploration of how a frontend developer thinks while building an article layout.| ishadeed.com
Building the design of a component in HTML&CSS can be considered something easy or hard, depending on how you like them. Nowadays, there are lots of ready-made frameworks and tools that can speed up the implementation of a UI, but how interesting is that?| ishadeed.com
One of the best gifts we have as front-end developers is inspect element.| ishadeed.com
Have you ever noticed a flickering animation that disappears in less than a second while resizing your browser window or rotating your phone from portrait to landscape?| ishadeed.com
An interactive and visual guide on understanding alignment in CSS flexbox and grid.| ishadeed.com
A deep-dive into the new CSS subgrid feature with real-life examples and use-cases.| ishadeed.com
One year and three months ago, I decided to learn HTML and CSS. I felt that if I can make it, my skills will be better and I will code my designs. Basically, I was only a designer who only made deliverable web mockups using Photoshop, and then passed it to a developer to implement them. Unfortunately, most of them don’t care about pixel perfection, so they simply ignore any part of the UI that needs more work. Really? Why should I bear that? 😡 What if I can make it myself by learning HTM...| ishadeed.com
How to use use position:absolute less by leveraging modern CSS| ishadeed.com
The web technologies we have at our hands today are marvelous. Every day there is something new knocking on our doors. The decision is upon us; we either accept the challenge to learn new things or not. I wanted to pick a design that I can use new CSS techniques and try to grasp them more. For today, I chose a magazine layout with some pretty interesting, challenging design details.| ishadeed.com
A walkthrough on building a component with HTML & CSS in details.| ishadeed.com
Building a comment component with modern CSS like flexbox, logical properites, :has, style queries, and subgrid.| ishadeed.com
A modern look at how to combine CSS :has, :nth-last-child, and style queries to create dynamic components.| ishadeed.com
A look at why we need flex wrapping detection in CSS.| ishadeed.com
