Amazing JQuery Tricks , enjoy :)

How to: CSS Large Background

2009-08-20T08:50:00.000-07:00

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

Common Mistake: Background Gets Cropped (see demo)

Take a look at the demo file, it looks fine under 1280px. But if you have a high resolution display, you will see the background gets cut off on the sides.

Example #1: Single Image (see demo)

A quick solution to fix the problem mentioned earlier: make the edge of the image the same color as the BODY background color. Here, I’m going to use Web Designer Wall as an example. Take a look at the image below and notice the edge is a solid color?

CSS Part

The CSS part is very simple. Specify the background image (position it center, top) for the BODY element.

Here is the CSS code:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

  width: 100%;
  display: table;
}

Notice there are two extra lines in the BODY selector. That is to prevent the background image from shifting when you resize the browser smaller than the content width (it happens in Firefox).

Example #2: Double Images (see demo)

For this example, I’m going to use the job board design, Design Jobs on the Wall. I have a cork board pattern repeating in the BODY tag and a wrapper background in the center.

The trick here is to export the GIF matte with a brown color that is similar to the cork board pattern.

Example #3: Sky Background (see demo)

In this example, I have a 1px gradient that is repeated horizontally for the BODY tag. Then I attached a cloud background in the center of the #wrapper tag.

Update: Sky Background Using HTML Selector (see demo)

Thanks to the comments from the readers. Below is an example of the sky background using HTML selector to display the gradient background, so the #wrapper DIV tag is not required. It is a much more cleaner approach.

Download the demo zip now and don’t forget to check out the Large Background Websites.

Credits: thanks to Alex from markup4u.com for the {width: 100%; display: table} CSS trick.

Building Custom WordPress Theme

2009-08-20T08:49:00.000-07:00

This is the Chapter II of the Complete WordPress Theme Guide series. This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.

1. The Blog Frontend

Before you start, let’s take a look at the WordPress default theme and see how it is structured. Take note of the elements (header, post title, search form, navigation, footer, etc.).

Default Frontpage (index.php)

Default Single (single.php)

2. Photoshop Mockups

Based on the information gathered from the default theme, design a Photoshop mockup of your blog. Here I’m using GlossyBlue, one of my free WordPress themes, as an example. Download the demo.zip to see the Photoshop file.

3. HTML + CSS

After the PSD design is done, create a static HTML+CSS template of each page. You can use my GlossyBlue HTML files in the demo.zip to follow this tutorial. Extract the zip and take a look at the index.html, single.html, and page.html. Later in the tutorial, I will use these HTML files and convert them into a theme.

Why Create a Static HTML File First?

Mainly because it will make the development process a lot easier. I usually create a HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the WordPress code. By doing so, I don’t have to worry about HTML or CSS bugs during my theme making process.

4. How WordPress Theme Works

If you go the default theme folder (wp-content/themes/default), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page (index.php << header.php, sidebar.php, and footer.php).

For more details, check out Site Architecture and Template Hierarchy at Codex.

5. Duplicate The Template Files

Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the default theme folder, copy the comments.php and searchform.php file to the glossyblue folder.

6. Style.css

Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire.

7. Splitting The Files

Now you need to understand where to split the file into several files: header.php, sidebar.php, and footer.php. The image below shows a simplified version of my index file and how the markups should split.

8. Header.php

Open the index.html file. Cut from the top to where the  ends, paste it in a new PHP file, and save the file as header.php.

Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag): <title>, <link> stylesheet, <h1>, and <div class=description>.

Navigation Menu (wp_list_pages)

Replace the <li> tags in the <ul id=nav> with <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

Reference: wp_list_pages.

9. Sidebar.php

Back to the index.html file, cut from where the <form id=searchform> start to the closing tag of <div id=sidebar> and paste it in a new PHP file, save it as sidebar.php.

Replace the <form id=searchform> wrap with <?php include (TEMPLATEPATH . '/searchform.php'); ?>.

Replace the category <li> tags with <?php wp_list_categories('show_count=1&title_li='); ?>

Replace the archive <li> tags with <?php wp_get_archives('type=monthly'); ?>

References: wp_list_categories and wp_get_archives.

10. Footer.php

Back to the index.html file, cut from the <div id=footer> tag to the end of </html> and paste it in a new PHP file, save it as footer.php.

11. Index.php

Now in your index.html file, you should only have the <div id=content> wrap. Save the file as index.php. Insert the line:get_header, get_sidebar, and get_footer in the same order as your layout structure.

12. Understanding The Loop

