1. Border radius.

We've all seen it over the web. Rounded corners are everywhere. Before CSS3, you either needed to do it with images, or some special (or crazy) JavaScript. No longer. CSS3 has the ability to have rounded corners without the need to get things complicated. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

You can also target individual corners, for a nicer effect:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome. For an example, check Twitter. For more information, check css3.info

2. Border Images

The next feature is a must. Before CSS3, borders had to be of a standard pattern, or just a simple line. Now, you can use your own images and create some stunning effects. This is how we do it:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

This can also be applied on a per-side basis, allowing seperate images per side for that added sparkle.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Supported in Firefox 3.1, Safari and Chrome. For an example, see Blog.SpoonGraphics. For more information, check css3.info.

3. Drop Shadows!

No more photoshop! No more photoshop! You now don't need photoshop to include drop shadows to your sites! Here's how it's done:

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

To do it on a text element:

text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only). For an example, please visit 24ways For more information, visit css3.info (box) or css3.info (text)

4. Transparency

Before CSS3, PNG's played a vital part in Web Design. Now a CSS3 value lets you do the same, with a lot less time and effort needed. Here's how we do it in CSS now:

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect. Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

color: #000;
opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes). For an example, visit 24 Ways (RGBA). For more information, visit: css3.info

5. @Font-Face

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule lets you use whatever font you want. Easily. Here's how:

@font-face {
font-family:'Helvetica';
src: url('/images/Helvetica.otf') format('opentype');
}

The rest of the settings are then called as usual:

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE (thanks for heads up, Jon Tan)) For an example, please visit TapTapTap. For more information please visit css3.info

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules too.
Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users. According to statistics, almost 50% of all Internet users should be able to view these features.

Downsides.

Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place.

Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This invalidates your style sheet and if you pride yourself on being "valid" don't use them.

Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup. Which means a bigger file, which means a slower site load.

Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular.

1. First of all, Could you lead us through a brief history of your life? Where you live, what you do?

I was born in Central NY and moved to Rochester, NY to attend college at Rochester Institute of Technology. There I studied Graphic Design and graduated with a BFA in 2001. I am the Creative Director at Fuel Brand Group where I am responsible for all of the design and the general creative direction of the Fuel Brand Group and its network of sites.

2.How did you get started out on the web and what inspired you to get into coding?

I’m not really a coder, I’m more of a designer. I’ve jumped into bits and pieces of it but I don’t consider myself a coder by any stretch of the imagination. I save that for the experts!

3.What languages do you code and which one do you think is more 1. powerful, 2. simple and 3. you enjoy more?

I enjoy English the best I’m also a big fan of JQuery.

4.What sites you use for inspiration and do you recommend any to our readers?

I recommend Fuel Your Creativity, Design By Grid, Six Revisions, Web Designer Wall, and PatternTap.

5.Do you have any other hobbies? If so what are they and why do you enjoy them?

I enjoy hardworking because it gives me the chance to clear my head, so more ideas come to me!

6.Do you run a PC, or a Mac, why?

Mac…because apple kicks ass.

7.What software couldn’t you live without and could you name 3 reasons?

Photoshop because 1) ease of use, 2) &3) Because I wouldn’t be able to do my job without it.

8.What’s the program you use to code in? What is so good about it?

The little coding I do is usually done in TextMate and CSS Edit. They just work for me.

9.When you first started out, how did you promote yourself?

When I first started out I dove into the blogging community and got my name out there by commenting. Twitter has also helped promote me and my sites.

10. Finally, Where can we find you on the web, Be that you’re twitter, portfolio or other?

Twitter: http://twitter.com/adellecharles
Fuel Brand Group: http://fuelbrandgroup.com
Fuel Labs: http://adellecharles.com/temp
Fuel Your Creativity: http://fuelyourcreativity.com

So i thought...well, why can't i add this bookmarklet to my site?, in case people want to read the articles that I've written without visual distraction. So I did, and you can see it on any of the single post pages on my site.

It's really simple, just go to the Arc90 Readability Bookmarklet Generator and pick your settings, then right click on the bookmarklet, and select "copy link" or "copy link address", then all you have to do is set up a div with the text of your choice in it:

