As designers and developers we should always be looking to increase our skills and creativity. A great way to keep motivated and push yourself as a designer is to look at outstanding work by others. I don’t know about you, but when I see an awesome site I want to inspect it and figure out what they did or study it visually to see exactly why it’s effective. This helps me become a more well rounded designer and constantly keeps me on my toes.

Smashing Magazine issued a challenge for 2010 called Design Something Every Day. Could you imagine how much your design skills would improve if you designed something every day? Another way I find inspiration is through looking at other peoples work. Enter the CSS Gallery. Here are my top 10 galleries that I visit most often. These sites are listed in NO particular order.

1. CSS Awards

The CSS Awards site is very busy, but I love the rating scale they use for the sites. Some of the other galleries don’t get voted on by a panel of designers which is why I love this one!

2. Site Inspire

siteInspire is the exact opposite of #1. It doesn’t have a public panel, or a real busy site, but it continually brings high quality inspiration to many designers around the world.

3. Designshack

Design Shack not only has a great CSS Gallery but they put together some awesome blog posts from various authors. It also has a cool feature that allows you to search their gallery by color.

4. CSS Mania

CSS Mania has been around for a while and it went through a branding change not to long ago. I like CSS Mania because of the high quality work and it shows the color scheme of each selection.

5. CSS Drive

CSS Drive also went through a re-branding process and completely revamped their website. They did a good job on adding new features and keeping the overall experience of browsing the website pleasant.

6. Bestwebgallery

Technically BestWebGallery isn’t just a gallery for CSS, but it’s still one I frequent because of the inspiration it offers. It also gives you the ability to sort by tags such as CSS and Flash to narrow it down further.

7. CSS Remix

CSS Remix is about as simple as you an get. It’s a great site to bookmark if you need quick uninterrupted inspiration.

8. CSS Beauty

CSS Beauty is another site that has great resources regarding CSS not just a gallery. I recommend you spend some time on this one.

9. CSS Nature

CSS Nature was actually a new one to me, but I was inspired by it’s layout and ease of use.

10. CSS Line

Looking at this logo alone inspires me to be a better designer. Not to mention the high quality work they output. This is also a new one to me but I’m glad I found it.

Get Inspired

Now you have 10 sites you can visit frequently so there is no excuse for a lack of inspiration. It’s out there, now do your part and go seek it. If galleries aren’t the way to go for you find something that is. Take a walk around your neighborhood or local park. Do something to get yourself inspired.

“I write when I’m inspired, and I see to it that I’m inspired at nine o’clock every morning”Peter De Vries

The goal of this post is to harness some new functionality provided by CSS3 and move away from images. We are going to create a CSS3 login form without images yet still have a visually pleasing result.

DEMO

Writing the HTML

First lets begin with creating the HTML markup that makes up the login form. Start with the basic HTML page as I will not include that portion in the code.

<form>
		<label>Username:</label>
			<input type="text" name="username" />
		<label>Password:</label>
			<input type="password" name="password"  />
			<input type="submit" value="Submit" name="submit" class="submit" />
</form>

This is the basic markup with a few labels and Input elements. Now there are many different ways to markup the HTML you see above, but I tried to make it as simple as possible. Make sure you add the Class SUBMIT to your button because it will require different styling.

HTML Only Demo

As you can see above we really need the power of CSS in order to give this login form some visual appeal. Enter CSS3!

Writing the CSS

It is now time to give this login form some life. CSS3 has some really powerful new features and we will be covering only a few of them. First lets get some of the basic layout styles down nothing having to do with CSS3

Styling the Form Element

We will begin writing our CSS targeting the form element as some of the other elements on the page will rely on the parent element. I’m going to go through the properties in logical order not in alphabetical order. We want to set the width to 250px with 20px of padding on all sides and a 1px border also.

form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;
}

Adding CSS3 to the Form Element

Now lets add in the CSS3 magic to bring this form to life.

