Posts about "CSS"

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.