Articles - Ahmad Shadeed

Articles

Subscribe to my RSS feed

Conditional CSS with :has and :nth-last-child

Rebuilding a featured news section with modern CSS: Vox news

CSS Text balancing with text-wrap:balance

CSS Masking

Do we need CSS flex-wrap detection?

My CSS Wishlist

The Guide To Responsive Design In 2023 and Beyond

Conditional CSS

CSS Style Queries

Inside the mind of a frontend developer: Article layout

Inside the mind of a frontend developer: Hero section

Use cases for CSS comparison functions

CSS container queries are finally here

The CSS behind Figma

First Look At The CSS object-view-box Property

Learn CSS Subgrid

CSS :has Parent Selector

Tweaking In The Browser

Aligning Content In Different Wrappers

Flexbox Dynamic Line Separator

Hello, CSS Cascade Layers

Building UI Components With SVG and CSS

A Deep CSS Dive Into Radial And Conic Gradients

Smashing Magazine10 Jan 2022

Defensive CSS

Using Position Sticky With CSS Grid

Building Real-life Components: Facebook Messenger's Chat Bubble

A Deep Dive Into object-fit And background-size In CSS

Smashing Magazine25 Oct 2021

Prevent Scroll Chaining With Overscroll Behavior

Conditional Border Radius In CSS

CSS Container Query Units

Less Absolute Positioning With Modern CSS

Building A Stepper Component

Star Rating: An SVG Solution

The State Of Mobile First and Desktop First

Aligning a Button Label Vertically

Thinking About The Cut-Out Effect: CSS or SVG?

Comparing Design Mockups To Code Result

Using HSL Colors In CSS

Smashing Magazine05 Jul 2021

Custom Scrollbars In CSS

Let's Learn About Aspect Ratio In CSS

CSS Container Queries For Designers

A Look at Tailwind CSS

The State of CSS Cross-Browser Development

Practical Use Cases For CSS Variables

Overflow Issues In CSS

Smashing Magazine14 Apr 2021

Say Hello To CSS Container Queries

Inspect Element As A Way To Increase Your Curiosity

Handling Text Over Images in CSS

Digging Into CSS Logical Properties

The Beauty Of Tiny Enhancements In CSS

Understanding Z-Index in CSS

Clipping Scrollable Areas On The inline-start Side

The Minimum Content Size In CSS Grid

Understanding Clip Path in CSS

The Art of Building Real-life Components

Handling Short And Long Content In CSS

CSS Scroll Snap

Thinking Like a Front-end Developer

A Deep Dive Into CSS Grid minmax()

Responsive Height Design

CSS Variables 101

Finding The Root Cause of a CSS Bug

Learn CSS Centering

Building Website Headers with CSS Flexbox

How to detect browser support for Flexbox Gap

The Just in Case Mindset in CSS

CSS Mistakes While On Autopilot

Digging Into the Flex Property

Understanding CSS Multiple Backgrounds

The State Of Pixel Perfection

Uncommon CSS Properties

Aligning Logo Images in CSS

Styling Layout Wrappers In CSS

Grid for layout, Flexbox for components

Colors in CSS

Thinking About The In-between Design Cases

CSS Findings From Twitter Design

min(), max(), and clamp() CSS Functions

Selection in CSS

Spacing in CSS

Image Techniques On The Web

CSS Findings From The New Facebook Design

Overflow In CSS

Everything About Auto in CSS

CSS Viewport Units

Learn Box Alignment

Let's Use CSS Counters

Styling The Good Ol' Button Element

Same HTML, Different CSS

Learn CSS Positioning

Intrinsic Sizing In CSS

CSS Grid Template Areas In Action

Hiding Elements On The Web

Min and Max Width/Height in CSS

Creating a Variable Color Font From Scratch

RTL Styling 101

Highlights From Building a Magazine Layout

Building a Football Ticket With CSS and SVG

Blending Modes in CSS

CSS Variables With Inline Styles

Uncommon Use Cases For Pseudo Elements

Implementing Dark Mode For My Website

Rebuilding Apple Music Header in HTML & CSS

Accessible Checkbox

Accessibility Matters17 Sep 2019

Layout Flickering On Browser Resize

Enhancing The Clickable Area Size

Custom Underlines with SVG

Vertical and Horizontal Lines

Part 3: The Process of Implementing A UI Design From Scratch

Part 2: The Process of Implementing A UI Design From Scratch

Building An Old Nav Design

The Hidden Power of CSS Text Align

CSS Flexbox: 5 Real World Use Cases

I Used CSS Inline Flex For The First Time

The Process of Implementing A UI Design From Scratch

Common CSS Issues For Front-End Projects

Smashing Magazine27 Dec 2018

Handling Long and Unexpected Content in CSS

CSS Tricks16 Jun 2017

How to Build Web Form Layouts With CSS Grid

Web Design Tuts+05 Jun 2017

Using DevTools to Tweak Designs in the Browser

CSS-Tricks28 Mar 2017

Grid Layout Ah-ha Moment

The Power of the rgba() Color Function in CSS

CSS-Tricks10 Nov 2016

Enhancing Our Components with CSS :empty

Building Resizeable Components with Relative CSS Units

CSS-Tricks09 Sep 2016

CSS Writing Mode

Use Cases For CSS Vertical Media Queries

Using SVG for the Icongraphy #SVGFTW

The Journey of Learning Front End Web Development on a Daily Basis