Understanding the Object-fit CSS Property: Basics and Examples
The object-fit property defines how a specific element responds to the height and width of its enclosing element (Content Box). This property is intended for use
Posts about: CSS | Page 3
Exciting CSS4 Selectors Coming Soon: What to Expect
The current status of CSS Selectors Level 4 is a kind of draft; however, modern browsers have already started implementing certain parts of the new specifications. In essence, there will never be CSS4 just as there will never be HTML6, [...]
Styling the First Letter with CSS ::first-letter Property
::first-letter is another useful pseudo-element that allows you to style the first letter of text within any element without the need to modify the HTML or add any specific tags like span. The method works similarly to a scenario in [...]
Using CSS Gap with Flexbox
In this post, we'll see how to add spacing between flex items using the CSS property called gap, which is the shorthand for the properties row-gap & column-gap.
Adding CSS Scroll Animations using AOS
You’ve probably encountered websites with various animations happening as you scroll down (On Scroll Animations). So, I’ll share with you a library I came across called AOS, which allows you to easily add these animations with full CSS control over [...]
CSS Variables: What They Are and How to Use Them
CSS Variables, also known as CSS Custom Properties, are now supported in all modern browsers, fulfilling the anticipation of frontend developers for quite some time. They bring the power of usage
Using flex-grow to Pin an Element to the Bottom of a Container
There's a very useful feature called "flex-grow" that can be helpful when creating a grid like this or another. Let me provide a brief introduction before we continue - in almost every website I develop, there is a usage of [...]
How to Use the CSS @supports Property for Feature Detection
Almost a decade of developing WordPress has taught me that detecting certain supported features in a browser is primarily done using JavaScript and libraries like Modernizr. Over the years, I've noticed that identifying specific features that are supported by a [...]
How the CSS minmax() Function Works
One of the useful features introduced along with the CSS Grid specifications is the 'minmax()' function. This function opens a door for us and enables writing stronger and more concise CSS by doing..
Creating Responsive Layouts with CSS Grid Without Media Queries
Adopting the flexibility of CSS Grid provides us with the ability to create resilient and robust websites (Frontend Wise), where instead of using specific and fixed sizes, we stretch elements...