By now everyone has seen the badges, which are sometimes called seals, all over the web. There’s a really simple way to do this using Macromedia Adobe Fireworks.

For this tutorial, we’re going to replicate the badge seen on Crucial Web Hosting. We’re going to duplicate the curved text by using the Text On A Path feature, and the actual badge is nothing more than a star with a lot of points, or rays, since a typical star has about three to five points.

(more…)

I decided to make a tag cloud for WordPress today, but with a twist. Most of the tag clouds I see were category tag clouds, meaning they were based on the number of posts in a category. I don’t really have enough categories yet to do something like this though. Instead, this is more of a keyword or post tag cloud.

This kind of cloud tag makes a little more sense to me, at least from the perspective of a visitor. They can, in one quick view, tell exactly what you talk about in your blog posts. I also made it so visitors can click on any of the tags and it will use the built-in search engine to find posts with whatever word they clicked on.

(more…)

Now we’re starting to get into the heart and soul of CSS, which would be positioning, or how a box relates to the rest of the page and elements. Over the next three tutorials I’m going to be talking about the different position types, but this one is going to be about relative positioning. This kind of positioning follows the normal flow rules, the only difference is that the box can be moved according to its offset properites.

(more…)

When you create a document using CSS that has more than one container box, there is a default flow to how everything is positioned, assuming that box isn’t an absolute or fixed box, nor a float—and don’t worry, we’ll touch on those terms later.

(more…)

There are two types of boxes, block and inline. Block boxes would include elements such as <p> or <div>, while inline boxes would include tags such as <strong> or <span>, as well as content like text and images.

A block box acts like a container. The point of these container boxes is to determine the position of the boxes within it, and sometimes the dimensions of these boxes. Take the following code for example:

(more…)

According to its creators, cascading style sheets “is a simple mechanism for adding style to web documents.” The goal of this and future tutorials is to apply the power of CSS to help you understand CSS. So what exactly is CSS anyways?

• CSS is a standard layout language for the web. What that means is it controls colors, fonts, size, and placement of elements and images.
• CSS is meant to replace table-based layouts, frames, and other presentational hacks.
• CSS helps separate style from content, making the web more accessible and usable for everyone.

(more…)