LESS CSS Plugin for Coda

A Cocoa-based app that runs inside Coda and provides a GUI for the LESS compiler, which is a command-line tool that parses LESS syntax into standard CSS. It runs the command-line tool on all .less files within your website’s local directory, either when you click a button or automatically as you save each .less file — your choice. This happens in the background, so you never have to leave Coda or stop working…

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

Working With RGBA Colour

We’re all familiar with specifying colours in CSS using by defining the mix of red, green and blue light required to achieve our tone. This is fine and dandy, but whatever values we specify have one thing in common – the colours are all solid, flat, and well, a bit boring. CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop…

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

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)