form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;

    /*** Adding in CSS3 ***/

    /*** Rounded Corners ***/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;

    /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
    background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));

    /*** Shadow behind the box ***/
    -moz-box-shadow:0px -5px 300px #270644;
    -webkit-box-shadow:0px -5px 300px #270644;
}

Styling the Input Elements

Styling the input elements is pretty easy but it does have some complications that can frustrate. We will apply a background color, a top border, some padding, and a width.

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

Adding CSS3 to the Input Element

For the input element we will implement the new features of CSS3 called transitions. Unfortunately this only works in Webkit browsers such as Safari and Chrome.

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;

    /*** Adding CSS3 ***/

    /*** Transition Selectors - What properties to animate and how long ***/
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;

    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}

Now that we have the styles for the inputs in place lets style the hover events for those same inputs.

input:hover {
    -webkit-box-shadow: 0px 0px 4px #000;
    background: #9d39e1;
}

Some of you may not have caught it but I increased the radius of the shadow on hover from 2px to 4px. That is why we used the transition effects on the inputs because it triggers that change on hover.

Styling the Button

Ok we’re almost done, on to the button! Since we gave our button the class SUBMIT we can use that selector in our CSS.

input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;
}

Adding CSS3 to the Submit Button

input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;

    /*** Adding CSS3 Gradients ***/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
    background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}

That’s it! Now you have an awesome login form styled strictly with CSS3 and no images. Of course it only works in webkit browsers currently which are Safari and Chrome, but CSS3 support will be coming to a browser near you soon. If you liked this post please promote it below!

FINAL DEMO

So you just purchased a new hosting account and you some great ideas for your next project. Instead of just having the host default page up for your domain name why not create a coming soon page that is simple and effective.

There are many reasons to create these coming soon pages. The first reason is to make your product or service look more professional instead of having the “This is a website” page that your hosting company provides you. Secondly, it can help promote your site before it is even launched. Be sure to include your twitter account or an email subscription so people can follow the progress of the site. It allows them to get more excited about something they haven’t even seen yet.

Example Screenshot

Designing the page

When you start the design keep in the back of your head that this does not need to be a complex page on the contrary actually. This page needs to be simple yet effective. It must also convey a message of what the site will offer to get people interested. Don’t spend too much time on this page as you need that time to complete your other ideas. Let’s go ahead an open up photoshop and get started.

1. Open up a photoshop document 900px by 700px with a transparent background and the settings below.

2. Now lets fill in the background by going up to Edit > Fill.. chooser color from the drop down and put in the hex code #333333 and hit OK.

3. Now select the rectangular marquee tool and in the drop down box at the top choose Fixed size. Enter 900px for the width and 300px for the height.

4. Before you click anywhere go up to Layer > New > Layer… and name it Top. Now you can click anywhere in the document and make sure you drag the selection to the top.

5. Make sure you are selected on the newly created layer not the dark layer and go up to Edit > Fill… choose color from the drop down and enter #ececec for the hex code.

6. Now we have our top section put together all we have to do is bring in the logo. Open up your logo and drag it into your document. This is an important one because you want the brand to really stand out so make sure your logo is prevalent.

7. Next we need to add in the COMING SOON portion so they know that the site is not just a broken site. You don’t have to necessarily use COMING SOON, just something that lets the customer know that it’s not available yet. First create another new layer by going to Layer > New > Layer… name it Shadow. Grab your rectangular marquee tool and set a fixed size to be 400px wide and 30px high. Click and make the selection directly underneath the logo.

8. Grab your gradient tool and in the Gradient Picker (which is in the top left) choose your second option which should be foreground to transparent. Also set your foreground color to black by pressing D on your keyboard. Click approx. 5px above the selection that you have and while dragging down hold the shift key and let go when you get to about the middle of your selection. Once that is done drop your opacity for this layer in your layers palette to 10%.

9. Next we will use a layer mask to fade the corners out diagonally. Go up to Layer > Layer Mask > Reveal All. This allows us to see the complete layer and then fade it out by using the color black. You should still have your gradient tool selected and Foreground to Transparent selected and black as your foreground color if not make sure you do. Next drag the gradients below each of the corners in an upward diagonal direction like the screen shot below.