The image below illustrates how The Loop works. The Loop is used to display blog posts and it also lets you control what to display. Basically, The Loop checks if there are posts in your blog, while there are posts, display it, if no post found, say "Not Found".

13. Copy The Loop

Go to the default theme folder, open the index.php file. Copy The Loop from the default index.php and paste it in between the <div id=content>..</div>. Then, replace the static text with the WordPress Template Tags: post date, title, category, comments, next and previous link.

14. Preview The Theme

Congrats! You’ve done the front page (the main part of the theme). Now, login to your admin panel, go to the Design tab, you should see the GlossyBlue theme, activate it and go to the front page to preview the theme.

15. Single.php

Now, it is time to do the single.php template. If you want, you can go through the same process — cut & paste from the default theme. But, I find it easier to use the index.php that you just created and save it as single.php. Open the default theme single.php file and copy the Template Tags over. Then include the comments_template. The image below highlights what I’ve changed:

16. Page.php

With the single.php template you just created, save it as page.php. Remove the post date, comment form, next/previous link… and that’s it.. there goes your page.php template.

17. Delete The HTML Files

Delete all the HTML files in the glossyblue folder (we don’t need them anymore). Technically, that is enough for a basic WordPress theme. You may notice there are more PHP files in the default theme. Well, you don’t really need those files if you just want a basic theme. For example, if the search.php or 404.php is not present in the theme folder, WordPress will automatically use the index.php to render the page. Read the Template Hierarchy for more details.

18. WordPress Page Template

Ok, final example. I will show you how to use Page Template to create an archive page that will list all posts on your blog (good for sitemap). Copy the archives.php file from the default theme folder. Delete the unwanted code and you should have something like this:

Here I’m using the query_post (showposts=-1 means display all posts) to display a list of all posts.

Now, login to your admin panel, write a new page, title it Archives. On the Page Template dropdown, select Archives.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

2009-08-20T08:47:00.000-07:00

What We Are Going to Build

This is what our page is going to look like when finished:

Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer. Nothing too special. Let's get building.

HTML 5

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let's get started marking up the blog page.

Basic Structure

Before we begin marking up the page we should get the overall structure straight:

In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I'll explain afterwards:

view plain copy to clipboard print ?

<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>
</nav>
<section id="intro">
</section>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

<!doctype html>
<html>
<head>
 <title>Page title</title>
</head>
<body>
 <header>
  <h1>Page title</h1>
 </header>
 <nav>
  <!-- Navigation -->
 </nav>
 <section id="intro">
  <!-- Introduction -->
 </section>
 <section>
  <!-- Main content area -->
 </section>
 <aside>
  <!-- Sidebar -->
 </aside>
 <footer>
  <!-- Footer -->
 </footer>

</body>
</html>

It still looks like HTML markup, but there are a few things to note:

In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. It simply tells the browser that it's dealing with an HTML-document.

The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from <h1> to <h6>. In this case the header is used to introduce the whole page, but we'll use it to introduce a section of the page a little later.

The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.

The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.

aside is used to wrap around content related to the main content of the page that could still stand on it's own and make sense. In this case we're using it for the sidebar.

The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.

Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what's what in a page.

Marking Up the Navigation

The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags.

view plain copy to clipboard print ?

<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
</ul>
</nav>

<nav>
 <ul>
  <li><a href="#">Blog</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Archives</a></li>
  <li><a href="#">Contact</a></li>
  <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
 </ul>
</nav>

Marking Up the Introduction

We have already defined a new section in the document using the section tag. Now we just need some content.

view plain copy to clipboard print ?

<section id="intro">
<header>
<h2>Do you love flowers as much as we do?</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

<section id="intro">
 <header>
  <h2>Do you love flowers as much as we do?</h2>
 </header>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

We add an id to the section tag so we can identify it later when styling. We use the header tag to wrap around the introductory h2 element. In addition to describing a whole document, the header-tag should also be used to describe individual sections.

Marking Up the Main Content Area

Our main content area consists of three sections: the blog post, the comments and the comment form. Using our knowledge about the new structural tags in HTML 5, it should be easy to mark it up.

Marking up the Blog Post

Go through the markup and I'll explain the new elements afterwards.

view plain copy to clipboard print ?

<section>
<article class="blogPost">
<header>
<h2>This is the title of a blog post</h2>
<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
</article>
</section>

<section>
 <article class="blogPost">
  <header>
   <h2>This is the title of a blog post</h2>
   <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
 </article>
</section>

