Remembering: The CSS3 Multi-Column Layout Module

Because I will not shut up about CSS3, this time I’ve decided to show you a little bit of the multi-column layout module. This module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How Well Do You Understand CSS Positioning?

When people are new to CSS layouts there’s a tendency to gravitate toward positioning. Positioning seems like an easy concept to grasp. On the surface you specify exactly where you want a block to be located and there it sits. Positioning is a little more complicated than it first appears though. There are a few things that can trip up a newbie and a few things to understand before positioning becomes second nature…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Absolute, Relative, Fixed Positioning: How Do They Differ?

An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. This is easy to understand when when you set the element to display: block; or if that element is by default display: block; This means you can set a width and a height and that element will respect that. But elements that are display: inline, like a span by default, are also rectangles, they just flow onto the page different, lining up horizontally as they can.

Now that you are picturing every single page element as a block of pixels, we can talk about how positioning is used to get the blocks of pixels exactly where you want them to go. We’re going to leave off any discussion of the box model, but that factors into this as well…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

Specifics on CSS Specificity

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Enabling CSS RGBA Support in IE

One of the most frustrating things about working with newer CSS attributes is that while most modern browsers will support them in their latest versions, IE almost never keeps up. Such is the case with the RGBA color declaration which enables developers to specify an alpha transparency along with a color. This works great in the latest versions of all major browsers except IE. If the alpha transparency is 50% or greater IE will revert to the solid rgb color specified, otherwise it will revert to full transparency. I recently came across a little trick that uses the IE proprietary gradient filter which supports alpha channel colors. If you simply set both shades of the gradient to the same color you can achieve the same effect as the CSS RGBA attribute…

VN:F [1.9.22_1171]
Rating: -2 (from 2 votes)

Bubble Effect with CSS

You might be familiar with the plugin jQuery Dock which allows developers to create a menu like Apple Dock. Today, you will create a similar menu with bubble effect by using CSS only. Although it doesn’t have as smooth of an effect as jQuery Dock, it’s helpful for those that just want to make a cool menu by using pure CSS. This tutorial includes two methods: CSS sprites basic and the image swapping advanced…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Atatonic CSS framework

Lately there are more and more CSS frameworks popping out of ground. My issue with most of them is that they mainly focus on the grid. All the other options are added in later. This framework has it's main focus on typography. Vertical rhythm is one of the most important things in design, so why not start your perspective from that angle?To make my life easier as a developer I added grid support in the Atatonic CSS Framework. Its works like any other grid system, but with only about 10 lines of css…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Designing CSS Buttons: Techniques and Resources

Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)