10. Once that is finished go ahead and add the coming soon text in.

Coding the page with CSS3

I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.

The Basics

11. This is the bare bones of what an HTML page must consist of in order to display properly. Add the code below to a blank HTML file and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Alive Again Apparel</title>
</head>
<body>

</body>
</html>

12. Next create a CSS file and name it style.css. Now lets link our CSS file to our index.html file so we don’t forget. Add the piece of code below directly above the closing head tag. Oh and to save you some trouble make sure the index file and the CSS file are in the same directory.

<link href="style.css" rel="stylesheet" type="text/css" />

The HTML Structure

13. Now let’s choose exactly how the page is going to be laid out. We will be using a 100% width layout in this tutorial so we will need two divs for the top section. One to fill the color 100% across and the other to center the content. In the example below I took out all of the other tags except the body tags and what’s between them, but that was only to make it easier to see. You still need the other tags in order for the page to work.

<body>
     <div id="top">
          <div id="topcon">
               <img src="logo.png" id="logo" />
          <div><!-- This div will be centered and contain the logo -->
     </div><!-- 100% color all the way across -->
     <p>Alive Again Apparel is a Christian T-Shirt business that is getting ready to launch. We will be delivering spirit filled T-Shirt designs for a unique way to spread the gospel.  

     <p>If you would like more information please feel free to email us at <a href="#">test@test.com</a> or follow us on <a href="#" target="_blank" id="twitter">Twitter</a> to get news about the upcoming launch.</p>
</body>

14. Now we have our content and you guys should now have an html page that looks pretty boring with no styling at. Enter CSS3! Open up your CSS file and start with the code below. I know how dare I say use this. I recommend that you use some type of CSS reset instead of using this * method, but I used this for the sake of simplicity.

/*** Resets all elements ***/

* {
   margin: 0px;
   padding: 0px;
}

/*** Gives the body the dark gray background we used in PS ***/

body { background: #333; }

/*** Styles the links ***/

a { color: #999; }

/*** Sets paragraph styles ***/

p {
   color: #ececec;
   font-family: verdana, arial;
   font-size: 12px;
   line-height: 18px;
   margin: 0px auto 20px auto;
   text-shadow: 1px 1px 1px #111; /*** New CSS3 Property that adds the shadow ***/
   width: 450px; /*** Allows paragraphs to be centered ***/
}

I used the Text-Shadow property right here which is brand new in CSS3. It gives our text a nice shadow behind it in most modern browsers.

15. Now that we’ve styled some of our HTML elements lets move on to the layout.

/*** Top section 100% color ***/

#top {
   background: #ececec;
   border-bottom: 1px solid #fff;
   margin-bottom: 30px;
   width: 100%;
}

/*** Topcon centers the page at 900px ***/

#topcon {
   margin: 0px auto; /*** Centers the page ***/
   width: 900px; /*** A width is required in order for it to center ***/
}

16. Notice in the HTML above I added ID’s to the twitter text and the logo. We will use these specific ID’s to style them

/*** Styling the Logo ***/

#logo {
   width:445px;
   height: 125px;
   display: block;
   margin: 0px auto; /*** Centers the logo in the 900px box ***/
   padding: 100px 0px;
}

/*** Styles the twitter link ***/

a#twitter { color: #4ce6fd; }

LIVE DEMO

The Final Product and Plug

If you hadn’t guessed already Alive Again Apparel is a Christian T-Shirt Business I am starting and I wanted to walk you through my process of creating a coming soon page that can be seen here.

Please keep a look out for the launch of www.aliveagainapparel.com and be sure to follow me us on twitter to keep up to date with the progress @AliveAgainApprl

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

The Font Attribute

CSS provides us with the Font attribute, which is what allows us to tweak the text on our page. This is an overview of the syntax and how to effect text using CSS.

Font-size