We start a new section and wrap the whole blog post in an article-tag. The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.

The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. This tag is also new to HTML 5 and is used to mark up a specific place in time. The contents of the datetime attribute should be:

The year followed by a figure dash (a minus sign to you non-typography nerds)

The month followed by a figure dash

The date

A capital T to denote that we are going to specify the local time

The local time in the format hh:mm:ss

The time zone relative to GMT. I'm in Denmark which is 1 hour after GMT, so I write +01. If you were in Colorado you would be 7 hours behind GMT, and you would write -07.

Marking up the Comments

Marking up the comments is pretty straight-forward. No new tags or attributes are used.

view plain copy to clipboard print ?

<section id="comments">
<header>
<h3>Comments</h3>
</header>
<article>
<header>
<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</article>
<article>
<header>
<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</article>
</section>

<section id="comments">
 <header>
  <h3>Comments</h3>
 </header>
 <article>
  <header>
   <a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
 </article>
 <article>
  <header>
   <a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
 </article>
</section>

Marking up the Comment Form

Several enhancements to forms have been introduced in HTML 5. You longer have to do client-side validation of required fields, emails, etc. The browser takes care of this for you.

view plain copy to clipboard print ?

<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>

<form action="#" method="post">
 <h3>Post a comment</h3>
 <p>
  <label for="name">Name</label>
  <input name="name" id="name" type="text" required />
 </p>
 <p>
  <label for="email">E-mail</label>
  <input name="email" id="email" type="email" required />
 </p>
 <p>
  <label for="website">Website</label>
  <input name="website" id="website" type="url" />
 </p>
 <p>
  <label for="comment">Comment</label>
  <textarea name="comment" id="comment" required></textarea>
 </p>
 <p><input type="submit" value="Post comment" /></p>
</form>

There are new two new types of inputs, email and url. Email specifies that the user should enter a valid E-mail, and url that the user should enter a valid website address. If you write required as an attribute, the user cannot submit an empty field. "Required" is a boolean attribute, new to HTML 5. It just means that the attribute is to be declared without a value.

Marking up the Sidebar and Footer

The markup of the sidebar and footer is extremely simple. A few sections with some content inside the appropriate aside- and footer-tags.

You can view the final, unstyled markup here. Now for the styling.

Styling with CSS 3

CSS 3 builds upon the principles about styles, selectors and the cascade that we know so well from earlier versions of CSS. It adds loads of new features, including new selectors, pseudo-classes and properties. Using these new features it becomes a lot easier to set up your layout. Let's dive in.

Basic Setup

To start off with we are going to define some basic rules concerning typography, background color of the page, etc. You'll recognize all of this from CSS 2.1

view plain copy to clipboard print ?

/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
display: block;
}
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}
h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}
p {
padding-bottom: 22px;
}

/* Makeshift CSS Reset */
{
 margin: 0;
 padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
 display: block;
}

body {
 margin: 0 auto;
 width: 940px;
 font: 13px/22px Helvetica, Arial, sans-serif;
 background: #f0f0f0;
}

h2 {
 font-size: 28px;
 line-height: 44px;
 padding: 22px 0;
}

h3 {
 font-size: 18px;
 line-height: 22px;
 padding: 11px 0;
}

p {
 padding-bottom: 22px;
}

First we reset margin- and padding-styles with a simple rule. In a production environment I would use a more complete CSS Reset such as Eric Meyer's (for CSS 2.1) but for the scope of the tutorial this will do.

We then tell the browser to render all the new HTML 5 elements as block. The browsers are fine with elements they don't recognize (this is why HTML 5 is somewhat backwards compatible), but they don't know how those elements should be rendered by default. We have to tell them this until the standard is implemented across the board.

Also note how I've chosen to size the fonts in pixels instead of ems or %. This is to maintain the progressive nature of the tutorial. When the major browsers one day are completely finished implementing HTML 5 and CSS 3 we will all have access to page zooming instead of just text resizing. This eliminates the need to define sizes in relative units, as the browser will scale the page anyway.

See what the page looks like with the basic styling applied. Now we can move on to styling the rest of the page. No additional styles are required for the header, so we'll go straight to the navigation.

Styling the Navigation

It is important to note that the width of the body has been defined as 940px and that it has been centered. Our navigation bar needs to span the whole width of the window, so we'll have to apply some additional styles:

view plain copy to clipboard print ?

nav {
position: absolute;
left: 0;
width: 100%;
background: url("nav_background");
}

