Most popular posts on Cardeo in 2010

Creating a Fading Link Transition with CSS3
A simple tutorial explaining how to add fading to your text links using CSS3.

Coding an Animated News Ticker with jQuery and CSS
How to build a nifty little animated news ticker using jQuery and CSS. The ticker fades through a list of news updates that you specify.

Adding an Outline to Your Text Using the CSS3 text-stroke Property
A quick tutorial showing you how to add a stroke to text using CSS3.

Do I Need to Charge HST?
A useful little post for small business owners in British Columbia. Helping to demystify some of the confusion around the new HST tax.

Using CSS3 font-face to Add Custom Fonts to Your Website
A tutorial explaining how to use non-system fonts on your website using CSS3.

How to Create Circles with CSS3 and no Images
A tutorial showing you how to use the border-radius CSS3 property to create circles.

20 Most Useful Scripts From CodeCanyon.net
A collection of the most useful Javascript, PHP, and .NET from CodeCanyon.net.

CSS3 Minimal Admin
A free CSS3 Minimal Admin template from Cardeo.

How to Create a Custom Border Using CSS3 border-image
A tutorial explaining how to create a custom border with CSS3.

5 Premium Minimal Website Templates
5 of the best premium, minimal website templates from ThemeForest.net.

In the past, you would’ve had to use javascript or another scripting technique to achieve this formatting. However, this method allows for pure CSS3 code to get the zebra-striping to work. The one small downside is the fact that it is only supported by CSS3 browsers.

Work around for older browsers

This method is a little code heavier, but it will work in all browsers. First things first, we need to create some styles for the alternate table rows. Check out the example:

tr.alt {
 background: color: #ccc;
}

Here’s where the code heavy portion of the technique comes into play. You need to insert the alt class on every even <tr> tag in your table, as shown below:

<table>
 <tr>
  <td>a row</td>
 </tr>
 <tr class="alt">
  <td>another row</td>
 </tr>
 <tr>
  <td>a third row</td>
 </tr>
 <tr class="alt">
  <td>a fourth row</td>
 </tr>
</table>

That’s it, that’s all, you can view a demo here. If you want the lighter CSS3 version, check it out at: csswizadry.com.

Upgrade Ideas

What would you like to see?

• More tutorials. Which ones?
• Additional documentation?
• History of CSS3?
• Blog feed?
• iPad version?

Those are just a few ideas, feel free to post your requests below in the comments. By the way, the app is currently on sale for 66% off the regular price! Pick it up now for only $0.99 on the iTunes Store.

What’s Your Question? Hit Me!

Feel free to ask anything CSS3 related. There are no stupid questions, so don’t feel intimidated to ask something you think might have a simple answer. Chances are, someone else has the same question. Simply post your question in the comments below, and I’ll reply asap.

CSS3 Minimal Admin | Download

Make sure you check out the Cardeo Minimal HTML Email Template.

CSS3 Minimal Admin Template Features

• Valid Code
• Elastic Layout
• Minimal Design
• Make’s use of Google Font Directory
• Font being used is ‘Droid Sans’
• No Images used except for icons.
• Icons by Woofunction
• Supports all Webkit and Gecko browsers

CSS3 Features

• Round Corner boxes, images, form inputs
• Letterpress text styles, text shadow
• 1, 2 and 4 column layouts
• Fancy CSS3 Buttons
• Gradient Backgrounds
• Box shadows
• Link transtion animations
• transparent images

If you find this template useful, please consider buying me a beer :)

Licensing Info

This work by Matt Lambert is licensed under a Creative Commons Attribution 3.0 Unported License

CSS3 Handbook $2.99 | Buy Now

Additional Info

The app is available for iPhone, iPad, and iPod Touch for the low price of $2.99. To learn more, please check out the app’s website.

Extras

The purchase price of this app includes access to source files for all the tutorials. As well as, live demos for all of the tutorials. Click on the link within the app to visit the website.

Screenshots

The app has a minimally styled interface that allows you to easily read and process the content.

App Reviews

Are you an app review blogger? If so, contact me to get a free copy of the app for review. Offer only valid on the US App Store.

CSS3 Handbook $2.99 | Buy Now

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

Make sure you check out the Cardeo Minimal HTML Email Template.

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.

Browser Support

Currently, these styles are only supported by Safari, Chrome, and Opera (PC only).

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 */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover {
 color: #c00;
}

Make sure you check out the Cardeo Minimal HTML Email Template.

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.