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

Browser Support

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

Adding shadow to your type

A shadow is added to your type using the text-shadow property. In the example below, you’ll notice 3 pixel values. The first controls horizontal offset, the second controls vertical offset, and the third controls blur. The fourth value is the shadow color, which is set using a hex number.

Here’s what the CSS looks like

h1 {
 text-shadow: 2px 2px 2px #000;
}

Here’s what it looks like

This is a text shadow

Like I mentioned in my intro, this one is pretty easy to implement into your designs,. I’d suggest playing around with the horizontal, vertical, and blur values to see what you can come up with.

About the App

The event guide is your source for all the notable free concerts and events around the Vancouver 2010 Olympics. It includes day by day listings of events, editor’s picks, google map links to venues and much more.

Features

• Daily, hour-by-hour listings of all the notable free events
• Google Map links to each venue
• Venues and events across the lower mainland
• Editor’s picks of the best free events
• Great value at only $0.99

Download now from the Apple App Store

Download

Contest

I’ve got a great prize pack here for one lucky winner. It includes 3 books: The Smashing Book, Foundation XML for Flash, and Foundation PHP for Flash. To enter simply tweet the below message on Twitter.

Download the Guide to Free Events at Vancouver 2010 iPhone App http://cardeo.ca/2010feg/ @van2010app #van2010

ReTweet This Message

Rules

• Enter as many times as you like
• 1 winner will be picked on March 1, 2010
• Open to residents of Canada and the USA only

For more info on the app, please visit cardeo.ca/2010feg