Twitching Text
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.
Nested Anchor Links using CSS
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?
Centering content vertically with one line of CSS
Ignore and acknowledge class attribute on elements in CSS
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.
Spicing up text with text-emphasis in CSS
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!
Building Dynamic Progress Bars using only CSS
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.
Fading content using transparent gradient in CSS
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.
Cool wiggly hover animation with CSS
December 21, 2023 — I saw this cool-looking wiggly hover animation on byline recently and found it quite fascinating. It looks like this.
Hollow text hover effect with only three lines of CSS
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.
CSS-Only Reading Progress Bar
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.
Upcoming CSS features to make your life easier
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.
Scoped CSS lands in Chrome 118
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.
The new light-dark() function to switch theme color in CSS
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.
Honor user's transparency setting in CSS
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.
Textareas with auto-increasing height using CSS
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.
Pre-defined Absolute and Relative Sized Fonts in CSS
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.
Mixing colors to create variants in CSS
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.
Resume and pause animations in CSS
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.
Enable hover conditionally in CSS
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.
Lightsaber Borders in CSS
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.
All the places where you can use prefers-color-scheme media query
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.
Text Wrap Pretty is coming to CSS
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.
Sass-like nesting in native CSS
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.
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.