Change the size of your font using font-size

     font-size: 1.2em;
     font-size: 12px;
     font-size: 10pt;

Live Preview

1. Font size is set to 1.2em.
2. Font size is set to 12px.
3. Font size is set to 10pt.

Font-weight

This is used to change the weight of your font (i.e bold, bolder)

     font-weight: normal;
     font-weight: bold;
     font-weight: bolder;
     font-weight: lighter;

Live Preview

1. Font weight is set to normal
2. Font weight is set to bold
3. Font weight is set to bolder
4. Font weight is set to lighter

Text-transform

The text-transform property allows you to apply uppercase, lowercase, and capitalize effects to your text.

     text-transform: capitalize;
     text-transform: uppercase;
     text-transform: lowercase;
     text-transform: inherit;

Live Preview

1. Capitalizes the first letter in every word
2. Allows your html to be lower case the converts it all to uppercase characters
3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS
4. inherits the text-transform property from its parent element

Text-decoration

The text-decoration property allows you to underline, overline and put a line through your text

     text-decoration: normal;
     text-decoration: underline;
     text-decoration: overline;
     text-decoration: line-through;
     text-decoration: blink; (DO NOT USE)

Live Preview

1. Text decoration set to normal
2. Text decoration set to underline
3. Text decoration set to overline
4. Text decoration set to line-through
5. Text decoration set to blink ( Only works in Firefox and Opera )

Font-Variant

The Font variant property allows you to create the small-caps effect which capitalizes the letters then decreases the font size.

     font-variant: normal;
     font-variant: small-caps;
     font-variant: inherit;

Live Preview

1. Font Variant set to normal
2. Font Variant set to small-caps
3. Font variant set to inherit

Creating Drop Caps

Creating drop caps is easy with CSS. There are multiple ways to create the drop cap effect but I am going to show the most efficient way. To create them use the :first-letter pseudo-element which only effects the first character of a given element.

<p class="dropcaps">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