nav {
 position: absolute;
 left: 0;
 width: 100%;
 background: url("nav_background");
}

We position the nav-element absolutely, align it to the left of the window and make it span the whole width. We'll center the nested list to display it within the boundaries of the layout:

view plain copy to clipboard print ?

nav ul {
margin: 0 auto;
width: 940px;
list-style: none;
}

nav ul {
 margin: 0 auto;
 width: 940px;
 list-style: none;
}

Now we'll define some additional styles to make the navigation items look prettier and align them to the grid the layout is based on. I've also included a style for highlighting the page the user is on, and some custom styling for the subscription-link.

view plain copy to clipboard print ?

nav ul li {
float: left;
}
nav ul li a {
display: block;
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}
nav ul li a:hover {
color: #fff;
}
nav ul li.selected a {
color: #fff;
}
nav ul li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url("rss.png") left center no-repeat;
}

nav ul li {
 float: left;
}

 nav ul li a {
  display: block;
  margin-right: 20px;
  width: 140px;
  font-size: 14px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  color: #777;
 }

  nav ul li a:hover {
   color: #fff;
  }

  nav ul li.selected a {
   color: #fff;
  }

  nav ul li.subscribe a {
   margin-left: 22px;
   padding-left: 33px;
   text-align: left;
   background: url("rss.png") left center no-repeat;
  }

Styling the Introduction

The markup for the introduction is pretty simple: A section with a heading and a paragraph of text. However, we'll use some new CSS 3 tricks to make it look more appealing.

view plain copy to clipboard print ?

#intro {
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
background-size: 100%;
border-radius: 22px;
}

#intro {
 margin-top: 66px;
 padding: 44px;
 background: #467612 url("intro_background.png") repeat-x;
 background-size: 100%;
 border-radius: 22px;
}

We are using two new properties. The first one is background-size, which allows you to scale the background-image. In our case, we scale it to 100% on both axes. If the box expands as we add more content to it, the gradient background will scale as well. This is something that was not possible in CSS 2.1 without non-semantic markup and miscellaneous browser issues.

The second new property is border-radius, which applies rounded corners to the element. The radius of our rounded corners are 22px in every corner. You could specify different values for each corner or choose to only round individual corners.

Unfortunately, neither of the properties are fully implemented into the major browsers. However, we can get some support by using vendor-specific attributes. Background-size is supported by newer versions of Safari, Opera and Konqueror. Border-radius is supported by newer versions of Safari and Firefox.

view plain copy to clipboard print ?

#intro {
...
/* Background-size not implemented yet */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;
/* Border-radius not implemented yet */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
}

#intro {
 ...
 /* Background-size not implemented yet */
 -webkit-background-size: 100%;
 -o-background-size: 100%;
 -khtml-background-size: 100%;

 /* Border-radius not implemented yet */
  -moz-border-radius: 22px;
 -webkit-border-radius: 22px;
}

Since we have a background-color defined, there will be no major problems in browsers that don't support background-size, such as Firefox. Now we just need to style the heading and the text.

view plain copy to clipboard print ?

#intro h2, #intro p¬†{
width: 336px;
}
#intro h2 {
padding: 0 0 22px 0;
font-weight: normal
color: #fff;
}
#intro p {
padding: 0;
color: #d9f499;
}

#intro h2, #intro p¬†{
 width: 336px;
}

#intro h2 {
 padding: 0 0 22px 0;
 font-weight: normal
 color: #fff;
}

#intro p {
 padding: 0;
 color: #d9f499;
}

The flower image can be added easily by giving #intro a second background image, something that CSS 3 supports.

view plain copy to clipboard print ?

#intro {
...
background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
url("intro_flower.png") top rightright (653px 100%) no-repeat;
...
}

#intro {
 ...
 background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
   url("intro_flower.png") top right (653px 100%) no-repeat;
 ...
}

We give the two background images explicit dimensions to ensure that they don't overlap, and we're set. Note the shorthand notation of background-size.

Unfortunately, no browser reliably supports this yet, so we'll have to do it the old-fashioned way: by including an inline image and positioning it using CSS. See the final example to see how it was done.

Styling the Content Area and Sidebar

The content area and sidebar are going to be aligned beside each other. Traditionally you would do this by using floats, but in CSS 3 we are going to use tables!

"What?! Tables?" you might ask and look confused. You probably learned years ago that using tables for web layout is a big no-no, and it still is. You should never use the table-element to mark up a layout. However, in CSS 3 we can make elements behave like tables without it ever showing in the markup! To start off with, we're going to need some divs to group the sections in a little more logical manner.

