Animated Space Background using plain CSS
April 20, 2023 — Here’s a trippy animated space background that you can create using plain and old CSS. This is inspired by the Beyond the Gradient website.
Ping animation with minimal CSS
April 14, 2023 — I have seen this ping animation on various websites where a circle expands and then contracts to its original size. It’s a pretty neat animation that represents a ping or a notification.
Checkered background using two lines of code in CSS
March 30, 2023 — I have a long list of personal blogs that I have been maintaining in my RSS reader. And one of the blogs in this list is Rach Smith’s digital garden.
Balanced text wrapping is coming to CSS
March 4, 2023 — The CSS Working Group has recently published a new draft of the CSS Text Module Level 4 specification that introduces a new property called text-wrap
that allows you to control the wrapping of text in a more granular way.
Today I Learned — font shorthand in CSS
March 1, 2023 — I have been making websites for more than 10 years now and one of the things I inevitably use is CSS. I use CSS a lot and yet, I still learn new things about it every now and then. And today, I learned about the font
shorthand property in CSS.
Animated gradient text in CSS
February 28, 2023 — There might be some elements on your website that you may want your users to draw their attention to. For instance, the title of your blog post, an important announcement, or the call-to-action button.
Conveniently toggle and add Tailwind CSS classes in Chrome DevTools
February 26, 2023 — The one feature of Chrome DevTools I discovered lately is the ability to toggle and add CSS classes in the Elements panel. This is a very handy feature that can help you quickly add and remove Tailwind CSS classes from the selected element.
Style file selector button using CSS
February 21, 2023 — The default file selector button that you get when you use the file
input element is not very appealing and is rather pretty bland.
Classless CSS Frameworks
February 9, 2023 — CSS frameworks are a great way to quickly style a website. They provide you with a set of pre-built components that you can use to build your website. And they also provide you with a set of utility classes that you can use to style your components.
Easy shine animation on hover using CSS
January 2, 2023 — The other day, I was pretty bored but I wanted to do something productive. So, what’s the best thing to do when you’re bored? You, of course, play around with hover effects on your logo and that’s exactly what I did.
Handling images with inconsistent height in CSS
November 30, 2022 — When you’re working with CSS, you often stumble upon a situation where you need to display a list of images with different heights.
Tracking value of number inputs using CSS
November 22, 2022 — There are scenarios where you might want to track the value of an input field, especially the number inputs, and change the theming of the input field based on the value.
Firefox-only CSS
November 17, 2022 — If you are a web developer, you might have come across the need to apply some CSS rules only for Firefox.
Better conditionals in CSS media queries with Range Syntax
August 17, 2022 — The newest version of Chrome, i.e. Chrom 104, has recently been released and with this release, Chrome has become another browser that supports the new range syntax for media queries and this is pretty exciting news if you ask me.
Making glowing focus state for text input using CSS
August 4, 2022 — Even though this is a blog site, I never leave a stone unturned to make it mine. I try to add those little extra touches that, when you discover them, make you go “aha!”.
How to select the least number of elements in CSS
July 30, 2022 — There’s always a talk going on about how we can incorporate conditions in CSS and recently, I found an interesting scenario in one of the tweets by Stefan Judis that shows how we can combine different selectors and operators to sort of sprinkle the magic of conditions in CSS.
CSS that depends upon JavaScript
July 15, 2022 — If there are two things without which you can’t imagine a modern website, these must be JavaScript and CSS and most of the time, both of these can co-exist and perfectly work in isolation.
Dark-mode aware scrollbars using CSS
May 27, 2022 — I have created a little web app called Notepad which is also a progressive web app (PWA). It’s a minimal notepad app where you can quickly jot down stuff that gets saved in the browser’s localStorage.
Making headers sticky using CSS for a better reading experience
May 25, 2022 — If you have ever visited the categories page of this blog previously, you might have noticed that it first lists all the categories in a pill shape, and then underneath it, category posts are listed along with the category title like so.
Conditionally loading CSS or any resource using media queries
May 18, 2022 — Unless you’re using something like Tailwind CSS, the stylesheet files are one of the most expensive resources that your application is loading.
Image Borders in CSS
April 11, 2022 — If you’re a web developer, you pretty much have worked with different kinds of borders in CSS. Borders can come in all the different shapes and sizes.
The accent-color CSS Property is Now Widely Supported by Modern Browsers
April 4, 2022 — If you own a website and the website is related to some brand out there, you would be looking for ways that make the website look in line with the brand.
Implementing scroll snap using only three lines of CSS
March 25, 2022 — If you’re not under the rock and using the internet for quite some time, you most probably have stumbled upon one of these websites where when you scroll through the website, portions of it snap to the viewport automatically.
Image magnifier using only one line of CSS
December 31, 2021 — When you’re working with images on your website, it would be good if you can provide some sort of image magnification to your users when clicked/tapped/hovered over the images for better visibility.
Prevent Image Layout Shift Using CSS
December 13, 2021 — When you are working with images on your website, the issue of the layout shift that comes with it is real and pretty annoying at times.
Render CSS Based on The Browser Support for Features
November 30, 2021 — Providing a wide range of support for the browsers is a great problem to ponder upon when it comes to designing websites using CSS.
Gradient-y text underlines using CSS
November 15, 2021 — The usual way of applying an underline to the text is by using the text-decoration
property which sets an underline (of the same color as the text) under the selected text.
Gradient-y Box Shadows in CSS
October 21, 2021 — Okay… Here’s a confession. I love box shadows! And you can make it out by looking around on this blog. They are all over the place. Some are subtle while some are prominent.
Simple blinking cursor animation using CSS
October 1, 2021 — The other day I was feeling a little nerdy (like all the cool kids) and so, I attempted to add this cool-looking blinking cursor at the end of my blog’s tagline like so.
Position children elements in the parent absolutely using CSS
August 29, 2021 — Sometimes, it might be the case where you want to place/position the children elements that reside insides their parent absolutely.
Print media style drop caps using only CSS
August 9, 2021 — The first character in this paragraph, the letter “T”, is called a drop cap or an “initial”. Why? Because in a written or published work, an initial or drop cap is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text.
Break HTML content into newspaper-like columns using pure CSS
July 25, 2021 — Sometimes, the things you might think are tricky to implement can turn out to be a matter of just a few lines of code if you read the documentation.
Three lines of CSS to center anything horizontally and vertically
January 4, 2021 — Oftentimes, I stumble across a situation where I would need to center something and over the years I have tried different permutations and combinations. But all those somehow felt “hacky” and not something that is reliable.
Discover every CSS grid on an HTML page using Chrome
December 18, 2020 — Lately, I’ve been revamping the “Featured Articles” section which is there on the homepage using CSS Grid layout. It’s not that it wasn’t using grids previously. Just that the way I have implemented them previously was sort of inefficient and bloated.
How to detect fullscreen mode using CSS
August 22, 2020 — Recently, I needed to change some design elements of a site when the site is in the fullscreen mode. So, I was looking for a way to it using CSS as all I wanted to change was hiding some stuff when in the fullscreen mode.
How to create a two column layout using Flexbox in CSS
August 9, 2020 — This blog has got this two-column layout which houses host of different things for different purposes. A two-column layout is especially useful if you want to repeat a certain column on every page.
Make repetitive CSS compact using :is() pseudo-class function
July 5, 2020 — The CSS has many experimental features, that if used cautiously, can be proven very handy in simplifying things.
This experimental CSS Overview feature of Chrome is awesome
June 29, 2020 — The Chrome browser is one of the widely used web browsers by developers. The DevTools it bundles within is mature and ahead of its competition. But there are certain features that Chrome Developers don’t expose explicitly. Rather, you’d have to look out for those features by digging deep inside the settings.