Live Demo

Browser Support

Currently these styles are supported by Safari, Firefox, Chrome, and Camino.

Here’s What The CSS Looks Like

The CSS is actually pretty simple for this technique. We simply have to use the column-count property to set our columns. For the value, enter the number of columns you would like, in this case 2. You can also control the width of the column gap using the column-gap property. All you need to do is declare a width value in pixels, in this case 40px.

div {
 -moz-column-count: 2;
 -moz-column-gap: 40px;
 -webkit-column-count: 2;
 -webkit-column-gap: 40px;
}

Adding The HTML

The HTML for this example is also simple. Just paste all your text within a <div></div>. Make sure there are no extra line breaks or spaces in your copy. Post it all in one big paragraph.

<div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>

Here’s What It Looks Like

The final output should be the above paragraph, divided into two columns. Check out the live demo to see the results.

Support Files

That’s it, that’s all. Check out the live demo and download the source files below.

Live Demo

Download Source Files

Live Demo

Browser Support

Currently these styles are supported by Safari, Firefox, Chrome, and Opera.

Here’s What The CSS Looks Like

The first step is to setup the @font-face selector with the font you want to use. For this example, I’m using the free font Aller Display. The font-family property declares the name/value for your custom font. The src property is the link to the font file on your server, which you have already uploaded.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

Now we’ll setup it up so every <div> in your document will use Aller Display. Make sure the font-family value matches the one you setup under the @font-face selector. In this case it is aller-display.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

div {
 font-family: aller-display;
 font-size: 2em;
}

Adding the HTML

The last thing we need to do is add the HTML, which is pretty basic.

<div>this is a custom font named aller display</div>

Here’s What It Looks Like

A Word On Copyright

Make sure you check the license for a font before you use it. Many fonts are not currently licensed for web use. The safest policy is to just use free fonts. There’s a great collection over at dafont.com.

Support Files

That’s it, that’s all. Check out the live demo and download the source files below.

Live Demo

Download Source Files

Browser Support

Currently, these styles are only supported by Safari and Chrome.

Here’s What The CSS Looks Like

The first step is to declare a text color, I’ve picked red here. Next, we use the text-stroke property to assign a color (black) and weight (1px). For this example, I’ve created a class called .stroke.

.stroke {
 color: #c00; /* text color */
 -webkit-text-stroke: 1px #000; /* stroke color and weight */
}

Here’s What It Looks Like

The text-stroke Property Explained

Here’s a breakdown of the values for the text-stroke property.

• The first value is the stroke weight measured in pixels
• The second value is the stroke color

Using Transparency

If you’d like to make the text fill transparent, you can do so by using the text-fill-color property. For this example, I created a second class called .stroke-transparent.

.stroke-transparent {
 -webkit-text-stroke: 1px #000;
 -webkit-text-fill-color: transparent;
}

Here’s What It Looks Like

Support Files

That’s it, that’s all. Check out the Live Demo to see it in action, or Download the source files.

How To Enter

• Leave a comment explaining what you would do with the cards if you win
• Deadline to enter is March 14th, winner picked March 15th
• Open to residents of the USA only

Business Card Specs

• 500 Business Cards
• Pick your size: 2 x 3.5”, 2 x 3”, 2 x 2” (square card) or 1.5 x 3.5” (slim card)
• Pick your paper: 14 pt gloss cardstock, 14 pt matte cardstock, or 13 pt recycled uncoated cardstock
• Other: Full Color Both Sides; Offset Press; 3 Business Day Printing
• FREE UPS Ground Shipping

UPrinting.com Links of Interest

• Business Cards Online
• Promotional Printing

Browser Support

Currently, these styles are only supported by Safari, Chrome, Firefox, and Opera.

Here’s What the CSS Looks Like

First of all, we’re going to setup a regular link as we always would. Second, we’re going to use the transition property to add the fading.

a {
 color: #000;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover {
 color: #c00;
}

The Transition Property Explained

Here’s a breakdown of the values for the transition property:

1. The first value refers to property to be transitioned, in this case color
2. The second value controls the duration, in this case one second.
3. the third value controls the type of transition, in this case fade-in

Interested in additional transitions? Read more about the different types of transitions over at w3.org.

Fading Multiple Properties

It’s also important to note that you can have multiple transitions on the same selector. For example, if you want to to have your background and link colors both fade, you can do it. Simply break apart your properties, and list your declarations as I’ve done below. By the way, I’m setting up a new class for this demo called .multiple, and I’m only going to include the Safari (webkit) properties.

.multiple a {
 color: #000;
 background: #ccc;
 padding: 5px;
 -webkit-transition-property: color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;
}

.multiple a:hover {
 color: #fff;
 background: #c00;
}