view plain copy to clipboard print ?

<div id="content">
<div id="mainContent">
<section>
</section>
<section id="comments">
</section>
<form>
</form>
</div>
<aside>
</aside>
</div>

<div id="content">
 <div id="mainContent">
  <section>
   <!-- Blog post -->
  </section>
  <section id="comments">
   <!-- Comments -->
  </section>
  <form>
   <!-- Comment form -->
  </form>
 </div>
 <aside>
  <!-- Sidebar -->
 </aside>
</div>

Everything still makes sense semantically, but now we can style it. We want the #content div to behave like a table, with #mainContent and aside as table-cells. With CSS 3, this is very easy:

view plain copy to clipboard print ?

#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}

#content {
 display: table;
}

 #mainContent {
  display: table-cell;
  width: 620px;
  padding-right: 22px;
 }

 aside {
  display: table-cell;
  width: 300px;
 }

That's all! No more floating, faux column background images, clearing or collapsing margins. We've made the elements behave like a table, and this makes it much easier for us to do layout.

Styling the Blog Post

The styling of the post header is rather trivial so I'll skip to the fun part: the multi-column layout.

Multiple columns

Multiple columns of text was previously impossible without manually splitting the text, but with CSS 3 it's a piece of cake, although we have to add a div around the multiple paragraphs for this to work with current browsers.

view plain copy to clipboard print ?

<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Pellentesque ut sapien arcu...</p>
<p>Vivamus vitae nulla dolor...</p>
...
</div>

<div>
 <p>Lorem ipsum dolor sit amet...</p>
 <p>Pellentesque ut sapien arcu...</p>
 <p>Vivamus vitae nulla dolor...</p>
 ...
</div>

Now we can add two simple properties and call it a day.

view plain copy to clipboard print ?

.blogPost div {
column-count: 2;
column-gap: 22px;
}

.blogPost div {
 column-count: 2;
 column-gap: 22px;
}

We want 2 columns and a gap of 22px between the columns. The additional div is needed because there is currently no supported way of making an element span more than one column. In the future, however, you'll be able to specify the column-span property, and we could just write:

view plain copy to clipboard print ?

.blogPost {
column-count: 2;
column-gap: 22px;
}
.blogPost header {
column-span: all;
}

.blogPost {
 column-count: 2;
 column-gap: 22px;
}

 .blogPost header {
  column-span: all;
 }

Of course the column-count and column-gap properties are only supported by some browsers, Safari and Firefox. We have to use the vendor-specific properties for now.

view plain copy to clipboard print ?

.blogPost div {
/* Column-count not implemented yet */
-moz-column-count: 2;
-webkit-column-count: 2;
/* Column-gap not implemented yet */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}

.blogPost div {
 /* Column-count not implemented yet */
 -moz-column-count: 2;
 -webkit-column-count: 2;

 /* Column-gap not implemented yet */
 -moz-column-gap: 22px;
 -webkit-column-gap: 22px;
}

Box shadow

If you look closely at the image in the blog post you'll see a drop-shadow. We are able to generate this using CSS 3 and the box-shadow property.

view plain copy to clipboard print ?

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

.blogPost img {
 margin: 22px 0;
 box-shadow: 3px 3px 7px #777;
}

The first "3px" tells the browser where we want the shadow to stop horizontally. The second "3px" tells it where we want the shadow to stop vertically. The last "7px" is how blurred the border should be. If you set it to 0 it will be completely solid. Last but not least we define the base color of the shadow. This color is of course faded, depending on how much you blur the shadow.

It probably comes as no surprise that this property is not implemented in all browsers yet. In fact, it only works in Safari, and you have to use the vendor-specific property.

view plain copy to clipboard print ?

.blogPost img {
margin: 22px 0;
-webkit-box-shadow: 3px 3px 7px #777;
}

.blogPost img {
 margin: 22px 0;
 -webkit-box-shadow: 3px 3px 7px #777;
}

Zebra-striping the Comments

Zebra-striping, or highlighting every second element in a series, has traditionally involved selecting all the elements via javascript, then looping through them and highlighting all the odd elements. CSS 3 introduces the pseudo-class "nth-child", which makes it ridiculously simple to do this without javascript. We'll use it to zebra-stripe the comments.

view plain copy to clipboard print ?

section#comments article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}

section#comments article:nth-child(2n+1) {
 padding: 21px;
 background: #E3E3E3;
 border: 1px solid #d7d7d7;

 /* Border-radius not implemented yet */
 -moz-border-radius: 11px;
 -webkit-border-radius: 11px;
}

