Posts about "CSS"

Twitching Text

— 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

— 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?

Spicing up text with text-emphasis in CSS

— 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!

Upcoming CSS features to make your life easier

— 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

— 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.

Honor user's transparency setting in CSS

— 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

— 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.

Mixing colors to create variants in CSS

— 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

— 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

— 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

— 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.

Text Wrap Pretty is coming to CSS

— 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.

Ping animation with minimal CSS

— 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.

Balanced text wrapping is coming to CSS

— 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

— 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

— 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.

Classless CSS Frameworks

— 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

— 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.

Firefox-only CSS

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

How to select the least number of elements in CSS

— 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

— 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.

Image Borders in CSS

— 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.

Image magnifier using only one line of CSS

— 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.

Gradient-y text underlines using CSS

— 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

— 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.

Print media style drop caps using only CSS

— 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.

How to detect fullscreen mode using CSS

— 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.

This experimental CSS Overview feature of Chrome is awesome

— 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.