How EM Font Sizing Works - Step by Step Explanation

The EM value is used for a lot of things. Sometimes padding or margin, but probably most commonly for EM font sizing. At first it seems like a strange random value. Especially when you start noticing that it's not fixed like pixels. This article is going explain how it works. »

CSS Tooltip | Styled With No JavaScript & Under 1kb

There are a lot of options out there when it comes to creating a HTML and CSS tooltip, and a lot offer all sorts of impressive functionality like transitioning, controls over placement and auto detection of edges to keep content showing. The issue is that with all the more advanced »

CSS All Property | Reset Styling on Specific Elements

CSS All is a strange property. It's not widely supported currently, nor is it well known. If I'm being honest I don't think I've ever seen it used on an actual web project. So why write about it? I've chosen to have a look at this interesting new CSS addition »

Bubbling Text Effect | No Canvas Required

In the past I've posted article on creating text effects. This time it's bubbling text effect, where the bubbles appear from behind the text, float up, fade out and are then removed from the page. While this might be something that would be more commonly associated with the HTML5 canvas, »

Shaking Text Effect on Hover | Pure CSS Example

I love creating interesting text effects, and as much as I like JavaScript, I prefer to use only CSS when possible. The shaking text effect that I'm going to show you in this article is pure CSS, but it can be expanded on using jQuery to make it more versatile. »

Centering HTML Elements Both Vertically and Horizontally

Centering HTML elements both vertically and horizontally has never been as simple as you might think. It's always required workarounds and techniques that feel a little hacky. It's always been easy to center something horizontally, normally just through margin: 0 auto; but vertically has always been a different story. This »

Half Half CSS Text Effect | No JavaScript Required

I'm always looking for new ways of making header text more interesting, and this half half CSS text effect could be a perfect solution. I first came across the the idea after seeing the StackOverflow question: Is it possible to apply CSS to half of a character? It got me »

Modify CSS Psuedo Element Content with jQuery

There's no denying that pseudo elements are useful. For example, CSS pseudo element content can be perfectly combined with data attributes to create pure CSS tooltips. Pseudo Elements can also be confusing though, they're text content that isn't part of the HTML, instead it's added with CSS. It's important to »

Create a Simple HTML Image Caption Ribbon

Adding a HTML image caption is no way near as simple as it sounds. By default you can quickly add a title attribute, but that only appears when the cursor is hovering over the image, and doesn't add it to any visible part of the image. The technique I'm going »

Understanding the CSS Clearfix

When I was learning web development, the CSS clearfix was a mystery. I saw it from time to time but didn't know what it was there for, or how to use it. Since then I've learn how to write them, and how it should be used. It did get me »