June 13, 2024 — I recently stumbled upon this sleek portfolio website of Maxime Heckel. It’s clean and minimalistic and there are a lot of small details and micro-interactions that make it stand out.

June 8, 2024 — Have you ever encountered a situation where you have an area, let’s say a <div> element, which is a hyperlink and you wanted another hyperlink inside that <div> element which should also be clickable?

May 28, 2024 — Generally, when you want to center content vertically, you may reach for Flexbox or Grid. So, for instance, if you have a div with a height of 100px and you want to center its content vertically, you can do it with Flexbox like so.

May 16, 2024 — Sometimes, when working with some common elements, for instance, <ul>, <a>, or <div>, you might add the class attribute to some of them and then use that class to style them.

March 24, 2024 — There are a lot of ways to style text in CSS. You can change the color, size, font, and even add effects like shadows and outlines. But recently, I learned about a sleek CSS property that I hadn’t heard of before and it’s pretty rad!

February 22, 2024 — Here’s a full disclaimer upfront: This isn’t something I’ve come up with. Jeffery Way from Laracasts has come up with this technique in one of the videos and I’m just sharing it here for my reference.

January 17, 2024 — So, I was checking out this trunk.io website recently and while the entire website is a masterpiece in itself, there’s one thing that caught my attention.

December 21, 2023 — I saw this cool-looking wiggly hover animation on byline recently and found it quite fascinating. It looks like this.

November 28, 2023 — Recently, I was checking Life At Spotify website and spotted this cool hollow text hover effect on the page. It looks like this.

November 6, 2023 — To build a reading progress bar, the one that shows the progress of the user reading the article as they scroll down, it’s hard to not think about JavaScript. But, it turns out, you can build a reading progress bar using pure CSS as well.

October 31, 2023 — CSS is a constantly evolving language. It’s getting better and better with each iteration. That’s why it’s important to keep up with the latest CSS features so you can use them in your projects and be less reliant on third-party libraries.

October 22, 2023 — Scoped CSS lands in Chrome 118. This is a new feature that allows you to scope the CSS to a particular element or part of the page. This is a great feature for component-based web development where you can scope the CSS to a particular component and it won’t affect the rest of the page.

October 18, 2023 — We have many ways to switch between light and dark themes on the web. We can use JavaScript to switch between themes or we can use the prefers-color-scheme media query in CSS to switch between themes based on the user’s system preference.

October 12, 2023 — When you’re building a website, you might be tempted to use a transparent background for some elements. For instance, you may want to use a transparent background for the navigation bar or the header of the website.

September 25, 2023 — Textareas areas are great when it comes to accepting a large amount of text from the user. But, the problem with textareas is that they have a fixed height. So, if the user enters more text than the height of the text, the text will overflow and the user will have to scroll to see the rest of the text.

September 4, 2023 — Today I learned about pre-defined absolute and relative font sizes that you can use in CSS apart from the usual px, em, rem, vw, vh, etc. units.

August 1, 2023 — If you go to paint shops and show them a color that you want to buy and they don’t have the exact color, they will mix different colors to create the same color you want. This is how they create variants of colors.

July 29, 2023 — I have been working with CSS for like 10+ years now and I have worked with CSS animations for a fair amount of time. But I didn’t know that you can pause and resume animations in CSS until recently.

July 21, 2023 — Setting up hover on elements in devices where hover is not supported (like mobiles, tablets…) can be overkill. For instance, if you have a navigation menu that has a hover effect on a desktop browser, you might want to disable that hover effect on mobile devices because there’s no hover support on mobile devices.

July 12, 2023 — Ever wondered how you can create a lightsaber border in CSS? If you’re not a fan of Star Wars, a lightsaber is a fictional energy sword featured in the Star Wars universe.

July 9, 2023 — The ability to switch between light and dark modes is one of the most requested features on the web. Most modern browsers come with a lot of features and APIs that can help you identify which color scheme the user is currently using.

June 23, 2023 — I talked about the CSS text-wrap property and its balance value in one of my previous articles where the browser would try to wrap the text in a way that the last line of an element is as long as the first line. So that, the text looks balanced and more readable.

May 28, 2023 — If you’re like me who finds Sass’s CSS nesting feature pretty useful, you’ll be pleased to know that the good days are coming for all of us.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

November 17, 2022 — If you are a web developer, you might have come across the need to apply some CSS rules only for Firefox.

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.

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!”.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

August 29, 2021 — Sometimes, it might be the case where you want to place/position the children elements that reside insides their parent absolutely.

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.

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.

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.

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.

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.

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.

July 5, 2020 — The CSS has many experimental features, that if used cautiously, can be proven very handy in simplifying things.

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.