The weird value "2n+1" is actually pretty simple if you understand what it stands for:

2n selects every second item. If you wrote 3n it would select every third item, 4n every fourth item, and so on.

The +1 tells the browser to start at element 1. If you are familiar with programming you probably know that all arrays start at 0, and this is also true here. This means that element 1 is actually the second element in the series.

Alternatively, you could simply write:

view plain copy to clipboard print ?

section#comments article:nth-child(odd) { ... }

section#comments article:nth-child(odd) { ... }

Since the standard includes the two most used values as shorthand, odd and even. The rest of the comment styling should be simple to understand with your new knowledge.

Styling the Comment Form, Footer and Sidebar

A couple of CSS 3 techniques are reused in the styling of the comment form, footer and sidebar. In the comment form and the footer I've used the same type of table layout technique used in the main layout. In the sidebar border-radius is used to add rounded corners to the different sections.

The Final Design

See the final design with all styling applied.

Compatibility

The page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only rendering engine that supports all of the CSS 3 techniques we have used. Firefox 3 has some problems applying rounded corners to our flower image and it doesn't support background-size, but besides that the layout works. I've chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work. You could also define some more rules and get everything working across major browsers, but all of this is outside the scope of the tutorial.

Conclusion

When HTML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to build websites. We'll finally be able to stop using floats for layout (which they were never meant to be used for), and we will spend considerably less time writing javascript to scale our background images or zebra-stripe our tables. Hopefully we will use all this extra time to study some long-neglected areas of web design, like front end optimization and proper information architecture.

40 Creative Design Layouts: Getting Out Of The Box

2009-08-20T08:12:00.000-07:00

20 × Getting Creative With CSS

Pavel Buben
Pavel Buben uses a magazine cover-style layout for his one-page-site. Unfortunately, there are no internal pages — it would be interesting to seek how they would be designed. An interesting and unusual approach.

AIGA Los Angeles
AIGA Los Angeles uses boxes in a creative way. All design elements are placed according to the underlying grid, however they clearly break out of the boxes. This approach creates tension within the design and looks truly distinctive.

SpaceCollective
For its gallery section SpaceCollective uses a five-column grid. Text and images are perfectly placed on the grid giving the layout a complete form and a sense of order. Notice various font sizes and text styling in the design — they introduce a profound visual hierarchy into the layout that works perfectly within the complex, unpredictable layout.

Jason Santa Maria
Jason Santa Maria has taken a truly different route with his site layout. Each article is laid out differently, with strong focus on typography and visual clarity. Below three of the layouts are presented. You may have a hard time finding similar layouts on the Web.

Checkout: Point of Sale for Mac (POS)
At the first glance, Checkout looks like an ordinary Apple grid-layout. What makes the layout interesting is not only the position of its visual elements, but the fact that each section of the page has its individual (although consistent) design. Still, the layout is very scannable and intuitive.

NOFRKS.design
NOFRKS uses JavaScript to slide between various parts of the site. What we found more interesting was the way the content is presented. Most elements are placed within a context, giving the content a secondary meaning.

SMS Parking
At the first glance SMSParking has no layout at all. The design appears to be one single illustration — all elements fit perfectly with each other, creating visual harmony and a sense of balance and closure.

Tri-Win
Sometimes a background image is enough to make the layout stand out. Although one can recognize a conventional layout structure here, the design looks distinctive and memorable. The background image of the site perfectly fits the company, which offers mailing services.

Matriz Communicacao
This Brazilian company delivers a perfect example of how design and content can seamlessly be integrated within a complete yet simple layout.

Mihmorandum
Mihmorandum uses a common 3-column-layout in an unusual way. Although the structure is quite usual, the design itself looks distinctive and resembles a pile of paper put inside a folder.

3rdM
3rdM uses icons to indicate various navigation options. This is not a type of layout you will find in many other web designs. And that’s what makes the layout creative.

Nile Inside
Many portfolios use vertical layout to showcase their works. Nile.ru displays its works in a chronological order as if it was a horizontal blog.

Rockatee
Rockatee uses asymmetry to position content blocks in an unusual yet appealing style. Notice that the left block perfectly aligns with the navigation option “Home” at the top of the page. The screenshot in the middle of the page spans exactly two navigation options and has the same width as the description block on the right side of the page.

The distortion in the layout is caused by the underlying organic texture. Although the design is perfectly aligned according to the grid, it seems to be chaotic at first glance. The tension between order and chaos creates tension in the layout and looks very appealing.