p.dropcaps:first-letter {
      	font-size: 340%;
	margin: 8px 5px 0px 0px;
	float: left;
	font-weight: bold;
	width: 1em;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Creating Attractive Paragraphs

For more attractive paragraphs use Robert Bringhurst’s method which states: Take your font size and multiply it by 30 to get the width of your paragraphs.

For example if your font size is 12px, multiply it by 30 and you get 360px which should get you approximately 65 characters per line.

Incorrect Measure

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct Measure

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Line-height Examples

Line height dictates the amount of space in between each line of text. A good rule of thumb is to make the line height 6-7px bigger than your font-size.

For example if your font size is 12px, add 6px to the font size and you get your line height, which would be 18px.

Incorrect Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Cleanly Emphasize Text

Underlines should only be used on text that is linking to something or somewhere. Italicizing text is a cleaner alternative.

Incorrect example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Looking forward – CSS3

There are already some exciting features that you can incorporate into your designs dealing with type in CSS3. Of course some of these new features do not work in IE, but your probably used to nothing working in IE anyway so give these a shot.

@Font-face

@font-face allows you to upload a raw font file to your web server and link to it in your external CSS file, then apply it to any type on your site.

This feature is the biggest one dealing with type, but along with it’s upside comes its downside. There are only a few fonts that you are “allowed” to use because of licensing issues. The fonts that are CSS3 safe can be found here.

Usage of @font-face

In this example I put a folder in the root of my server called font. First you need to declare the @font-face attribute which imports your font file and then you can use the font name to effect any other elements.

/* Declaring the font */

@font-face {
      src: (font/diavlo.otf)
}

/* Applying the font to an element */

h1 {
      font-family:  diavlo, Arial;
}

Text-Shadow

The text shadow attribute takes away the need to create drop shadows for certain elements in photoshop and gives you dynamic drop shadow control. Of course this attribute is only supported in Safari, Chrome, Firefox and Opera.

Example Heading

p {
      font-size: 2em;
      font-weight: bold;
      color: #777;
      text-shadow: 1px 1px 1px #222;
}

Example Heading 2

p {
      text-shadow: 2px 2px 2px #222;
}

Example Heading 3

p {
      text-shadow: 1px 1px 5px #FFF;
}

The Challenge

The techniques in this article are just guidelines. Take them and implement the features you like into your web designs. Typography is extremely important and can absolutely ruin a beautiful design. Don’t let that happen to you bookmark this guide!

This is the second part in a three part series. Today we will be covering the Border attribute. The first article was on the Background Attribute and the last article will be on the Font Attribute so stay tuned and subscribe. Part one of this CSS series is linked below.

1. In-Depth Look at CSS’s Background Attribute

Some background on the Border Attribute

Borders used to be those ugly gray things that surrounded elements such as tables and frames, but now with CSS they are a very powerful tool for designers.

Overview

There are 3 properties available in CSS2 relating to the border attribute.

• border-color : Sets the actual color for the border
• border-style : Sets the style of the border
• border-width : Sets how thick the border will be

Usage of basic properties

Border Color

The border-color property sets a specific color for the border of the chosen element. Here are some examples of what this property may look like.

border-color: #999;
border-color: rgb(100,200,200);
border-color: red;
border-color: transparent;

Border Styles

The border-style property sets the style of the border on the specified element to whatever value it’s given.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;

Border Width

The border-width property determines the thickness of the border on any given element.

border: 3px solid #64c8c8;
border: .5em solid #64c8c8;
border: thin solid #64c8c8;
border: 10pt solid #64c8c8;

Speed up the process with short hand

This little piece of code is a gem, you might want to take notes on this one. This combines all three border properties into one for increased productivity.

border: (width) (style) (color);
border: 1px solid #999;

Great Examples of Border Usage

1. Kammeradvokaten

This site uses a mixture of typography and borders to bring a truly effective simplistic look. The borders act as organizers for the content. Very well done.

2. Open

This is also another beautiful example of the border attribute. Open has used borders to basically section off each piece of content. Everything is well aligned and they used multiple styles of borders.

My challenge to you

When you are designing that new portfolio or a site for a client, push yourself to incorporate borders in the design. It will not only be a challenge to do it well, but you as a designer will benefit from branching out from the norm. If you do complete this challenge or have completed this challenge please leave a link in a comment so our readers can check them out!

This is the first part in a three part series. Today we will be covering the Background attribute. The second article will cover the border attribute, and finally the third article will cover the font attribute, so be sure to subscribe to catch the other two articles.

A little bit of “Background” (* Pun Intended *)

The Background attribute is probably the most frequently used attribute in CSS. In this article we will cover the different properties that go with the background attribute, and how to use them correctly. We will also have a showcase at the end of the article of sites that have used the attribute to it’s fullest potential.

Overview

There are 5 properties available in CSS2 relating to the background attribute.

• background-color : Set’s a solid background color to the given element
• background-image : Specifies an image to set as the background of an element
• background-position : Set’s the position of the image that was set
• background-repeat : Determines whether the image is tiled or not
• background-attachment : Specifies whether an image scrolls with the page or is in a fixed position

Usage of basic properties

Background Color

The background-color property sets a solid color for an entire element. Here are some of the different values you can use to define the desired color.

background-color: #2bb7da;
background-color: red;
background-color: rgb(145, 100, 140);
background-color:  transparent;

Background Image

The background-image property specifies an image on the server or locally to place as the background of the specific element.

background-image: url(path to image);

background-image: url(logo.png);

There is a huge advantage of using the background property to call in your images because it makes it harder for the “Average Joe” to take the pictures from your site. For example if you place an image in an IMG tag in your html I can right-click it and save it, if you put it in your CSS using a div and the background image property then it would be much harder for me to get to that image. So in other words it adds extra security to your images.

Background Position

The background-position property specifies where your background image should be placed in your elements background.

background-position: 50px -10px; /* Moves image to the right 50px and up 10px */
background-position: 0% 50%;
background-position: center center;
background-position: 0% 70%;

Background Repeat

The background-repeat property specifies whether or not your background image tiles and if so how to tile. This property should only be used in conjunction with the background-image property or it will have no effect.

background-repeat: repeat; /* Default value for bg images */
background-repeat: repeat-y; /* Tiles image vertically */
background-repeat: repeat-x; /* Tiles image horizontally */
background-repeat: no-repeat; /* Stops tiling */

Background Attachment

The background-attachment property is not one that you see often in CSS code. It defines whether the a background image scrolls with the page or stays in a fixed position when scrolling.

background-image: url(logo.png);

background-repeat: no-repeat;
background-attachment: fixed;

Background Attribute Shorthand

Shorthand it!

Instead of declaring each one of these properties seperately we can save a lot of time by using the shorthand for the background attribute.

background: color image position attachment repeat;

background: #fff url(logo.png) 50px -10px scroll no-repeat;

Beautiful Uses of the Background Attribute

Here are a few sites that have really nailed the use of background images in there web design.

Web Designer Wall

Nick La creator of Web Designer Wall does an amazing job on his blog with background images. He uses multiple background images to create an astonishing effect.

Web Designer Depot

Web Designer Depot also does an amazing job of using elaborate background images to enhance the user experience.

PSD Vibe

PSD Vibe uses subtle background images that blend in with the solid background color of the site.

Thats All

As web designers and developers we must learn to use the background attribute and all it’s properties to the fullest. If you enjoyed this post please bump, re-tweet, moo, etc…

A Guide to Cleaner and Faster Coding

As a web developer I am always looking for ways to speed up my workflow. One of the simplest ways to speed up and clean up your coding is to learn CSS Shorthand. In order to fully grasp shorthand, it is helpful to already have a decent knowledge of CSS. I have put together a simple guide to bring you into the world of CSS Shorthand.

CSS Syntax – The Basics

The basic CSS syntax contains a minimum of three parts, a selector, a property and a value

/* Basic Syntax */

selector { property: value }

/* Actual Example */

p { color: #444444; }

Background Property – The Long Way

There are five properties for the background property, but coding all these out separately is a waste of time and space.

#example {
      background-color: #cccccc;
      background-image: url(logo.png);
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-attachment: scroll;
}

Background Property – The Short Way

Combining the five properties into one declaration will speed up your code and it will take up less space in your stylesheet.

#example { background: #ccc url(logo.png) no-repeat 0px 0px fixed; }

Border Property – The Long Way

There are three properties for the border property which consist of the width of the border, the style and the color.

#example {
      border-width: 2px;
      border-style: solid;
      border-color: #333;
}