Here’s What it Looks Like

Check out the live demo to see the transition in action. Otherwise, feel free to download the source files and play around with them.

Browser Support

Currently, the border-image property works in Safari, Firefox, and Chrome.

Creating the image

The most complicated part of this tutorial is creating the image that we’ll use for our border. At this point, feel free to download the tutorial source files and code along. If you’d like to create your own image, open Photoshop and create a 15px x 15px document.

• Create a new layer
• Using guides, divide the canvas into three horizontal and vertical 5 pixel columns
Fill the entire canvas with a gradient of your choice
• Delete the 5×5 pixel square in the center of the canvas
• Turn off the background layer (making the center square transparent)
• Save for web, choose PNG24, make sure transparency is checked and set the matte to none

Your final image should look something like this. Keep in mind this is zoomed in to 500%

Coding the CSS and HTML

Now that we’ve created our image, it’s time to code the CSS and HTML to get the border working. Here’s what the CSS looks like:

.red-border {
 border: 5px solid #c00; /* optional for graceful degradation */
 float: left;
 -webkit-border-radius: 3px;
 -webkit-border-image: url(border.png) 5 5 5 5 stretch;
 -moz-border-radius: 3px;
 -moz-border-radius: url(border.png) 5 5 5 5 stretch;
}

Here’s what the HTML looks like:

<div class="red-border"><img src="image.jpg" width="150" height="150" alt="image" /></div>

Here’s What it Looks Like

Note the red gradient png has been stretched to fit around my image.

Live Demo

That’s it that’s all. View the live demo or download the tutorial source files.

Browser Support

Currently, multiple backgrounds are only supported by Safari and Chrome.

The Button Images

We’re going to need to create 3 images for our button. A left cap, a right cap, and a middle which we will repeat. The repeat will allow us to stretch the width of the button to fit our button text. Here’s what the images look like.

Left

Middle

Right

Here’s What the CSS Looks Like

The below styles are the bare minimum you require to get this working. An important thing to note is the order of the images in the background property. The order should be left, right, then middle. The first declared image is the top, the last is the bottom.

.button {
 background: url(left.jpg) top left no-repeat,
 url(left.jpg) top left no-repeat,
 url(middle.jpg) top center repeat-x;
 float: left;
 height: 40px;
}

Here’s What the HTML Looks Like

The HTML for this button is actually quite easy to code. Simply create a new <div> using the .button class. Enter your button text after the <div> tag, then close it.

<div class="button">Hello this is my button</div>

Here’s What it Looks Like

This is what the button should look like with only the essential styles defined.

Adding a Few More Styles

Let’s add a few more styles to clean up the button formating.

.button {
 background: url(left.jpg) top left no-repeat,
 url(left.jpg) top left no-repeat,
 url(middle.jpg) top center repeat-x;
 float: left;
 height: 40px;
 line-height: 40px; /* centers vertically */
 padding-left: 10px;
 padding-right: 10px;
}

.button a {
 color: #fff;
 text-decoration: none;
}

.button a:hover {
 color: #ccc;
 text-decoration: none;
}

Now let’s add the <a href> tag to our button text

<div class="button"><a href="http://yourwebsite.com">Hello this is my button</a></div>

Here’s What it Looks Like

Now that we’ve fixed the button formatting, by adding a few more styles, this is what it should look like in your browser.

LIve Demo

That’s it, that’s all. View the live demo or download the tutorial source files.

Browser Support

Currently, the text-shadow property works in Safari, Firefox, Opera, and Chrome.

Adding a shadow to a box

A shadow is added to a box using the box-shadow property. Just like the text-shadow property, the first pixel value controls the horizontal offset, the second controls the vertical offset, and the third controls the blur. The fourth value is the shadow color, which is set using a hex number.

Here’s what the CSS looks like

.box {
 color: #fff;
 box-shadow: 5px 5px 5px #000;
 -moz-box-shadow: 5px 5px 5px #000;
 -webkit-box-shadow: 5px 5px 5px #000;
 background-color: #c06;
 padding: 5px;
}

Here’s what it looks like

This example shows a traditional shadow, offset to the bottom left. I also inserted a couple additional styles to fill out the box.

This is a box with a shadow

Reversing the shadow

If you’d like to reverse the shadow, and have it display top-left, you can do so with the following CSS code.

Here’s what the CSS looks like

.box-two {
 color: #fff;
 box-shadow: -5px -5px 5px #000;
 -moz-box-shadow: -5px -5px 5px #000;
 -webkit-box-shadow: -5px -5px 5px #000;
 background-color: #c06;
 padding: 5px;
}

Here’s what it looks like

Using negative values, it is easy to reverse the shadow.

This is a box with a shadow

Sign Up for the Cardeo Mailing List