Get London Reading
An effective background image can help a layout stand out. The effect achieved here fits with the objective of the project — to encourage people to read more.

BL:ND ( blind )
At the first glance, the layout looks underwhelming. What distinguishes it, though, are the choice of images sizes and a good use of white space. Notice how well negative space is used in the sidebar, where individual elements are clearly separated and properly aligned. The width of the images equals the width of the content blocks. Yes, the layout is boxy, but the wise use of whitespace makes it far from boring.

The portfolio of Hannibal
Usually, navigation menus are placed in the sidebar or at the top of the site. William F. Leffert does it differently. His non-linear layout literally breaks out of the boxy structure and offers something quite different. Sometimes it’s enough to simply experiment with the position of design elements to achieve striking design solutions.

URLshrinker
Creative design solutions can be as simple as this one. An elegant and attractive layout by URLshrinker.

15 × Getting Creative With CSS+JavaScript

ShopComposition
ShopComposition offers a sliding navigation at the top of the site. Users can choose the content they would like to read and select the width of the content blocks. This store has an integrated blog and some further projects (such as picture-a-day) to attract customer’s attention. JavaScript in use.

forgetfoo
Forgetfoo uses an almost minimalistic, simple layout with a sidebar and a content area. Designers removed all necessary and unnecessary details focusing only on last blog entries. The design doesn’t contain any category navigation options. That’s unusual, but may be a little bit too much of the minimalism. Navigation through blog posts is realized with Javascript.

Include
On Include one content block and the corresponding navigation block seem to “hang in the air”. Essentially the page has two columns; however. the layout seems to be quite original — maybe because of the cows placed on the background for some reason. The navigation on the right-hand side is realized with Javascript.

Kobe
The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

tap tap tap
tap tap tap uses a bold and eye-catching layout to deliver the message to its visitors. The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.

youlove.us
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.

Method: A Brand Experience Agency
This design agency uses a flexible JavaScript-based layout which updates its size depending on the browser window size. The content is “packed” in boxes is usual for such a grid-based design; however, the alignment of the boxes makes the design literally stand out.

Viget Labs
Viget Labs also uses a sliding navigation and a horizontal scroll-effect to make the user interaction more dynamic and hence more appealing. However, more importantly, the layout itself stands out: the layout is invisible and resembles interactive Flash-interfaces. CSS+JavaScript in use. Smashing says: five out of five stars.

Lucuma
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.

Axel Peemoeller Design
On this page all design elements are draggable and some of them are clickable. Images seems to be thrown on you in the first moment, but in the end they all make sense. This is an unusual portfolio which is memorable and interesting to explore.

IDEO
IDEO presents everything on its main page. The navigation options are placed in the black boxes and somehow arranged among other content boxes. Once one of the black boxes is hovered, related content blocks are highlighted. That’s not something most users would expect from a layout.

Bohdan Levishchenko
Bohdan Levishchenko uses the same approach as IDEO, but presents all navigation option at the top of the page. Single works are presented as images under the navigation and spread throughout the layout.

MelissaHie.com
Melissa Hie places all deign elements on a single large page. Visitors are basically driven from one site are to another using a scroll-effect.

Hotel Oxford - Timisoara
A single-page-site with a very calm and comforting layout. All navigation options are available at the first glance. Once some of the options is clicked, the content block on the left is dynamically replaced. The logo of the Hotel Oxford always remains on its place.

thruSITES / Portfolio
In this portfolio the illustrations of a designer’s works seem to somehow be loosely placed on an invisible rope. When one of the illustration is clicked, all other elements arrange themselves in such a way that the content which this illustration represents becomes dominant.

Erwin Bauer KEG
The portfolio site of Erwin Bauer takes a different approach to using a pannable user interface, but implementing in JavaScript rather than in Flash. The site allows users to click and drag to pan the canvas, or to use links positioned around the content to move around. The design is clean, and mimics a design document with regisration and crop marks, and visual cues about the directions the canvas will pan to when you navigate. [via]

5 × Getting Creative With Flash

The Secret Location
The Secret Location, a media agency based in Toronto, Canada exemplifies their work, by providing an immersive flash experience around a conjured up story leading a character to follow a mysterious path that leads to the secret location. Very interactive approach, a very unusual site layout. [via]

Kamil Gottwald
In his layout Kamil Gottwald enables users to define the width of site columns manually. To navigate vertically users need to scroll horizontally. Hence no vertical scrollbar is necessary. Multiple site views are possible.