Border Property – The Short Way

Combining these three attributes is one of the easiest to remember in my opinion, and since I use a lot of borders it saves me a lot of valuable time.

#example {
      border: 1px solid #333;
}

Margin and Padding – The Long Way

Margin and padding have four possible properties each.

/* Margin Example */

#example {
      margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      margin-left: 5px
}

/* Padding Example */

#example {
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 5px
}

Margin and Padding – The Short Way

It is easy to use shorthand for margin and padding. All you have to remember is think clockwise just like a clock. Start with top, then the right, then the bottom, and lastly the left.

/* Margin Example */

#example {
      margin: 5px 10px 10px 5px;
}

/* Padding Example */

#example {
      padding: 5px 10px 10px 5px;
}

There is another way that padding and margin can be written and that is with just two values, the first value being top and bottom, and the second value being left and right.

/* Margin Example */

#example {
      margin: 20px 0px;
}

/* Padding Example */

#example {
      padding: 10px 20px;
}

Colors in General

Throughout this tutorial I have been been short handing the color property (I wonder if you noticed) and here is the correct syntax for that. Any color values such as #333333 (dark gray), can be abbreviated to #333, because all of the values are the same. If a value reads something like #2bb7da it cannot be abbreviated. Of course this is not a huge deal but when dealing with a big project every second counts.

/* Long Example */

color: #333333

/* Short Example */

color: #333;

That’s All Folks