<div id="readability"><p><a href=" ">Make This Post More Readable</a></p></div>

And set up some style rules in your CSS file for that DIV:

 #readability {
background-image: url(images/readability.png);
background-position: 12px left;
background-repeat: no-repeat;
padding: 5px 5px 5px 24px;
}

And then simply paste in the link from the bookmarklet into the 'href' field of your link:

javascript:(function(){readStyle='style-novel';readSize='size-large';readMargin='margin-medium';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

And you're done! don't forget to download the book icon (if you want it) from here, the icon is from the awesome famfamfam silk icon set. Don't forget to adjust the path to it in the CSS I gave you.

And the results speak for themselves, here is an article from the guardian before using readability:


And After:

So there! now your posts are more readable there's no excuse not to be writing top-notch content! Don't forget that you can style this to look like whatever you want! Enjoy...

A Note On Browser Compatibility

I can't see anything on the official website with regard to this, but i'd assume that it's fairly exclusive to modern browsers, and in the case of the IE's you should probably see it working with IE7+, but i can't verify that. But it should be fine in your Safari's, your Firefox's and your google Chrome's, as well as any other browser that is up to date.

**Before we start, please note that this script does NOT work in Safari 4**

Step 1
Download the script by clicking this link (right-click and save target as).

Step 2
Now, we have to add in the code to the page. Let's say we're adding the code to Amazing Coder's homepage: (the Scrollovers code is in bold).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amazing Coder</title>
<meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://amazingcoder.com/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://amazingcoder.com/feed/rss/" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://amazingcoder.com/feed/atom/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://amazingcoder.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://amazingcoder.com/wp-includes/wlwmanifest.xml" />
<script type="text/javascript src="http://amazingcoder.com/wp-content/themes/amazingcoder/scrollovers.js"></script>
</head>

We'll also need to add in the CSS after the <head> tag:

<style>
a.scrollover {
/* Default Colour/Styles here */
color: #0C3;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #F93;
}
<style>

Step 3
Now we have to add it to one of our links. I've just created an example page, to display them. This is some code extracted from the page:

<a href="#" class="scrollover" type="scrollover">Example Link 1</a>

You can view the live demo here: http://lpanderson.net/tutorial1/

The best part is that it works tightly with CSS, so if you’re a designer, you already have about 80% of the skills needed to program actions in jQuery!

Why jQuery?

Because it’s probably the most widely used and widely extended javascript library around, a lot of people seem to know it, so support is usually not far away, and in my personal opinion, i think it’s the most intuitive to designers.

Ready?

Ok then, let’s get started...

Firstly, copy the below code into a blank HTML document, this is the basic page structure that we’re going to work with, and a little bit of CSS in the head section to control what certain elements on the page look like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>jQuery!</title>
 
 
 
 <style type="text/css">
 
 p.ourParagraph {
 padding:10px;
 border:5px solid #947d5f;
 background-color: #d3b287;
 width:500px;
 margin-left: auto;
 margin-right: auto;
 margin-top:50px;
 color:#fff;
 }
 
 </style>
 </head>
<body>
<a class="showParagraph" href="#">Show The Paragraph</a> |
<a class="manipulateCSS" href="#">Manipulate The CSS</a> |
<a class="reset" href="#">Reset Everything</a>
<p class="ourParagraph" id="main">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p class="ourParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
</body>
</html>

You’ll notice there are two paragraph elements, both have a class name “ourParagraph” applied to them, which is why they look the same, but the top one has an ID attribute as well, more about why later.

Remember to save your HTML file in the root folder of your site, and make sure the path to jQuery is correct in the script tag.

Including jQuery on your site...

You’ll need to head over to the jQuery web site and download the latest release, don’t worry too much about the compression options, just use the default setting (production).

Then you’ll need to place jQuery either in the root folder of your site, or in a “js” or “javascript” folder, i’ve chosen the former. You then insert this snippet of code into the top of your page:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

Of course, the “src” path will depend on where you chose to store your jQuery file, so adjust accordingly.

(Document).Ready?

The first thing I'm going to go over is using the document ready function. This checks to see if the DOM is loaded and ready to be played with using javascript.

$(document).ready(function() {
/* Anything you want to happen when you load the page goes here */
});

Then inside this little command, you can tell the script to hide any elements with the class of “ourParagraph” (which we have two of). You do this by looking for elements similar to the way you would with CSS:

$(document).ready(function() {
/* Tell it to hide any elements with a class of “ourParagraph” */
$(“.ourParagraph”).hide();
});

Now refresh your page, you should see the two brown-backgrounded paragraphs dissapear, if it works, congratulations, you just wrote some jQuery, if not, make sure that you’ve typed everything correctly (don’t copy and paste or it’ll never stick in your head!), and also check that you’ve included your jQuery library file correctly, and that it’s in the right place.

Now let’s just take a look at what we just did...

// We said “when the page is ready to be manipulated:
$(document).ready(
// Do this:
function () {
// Take this element:
$(“.ourParagraph”)
// And Hide it:
.hide();
// Then we close up the loose ends:
});

There, simple. And this is the style of coding for most of jQuery’s effects and interactions with your page.

Let’s get the paragraph back...

Notice there’s a link element in there with a class of “showParagraph”? well we’re going to use that class to tell jQuery to show the paragraphs again when the link is clicked. So, inside you’re document ready function, insert this code:

$(“.showParagraph”).click(function() {
$(“.ourParagraph”).show();
});

This is simply doing the opposite of our .hide() piece of code, but doing it only when we click the link, not straight away when the document is ready. You should now be able to refresh the page, click the “show the paragraph” link, and they will both pop into view.

Note that the link elements in our page have a value of href=”#”, this is the most basic way of creating a link that doesn’t navigate to any page when clicked on, but can still be used to manipulate things with javascript.

Adjusting CSS, without refreshing the page!

This is one of the coolest features of jQuery is it’s shorthand for adjusting CSS properties of page elements. We’re going to target a specific element in the page, one of the paragraphs, which is why i attached an ID to one of them.

/* when you click the  with the class “manipulateCSS”... */
$(“.manipulateCSS”).click(function() {
/*Target the paragraph with ID “main” and adjust the following CSS properties */
$("#main").css({'background-color' : 'red', 'width' : '200px'});
/* Close up the loose ends */
});

This will adjust one of the paragraphs’ widths and background colour. Refresh your page and see for yourself! You should see the first paragraph element turn red and get thinner.

The possibilities for this interaction are endless! you can adjust where things are on the page, change their typography, and make things bigger, all from one command in jQuery.

/* When we click the link with class “reset” */
$(".reset").click(function() {
/* Hide the paragraphs */
$(".ourParagraph").hide();
/* Reset the css back to normal */
$(".ourParagraph").css({'background-color' : '#d3b287', 'width' : '500px'});
/* close up the loose ends */
});

You can download the files for this tutorial here

NEW! View HD on the Vimeo site by clicking HD in the player! Or by clicking here!

1. Compress your images.

When using the "Save for Web" tool in Photoshop, you can compress our images in order to lower the file sizes. Now normally that's enough for anyone, but if you want the ultimate efficiency, a site named Smush.It makes your images ultra tiny without taking any quality with it.

2. Move script tags to the bottom

Content here...
<script type="text/javascript" src="someScript.js"></script>
<script type="text/javascript" src="anotherScript.js"></script>
</body>

Moving the scripts down to the bottom of the page means that your form, content and images can all load before you start adding in the fancy effects or implementations. This is especially useful if for instance you're using a twitter badge to give your site you're twitter updates, but twitter is down. Having the code at the bottom of the page, means that all of your content can load first, rather than twitter timing out, then your content loading (making the page load very slow)

3. Link your scripts from Google

Not too long ago, Google began hosting scripts such as jQuery. There is one main upside to this:

Caching: Let's imagine that one user visits 10 sites that all link to Google's CDN, the user would only download jQuery once. this is because a browser can tell if a file is modified or not and can choose to load it, or in this case, not have to.

Compress your CSS and JS

Compressing your CSS and JS files can make that tiny bit of difference and can speed your website up quite a bit. Here are some tools to get started.

Javascript Compression Services

• Javascript Compressor
• JS Compressor

CSS Compression Services

• CSS Optimiser
• CSS Compressor
• Clean CSS

4. While creating, learn keyboard shortcuts

Now this may sound straightforward, but I know personally how frustrating it is to have to go three of four menus to get to a very simple function, only to realise when you've got there, there is a keyboard shortcut for it. Learn them. If a function doesn't have a keyboard shortcut, and you have a Mac, you can create you're own by going to Keyboard Shortcuts in System Preferences. Now I don't know if this is possible in Windows, but if it is, please do leave a comment so I can add it into the article, (I hate to leave out people because of their OS.) After creating a keyboard shortcut, make sure you actually use it. Time after time, I've created them and completely forget that I have. When you go to the menu item again, make sure you use the keyboard shortcut and think about it every time you do. Eventually it'll become second nature and you'll be flying through the menus with ease.

5. Finally, don't use tables. 

Let me first explain what a table is for. A table is for laying out tabular data, not a while site. If you want a table of content, use tables. (pretty obvious) If you want a whole site layout, use CSS and Div tags. There are many reasons, but one relates to speed, Nested Tables load more slowly. The most common way to create fancy layouts with tables is to "nest" tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. In Internet Explorer, this results in images and text bouncing around on the screen until they figure out where to place them. And in Netscape 4, the page won't display at all.

1. Comment.

CSS comments can be made for a single line or multiple lines, but regardless of how you pass your comments they are always passed to your users reading the file. So, not only does it make it easier for you to get to a certain section in your code, but it lets your users see it too. For instance, you could include a copyright notice, a contact number, a website. Anything! Comments help you out in more ways than one but the most important, it helps you find certain elements in the file. For instance, put a comment above all the link styles, then when you go through your work, you can find and edit the styles to your liking. Quickly. Another use? WordPress uses these comments to get the theme name, copyright and more. For the full syntax for WordPress, please see our Coda Clips post. 

Here's how you comment CSS in the cleanest way.

/* All CSS comments begin with forward slash and asterisk
and end with an asterisk and forward slash regardless if
the comment is many lines in length or if the comment is
only one line. */

At the top of every page I code, I'm adding in the following syntax, not only does this give users information about where it originated and who by, it gives me a chance to say that they can't copy it, redistribute it or anything else of that nature and that they are free to have a look around and see how I've done things.

/* All work copyright 2009, Lewis King. All rights reserved. This CSS file was originally created by Lewis, and  you cannot use it for your own work in full or parts. You're welcome to have a look around to see how things are done, but nothing can be taken without his express written consent. */

Then, underneath that, I categorise everything in to the following sub headers.

/* Main */
/* Reset */
/* Link Styles */
/* Header */
/* Wrapper */
/* Content */
/* Footer */
/* Other */

2. Reset.

Use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something. It can be as simple as removing the margin and padding from all elements:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Now I personally don't see the point in using a big reset like Eric and the YUI, personally, I only reset the padding and margin, like the example above. It's just the way I am, but, if you don't run any sort of reset, it could be a lot of time wasted, so give it a go.

3. Start right.

CSS is worthless without a well formatted document. You need to write your HTML before you write your CSS. If you write the CSS first, it'll be a lot harder to get the end results and will take a lot more time than it's actually worth. After remembering all the elements, how you've named them and what they do, trying to add them into a document that might not work the way you want, is going to take a good few hours. Write the whole HTML document first, then do the CSS. Not the other way round.

4. ABC

By alphabetizing your work, you are creating consistency that will help you reduce the time you spend searching for a specific element. By doing this, you can quickly get to the specific property you want to edit and work on it there and then. It also makes your code cleaner for you to read at a later date, along with your users who want to quickly see how you've done a certain thing. 

5. Use Coda Clips

Back to my favourite coding application again, you must thing we're sponsored by it! Coda includes a little add-on of sorts called Coda Clips. What they do is genius. They are a great way of inserting common elements and syntax into a file with just a click of a button. Open up the Clips menu and you instantly see a bunch of different HTML elements, that you could forget when creating a site from scratch. After choosing the one you want, you simply click it, or drag it to where you want and it's instantly inserted into the page. They come with every install of Coda, even the free trial and are editable down to the finest detail. You can add your own, edit the defaults, and more. For some of our favourites, please go here.

What's your favourite way? How do you speed up your coding? How do you keep your code clean? Post a comment below to start the discussion!