Web Cash

While working on a new site (Rolling Horde), I decided to include a small image gallery. I randomly display four images from a flickr album in the sidebar.

The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?
(more…)

A few weeks ago, I installed the “Per Post CSS and JS” plugin for Wordpress. This allows you to add a custom field to your post and include extra .css or .js files to link to that individual page.

I only realized today - while testing something else - that the plugin had been firing off warning messages because of an oversight in the code. Warning messages annoy me, so I decided to fix it up.
(more…)

There are a lot of situations in which you’d like to alternate CSS styles from one element to the next. Long tables, for example, look a lot nicer when the background color of the rows is alternated.

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.
(more…)

Something I struggled with recently was assigning individual style sheets to posts on this Wordpress blog. For example, if I was writing a CSS tutorial I didn’t want to muck up my general stylesheet with a bunch of styles - it’d be nice to write a small stylesheet and attach it only to the specific post that needs it.

Unfortunately, this isn’t a built in function of Wordpress. Fortunately, you can add this functionality with a plugin.
(more…)

Here’s a quick tip for fine tuning your CSS declarations.

You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff - like style different “input” types differently, style anchor tags with titles differently, and etc.
(more…)

While I was browsing through dzone today, I stumbled on this 3d button css tutorial by Dave Woods.

Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…
(more…)

The other day I wrote about how to add a gradient background to a css tooltip. So I thought it might be a good idea to walk through how to create the actual gradient image.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.
(more…)

One of the most frustrating aspects of web design is trying to make your website look good in every browser. If you use some advanced css techniques, you never know how an older browser or a different platform is going to handle it.

You can test how your site displays in a few browsers - for example, I often check mine out in Windows IE, Ubuntu Firefox, and Ubuntu Opera. But how am I going to check it on Mac browsers like Safari?
(more…)

In an earlier post, we learned how to create a tooltipKind of like this boring, gray tooltip. using CSS. I walked you through the mechanics of creating the tooltip and left the actual css styling up to you.

Today, we’ll take a look at how to make this tooltip look a bit nicer - using a gradient background and some extra styling.

Hover your mouse over this link to Web Cash. Notice the tooltip?

You can achieve a tooltip like that on any anchor text by defining a “title” attribute. However, it will also be bland, yellow, and un-styled. You can’t control the size of the box, style of the font, or the general appearance of the tooltip at all.

But there’s a better way. This tutorial will show you how to create custom tooltips using simple, valid HTML and CSS. Once you’ve created the basic tooltip, you can style it to your heart’s content.