Hopefully this guide has been helpful to you and will continue to be helpful in the future. I will be sure to update this article as technology changes and CSS3 ushers it’s way into the foreground! By the way subscribe, retweet, digg, stumble, or bump if you enjoyed this guide!

Here is the follow up tutorial to my most recent tutorial on how to create Apple’s navigation bar in photoshop. This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.

Final Demo

What are CSS Sprites, and why use them?

In lamens terms CSS Sprites are multiple images combined into one to reduce the amount http requests and server load time. Have you ever used the hover attribute with a background image that shows up on hover? Yep that’s right, when you hover over it for the first time there is a slight flicker, or moment where the image does not show. This happens because the browser doesn’t load that image until the hover state, therefore causing a slight flicker the first time the image is hovered over. CSS Sprites get rid of that flicker because instead of using two images and calling a separate image on hover you combine the two images into one and position it on hover. This might sound a little confusing at first, but keep doing it and you will get it.

Ok, Lets Get Started

1. Click here to download our starting image for this tutorial

2. Create a new HTML file and a CSS file with your favorite editor.

Setting up the HTML

We are going to use an unordered list because they are great especially for navigation. So create an unordered list like the one below. You can see that we have an LI tag for each section on our navigation, this is very important. You can also see that each LI tag has an ID assigned to it. This is also very important because we will need to specify the width of each list item later.

	<ul id="nav">
	          <li id="list1"><a href="#"><span>Apple</span></a></li>
	          <li id="list2"><a href="#"><span>Store</span></a></li>
	          <li id="list3"><a href="#"><span>Mac</span></a></li>
	          <li id="list4"><a href="#"><span>iPod + iTunes</span></a></li>
	          <li id="list5"><a href="#"><span>iPhone</span></a></li>
	          <li id="list6"><a href="#"><span>Downloads</span></a></li>
	          <li id="list7"><a href="#"><span>Support</span></a></li>
	</ul>

That is all of the HTML code you will need for this technique, CSS takes care of the rest.

Setting up the CSS

Ok first and foremost I am hoping you have already linked your style sheet to your HTML file, if not do so now.

3. The first selector we will be working with is our Unordered list which we gave the ID of “nav.” We are going to set our main image as the background of our unordered list. Now, our images total height is 76px, but we only want half of the image to show at first correct? Yes thats correct, because we do not want the bottom half of the picture to show up until one of the buttons on the nav is hovered over. So we are setting the height of the Unordered list to 38 which is half of 76. Margin: 0 auto is just to center the Unordered list in your browser window that piece of code is not necessary. Check out the code below

* { margin: 0px; padding: 0px; }

#nav {
      background: url(nav.png);
      height: 38px;
      width: 876px;
      margin: 0 auto;
}

#nav span {
     display: none;
}

4. Next we need to get the list items to be horizontal because that is the orientation of our navigation. So we float the list items to the left so that they line up horizontally. We also want to get rid of the bullets because they are just getting in the way! The next step is to give a height to our anchor tags. The anchor tags determine which part is going to be clickable which we are giving a height of 38px. If we want all of those 38px to be clickable we have to use display: block.

#nav li {
	list-style-type: none;
	float: left;
}

#nav a {
	height: 38px;
	display: block;
}

It’s Measuring Time

5. Now we have to measure out exactly how wide each of the “buttons” on out navigation our, so lets head back to photoshop. Open up nav.png and grab your ruler tool which is underneath your eyedropper tool and click on the very left edge of the document and drag to the dark middle separator between the second button. Make sure you ZOOM IN so you can be more accurate

6. Repeat step five for each of the buttons until you get all the way to the other end. If you measure correctly they should all add up to be 876px wide. If yours do not match that width move on for now and you can change it later. Now we have to get all of our selectors ready for each individual list item.

#list1 { width: 112px; }
#list2 { width: 120px; }
#list3 { width: 128px; }
#list4 { width: 125px; }
#list5 { width: 137px; }
#list6 { width: 131px; }
#list7 { width: 123px; }

