We’ve all been there. You’re building a chat interface or a comment form, and you want that smooth, high-quality user experience where the text box grows as the user types—just like ChatGPT or iMessage. For years, this simple feature was surprisingly painful to build. You had to wire up JavaScript event listeners to calculate scrollHeight […]
You must have used the padding-top hack at some point. If you have been writing CSS for a few years, you will remember it well. It used to work fine, but it always felt like a temporary fix, something we did because there was no proper solution at the time. We don’t need that workaround […]
Animating a background image behind text is a powerful visual effect that adds depth and motion to your typography. With modern CSS, you can achieve this using background clipping and keyframe animations—no JavaScript required. In this guide, we’ll walk through how to animate a background image so it smoothly moves behind your text. Why Animate […]
To understand how centering works in a grid container, it’s first important to know the grid layout’s structure and scope. The HTML structure of a grid container consists of three layers: Each layer operates independently when it comes to applying grid properties. The scope of a grid container is limited to a parent-child relationship, meaning […]
You might have used normalize in your projects. Bootstrap 4 has created its on version on top of the normalize called reboot. If you are not familiar with normalize, it overwrites browser’s default CSS to eliminate browser inconsistencies, like different font sizes, or margin etc. It also add many CSS rules that helps you make […]
As we know Bootstrap 4 is using em’s and rem’s instead of pixels, so its necessary to understand what these units are, and how they work. Let’s take a look. There are few things that you should memorise about em’s and rem’s, these points will help you understand these units more easily.
Aligning content vertically inside a DIV or a box has always been an issue in CSS. There was some tricks available with display: table and display: table-cell properties. But it was never convenient to implement, until flexbox module came into the existence. With Flexbox, one can align anything (vertically or horizontally) with the align-items and […]
Recently, in one of my project, the client asked me to create a multi-line navigation, which should be evenly spaced according to link text. One major consideration was that navigation should be dynamic and the number of links can be changed in future if needed.
Most browsers show a dotted line around links (anchor tags), this is an accessibility feature used for people who are not using mouse. When they are switching between links using tab key (or any other keys) on their keyboard, this dotted outline helps them in finding which particular link is currently selected, and then they […]
You can change color of text on selection using CSS, you can also change background color of selected text to highlight it on selection.
