Using :after :before With Position Absolute

When CSS3 was released, the ability to place text or images after or before HTML items dynamically with CSS was a major new advantage. For instance:

.div:before {
content: "text";
}

That code will place the word ‘text’ before a div. That level of simplicity is useful if you need to dynamically add text to a header or menu item. However, it is generally better to add the text directly into your HTML or other code.

A more useful way to use :after or :before is using it in conjunction with position: absolute. This can be useful for flair items connected to images, paragraphs or anything else. For example:

.div:after {
content: "*";
position: absolute;
top: 5px;
right: 35px;
font-size: 85px;
color: #fff;
}
.div {
position: relative;
}

Read on…

How To Use Position Relative and Position Absolute Correctly

Using position in CSS is a big deal. It can be the difference between code that works OK in certain situations, and code that works beautifully every single time. One really useful aspect to understand is using position: relative in conjunction with position: absolute. So lets say I want to fix a div to the […]

Read on...

How To Embed Videos Without Embed Code

Before I go into the code, remember that if a video does not have the option to embed, there may be a good reason for that. You may require special rights to use the video.. but more than likely they don’t have the right ads in place to embed. Anyways, let’s take the modern example […]

Read on...

The Pixelize jQuery Plugin

an example of the pixelize jquery plugin in action

I am unabashedly and unreasonably fond of pixel art. To that end, I’ve created a simple jQuery plugin that can turn a JavaScript array into CSS pixel art.

Read on...

Bouncing Balls in the HTML5 Canvas

Semi-transparent balls bouncing within a dark gray container.

Here’s a fun demo I put together using the HTML5 canvas, aided by the excellent sketch.js framework. I’m creating a whole bunch of semi-transparent balls and bouncing them around on the screen. The demo definitely requires a modern browser (Chrome/Firefox/IE9+).

Read on...

Sizing Images Responsively

Images are sort of a special beast in the HTML animal kingdom. They’re technically inline elements, but they don’t really behave like them. This can cause trouble in responsive web designs. Happily, the fix is simple, safe, and effective.

Read on...

Simple Table Column Highlighting

A table with the third column and second row highlighted.

One design technique I’ve always enjoyed is highlighting the row and column of any cell that the user hovers over. Highlighting table rows is easy, but columns are hard. Or so I thought. Using table cols vastly simplifies the process.

Read on...

Use a CSS Preprocessor

Three popular CSS Preprocessors: Sass, Stylus, and Less

CSS Preprocessors have been around for a while now, but I didn’t start seriously looking into them until about a year ago. I didn’t think yet another language like LESS, Stylus or Sass would have anything to offer me. I was wrong, and CSS Preprocessors are awesome. Here are three good reasons why.

Read on...

A New CSS Newbie Site Design Launched!

CSS Newbie design - before and after

If you’ve been here before, you’ll probably notice things are looking quite a bit differently all of a sudden (and if you’re new to these parts, welcome!). For the first time in several years, CSS Newbie has a new face!

Read on...