7. Now that we have the widths set we need to position the rollover on hover. So how do we do that? We are going to use background positioning. So we choose our first selector which is #list1, and we set the background image as our nav.png. When using background positioning you have two choices move along the X-axis (horizontal) or the Y-axis (Vertical). Since are rollover image is underneath our active state we need to shift the image up the Y-axis. So how much do we shift it up? Well since our image is split directly in two we can just use the same height as we set for our Unordered list which was 38px, but we need to use a NEGATIVE 38 because the negative makes it go up the Y-axis where as a positive 38 would shift it down.

#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}

8. The -38px for the Y-axis will be the same on each one of the list items because we always want it to shift to the rollover section of our image, but the x-axis will change. The x-axis in the example above is set to zero because it is all the way to the left. So for the next list item we need to shift it over the amount of the previous list items width (Hopefully that makes sense). So we go back and look at the width of the first list item, which we see is 112px so we add that as a negative number to our x-axis on #list2.

#list2 a:hover {
      background: url(nav.png) -112px -38px no-repeat;
}

9. We keep repeating this process for the other 5 list items. Just keep adding the previous widths so by the time you get to the end you should be adding six widths together. Here is what it should look like complete.

#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}

#list2 a:hover {
      background: url(nav.png) -112px -38px no-repeat;
}

#list3 a:hover {
      background: url(nav.png) -232px -38px no-repeat;
}

#list4 a:hover {
      background: url(nav.png) -360px -38px no-repeat;
}

#list5 a:hover {
      background: url(nav.png) -485px -38px no-repeat;
}

#list6 a:hover {
      background: url(nav.png) -622px -38px no-repeat;
}

#list7 a:hover {
      background: url(nav.png) -753px -38px no-repeat;
}

All Done!!

If you have followed all of the steps I have laid out above you should have a beautiful Apple Navigation Bar coded using CSS Sprites. If you have any questions please comment on this post. Please subscribe to my blog if you enjoyed this post. Thanks everyone

Final Demo

There are plenty of CSS tutorials out there that are aimed to increase your knowledge of CSS so you can cut down on mistakes.  This tutorial is going to point out some obvious mistakes that beginners to CSS coding make, with the intention of helping you stop doing these techniques.

1. DO NOT overuse Classes and ID’s

Beginners seem to add classes and ID’s to almost every element on the page.  This is not necessary and can defeat the whole purpose of using CSS. The overuse of classes/ ID’s can not only clutter up your style sheet, but are unnecessary. There are some examples below of what I am referring to.

Incorrect Example:

Here is how to correct the code above

Correct Example:

2. DO NOT use inline styles

Please do not use inline styles in your HTML markup.  The great advantage of CSS is being able to store style markup externally, and allowing it to be distributed to multiple pages.  Inline styles are a bad habit of the 90’s. There are certainly circumstances that inline styles can be useful but certainly not in a final product of a website.

Incorrect Example:

Here is how to correct the code above

Correct Example:

3. DO NOT abuse absolute positioning

Learn how to correctly use absolute positioning.   Every element on the page should not be absolutely positioned.  Learn how absolute positioning can be used effectively, because it is an important tool. Visit W3Schools to learn more about absolute postioning.

4. DO NOT have messy invalid CSS

There is nothing I hate more than a messy CSS file.  Keep it clean and validated to make it easier for other developers to debug.  You can use the W3C validator to validate your CSS.  Some programs such as TextMate for Mac and of course Dreamweaver for both Mac and PC have the validate feature built in. 

5. DO NOT contract DIVITIS

Divitis is a condition that beginners to CSS contract by putting everything on the page inside a DIV.  This partly comes from the transition from tables to divs.  Don’t get me wrong you should never use tables, unless it is for data purposes but you should not wrap every element on the page with a div.  For example do not replace a paragraph tag with a div tag.  View some examples below.

Incorrect Example:

Here is how to correct the code above

Correct Example:

Technorati Tags: CSS Tutorial, CSS dont’s, beginners CSS techniques, Semantic code