Grooveshark Lite
Grooveshark seems to imitate an iPod-interface and does it indeed very well. Although it may be not very creative, such layouts are hard to find on the Web.

Jeremy Levine Design
Flash offers many creative possibilities for an interactive navigation design. Jeremy Levine uses dynamic paper strips which seem to hang in the air.

SeymourPowell
SeymourPowell has come up with an interesting idea to provide its visitors with some intuition of how good its work is. Click on the pile to find out.

Muku Studios
“Let Muku Do You”: this friendly buddy just wants to remain visible and hence he tries to find some place on the screen to keep an eye on site’s visitors. The layout of the site is simple yet memorable — well, Muku makes sure he’ll be remembered after the browser window is closed.

40+ Excellent jQuery Tutorials

2009-08-20T08:09:00.000-07:00

Most of you already aware that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. it’s also known for fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Or in developer’s words “write less, Do more”.

Now days jQuery is on top of its charm and everyone from Javascript world love to experiment with it. Because of the remarkable significance of JQuery in Designing field, it is an essential to keep yourself up-to-date with its Quality uses and Examples.

In this article, we’ll take a look at Various jQuery Tutorials for your source of inspiration.

For those, who don’t know what is jQuery? and what it can do? the please follow the link below for brief introduction.

jQuery: The Write Less, Do More, JavaScript Library | jquery.com

jQuery | From Wikipedia, the free encyclopedia

You may be interested in the following related articles as well.

30 Excellent CSS Based Navigation and Buttons Tutorial

65+ Smoking Photoshop Text Effect Tutorials

26 Essential Firefox Add-ons for Web Designers

All New PHP, CSS & HTML Help Sheets

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to Inspiration that our readers may like.

Excellent jQuery Tutorials

01. jQuery for Absolute Beginners: The Complete Series

Amazing JQuery Tricks , enjoy :)

How to: CSS Large Background

Common Mistake: Background Gets Cropped (see demo)

Example #1: Single Image (see demo)

CSS Part

Example #2: Double Images (see demo)

Example #3: Sky Background (see demo)

Update: Sky Background Using HTML Selector (see demo)

Building Custom WordPress Theme

1. The Blog Frontend

2. Photoshop Mockups

3. HTML + CSS

Why Create a Static HTML File First?

4. How WordPress Theme Works

5. Duplicate The Template Files

6. Style.css

7. Splitting The Files

8. Header.php

Navigation Menu (wp_list_pages)

9. Sidebar.php

10. Footer.php

Recent Posts

Recent Comments

11. Index.php

12. Understanding The Loop

13. Copy The Loop

14. Preview The Theme

15. Single.php

16. Page.php

17. Delete The HTML Files

18. WordPress Page Template

More Reading:

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

What We Are Going to Build

HTML 5

Basic Structure

Marking Up the Navigation

Marking Up the Introduction

Marking Up the Main Content Area

Marking up the Blog Post

Marking up the Comments

Marking up the Comment Form

Marking up the Sidebar and Footer

Styling with CSS 3

Basic Setup

Styling the Navigation

Styling the Introduction

Styling the Content Area and Sidebar

Styling the Blog Post

Multiple columns

Box shadow

Zebra-striping the Comments

Styling the Comment Form, Footer and Sidebar

The Final Design

Compatibility

Conclusion

40 Creative Design Layouts: Getting Out Of The Box

20 × Getting Creative With CSS

15 × Getting Creative With CSS+JavaScript

5 × Getting Creative With Flash

40+ Excellent jQuery Tutorials

Excellent jQuery Tutorials

01. jQuery for Absolute Beginners: The Complete Series

02. jQuery Tutorials for Designers

03. Facebox : Facebook-style lightbox

04. Creating a “Filterable” Portfolio with jQuery

05. Building a jQuery-Powered Tag-Cloud

06. jquery Hover Sub Tag Cloud

07. Exactly How to Create a Custom jQuery Accordion

08. Create a Cool Animated Navigation with CSS and jQuery

09. Learn How to Create a jQuery Plugin

10. Jquery Fade In.Fade Out

11. Fading Menu - Replacing Content

12. Fade-in Spoiler Revealer

13. Creating a Dynamic Poll with jQuery and PHP

14. Creating accessible charts using canvas and jQuery

15. Create a Photo Admin Site Using PHP and jQuery

16. Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site

17. How to Load In and Animate Content with jQuery

18. Create an Amazon Books Widget with jQuery and XML