Archive for the ‘HTML 5’ Category


Notepad++ (Notepad Plus Plus) is one of the most popular text/code editor for Windows users. It’s really fast and reliable, it has many features built-in but lacks others you might expected it to have. Luckily, there is a vivid plugin development community that has created plugins to help us make Notepad++ even more powerful!

Plugins

Nearly all of the plugins mentioned below are available through the Plugin Manager that comes with Notepad++. To install the plugins simple open Notepad++, go to Plugins > Plugin Manager, check as many plugins as you like and click “Install”. Instructions on how to manually install plugins and a full list of available plugins can be found on the official wiki.

NppFTP

A full-featured FTP Client within Notepad++ with the ability to save files directly to your server. You can set up multiple profiles for different FTP servers and either open/save files immediately to the server or download a copy and load it in Notepad++. It also has SFTP/FTP(E)S support.

HTML tag

This plug-in provides two core functions to Notepad++:

  • HTML and XML tag matching, like the built-in brace matching. For example you may hit Shift+Ctrl+T on an HTML tag and have the whole block until its closing tag selected.
  • HTML entity encoding/decoding

Compare plugin

A very useful plugin to show the difference between two files side by side.

AutoSave

AutoSave allows to automatically save the currently open files based on a timer schedule (default is 1 min) and/or upon the application losing focus.

JSON Viewer

A simple plugin to view JSON string in a dockable treeview control. Just select the JSON string and open the JSON Viewer plugin.

JSmin

It’s really simple and just run Douglas Crockford’s JSMin algorithm on current Javascript document. Also JSMin can puts minimized js code in a new document. It can also format already minified Javascript code.

JSLint

A Notepad++ plugin that allows users to run JSLint (The Javascript Code Quality Tool) against their open Javascript files.

Zen Coding – Python

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions -similar to CSS selectors- into HTML code.

For example:

div#page>div.logo+ul#navigation>li*5>a

…can be expanded into:

<div id="page">
    <div></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Some help on the available selectors can be found here.

QuickText

(Manual install only. It can’t be installed directly by the Plugin Manager)

Quicktext is a Notepad++ plugin for text substitution with multi field inputs. It allows you to create custom quicktext tags and easily replace them with the corresponding code snippets. It’s similar to Tab Triggers in TextMate, Resharper/CodeRush in Visual Studio. Watch a short video that explains how to use Quicktext.

Light Explorer

A really light explorer plugin that brings up a simple file-manager to the side of the Notepad++ window when pressing Alt+A. There is also a fork of the Light Explorer plugin which allows you to create files and folders.

Hex Editor

Turns Notepad++ into an excellent Hex Editor.


As responsive design rapidly increases in popularity, we felt we would take a look at some of the varied solutions and techniques that are being adopted for managing the navigation/menu on smaller screened devices.

Planning and building your menu for mobiles will perhaps be the trickiest aspect of your responsive layout, not just with the coding but also having to decide what will stay and what will have to go to fit everything into the smaller screen. It is a juggling act between both readability and the desire to show as much on the screen as possible.

Hopefully the solutions we have for you below will help get you on your way.

http://webdesignerwall.com/tutorials/css-responsive-navigation-menu

Menu I used:-http://www.meanthemes.com/plugins/meanmenu/

 

Progressive And Responsive Navigation (Tutorial)

Progressive And Responsive Navigation

This tutorial, from Smashing Magazine, takes you through the steps for coding your navigation using a little forethought and considering the principles of progressive enhancement from the beginning and applying some responsive practices at the end, allowing your navigation to easily accommodate less-capable browsers and modern browsers in both desktop and mobile environments.

Progressive And Responsive Navigation →Demo →

Responsive Navigation Menu (Tutorial)

Responsive Navigation Menu

With this tutorial you will learn how to code a simple and effective responsive navigation menu, with a grid layout, that you will be able to easily modify and reuse in your own projects.

Responsive Navigation Menu →Demo →

TinyNav.js (jQuery Plugin)

TinyNav.js

TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screens. It also automatically selects the current page and adds selected="selected" for that item.

TinyNav.js →Demo →

Responsive Drop Down Navigation Menu (Tutorial)

Responsive Drop Down Navigation Menu

The code for this menu is based on the famous Suckerfish Dropdown menu, restyled to make it responsive. It will work great in all modern desktop browsers without Javascript.

Responsive Drop Down Navigation Menu →Demo →

HorizontalNav (jQuery Plugin)

HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. It comes with an option to make it responsive, allowing the navigation to auto-adjust when the window is resized.

HorizontalNav →

Responsive, Mobile-First Navigation Menu (Tutorial)

Responsive, Mobile-First Navigation Menu

This tutorial demonstrates how to develop a complex responsive navigation menu using the “Mobile-First Approach”. The aim is to present mobile users with a pseudo-native, touch-conducive and interactive interface that enables them to navigate the website with ease.

Responsive, Mobile-First Navigation Menu →Demo →

SelectNav.js (Javascript Plugin)

SelectNav.js

SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a <select> drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

SelectNav.js →Demo →

Convert a Menu to a Dropdown for Small Screens (Tutorial)

Convert a Menu to a Dropdown for Small Screens

Convert a Menu to a Dropdown for Small Screens →Demo →

Simple Responsive Menu

Simple Responsive Menu

This tutorial takes a typical desktop menu and shows you how to, using Modernizr, jQuery and media queries, convert it to a small menu button for smaller screens that only appears when pressed, and pressing it again will retract it.

Simple Responsive Menu →

Mobile Menu (jQuery Plugin)

Mobile Menu

Mobile Menu is a jQuery plugin that turns your site’s navigation into a dropdown (<select>) when your browser is at mobile widths. It comes with a handful of options, including the really useful “combine”, that allows you to convert multiple navigation lists into a single dropdown.

Mobile Menu →

Courtesy:-http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/


CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

EXAMPLE

http://rafael.adm.br/css_browser_selector/

The color of this box will change on different os/browsers:

  • Internet Explorer – yellow
  • Internet Explorer 7 – orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) – red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) – pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) – gray
  • Opera – green
  • Konqueror – blue
  • Safari – black
  • Chrome – cyan

If the box is white, and you are using one of browsers above, something is wrong :-/
Help us in this case!

Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

Screenshots on Browsercam

Chris Preece contributed with some images

DONATE TO SUPPORT

I need to update this script every time a browser is released with new UserAgent string.

This is a little effort, but certainly with your donation I will do it happier 🙂

Click here to lend your support to: css_browser_selector and make a donation at www.pledgie.com !

DOWNLOAD

http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js

git clone git://github.com/rafaelp/css_browser_selector.git

USAGE

1. Copy and paste the line below, inside <head> and </head> tag

<script src=”css_browser_selector.js” type=”text/javascript”></script>

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win – Microsoft Windows (all versions)
  • vista – Microsoft Windows Vista new
  • linux – Linux (x11 and linux)
  • mac – Mac OS
  • freebsd – FreeBSD
  • ipod – iPod Touch
  • iphone – iPhone
  • ipad – iPad new
  • webtv – WebTV
  • j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • blackberry – BlackBerry new
  • android – Google Android new
  • mobile – All mobile devices new

Available Browser Codes [browser]:

  • ie – Internet Explorer (All versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (all versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • ff3_5 – Firefox 3.5
  • ff3_6 – Firefox 3.6 new
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • opera10 – Opera 10.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 – Safari 3.x
  • chrome – Google Chrome
  • iron – SRWare Iron

Extra Codes:

  • js – Will be available when js is enable, so you can show/hide some stuffs

INSPIRATION

Original idea by 37signals.

http://37signals.com/svn/archives2/browser_selectors_in_css.php
Courtesy:-http://rafael.adm.br/css_browser_selector/

Custom Google Search

Posted: January 8, 2013 in HTML 5, Must Watch
Tags: ,

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results  to options for On-Demand Indexing. GCS is a boon for all Blog and Website Owners.But the one thing that doesn’t fit in place is its exceedingly over simple Search Form ,that again with Google Watermark. In this post I will be telling you how to change the Look of your GC Search Box with a CSS3 search Box.

I am assuming that you have already setup your Google Search Custom search engine if you haven’t then check this tutorial. There are many variations GCS but normally the code contains a <script> tag , and it looks something like this:

01 <div id="cse" style="width: 100%;">Loading</div>
02 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
03 <script type="text/javascript">
04   google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
05   google.setOnLoadCallback(function() {
06     var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
07     customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
08     customSearchControl.draw('cse');
09   }, true);
10 </script>

Here you can’t really see where to apply the styling. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize :

1 <form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown">
2   <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
3   <input value="FORID:11" name="cof" type="hidden"/>
4   <input id="q" style="width:150px;" name="q" size="70" type="text" />
5   <input value="Search" name="sa" type="submit"/>
6 </form>

In the id “searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your “Search engine unique ID” which you can find on the Control panel of your search engine.

If you are using the Adsense linked GCS then your search Box should look something like this:

01 <form action="URL of the page where the Result open id="cse-search-box">
02   <div>
03     <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />
04     <input type="hidden" name="cof" value="FORID:10" />
05     <input type="hidden" name="ie" value="ISO-8859-1" />
06     <input type="text" name="q" size="21"  />
07     <input type="submit" name="sa" value="Search"  />
08   </div>
09 </form>
10 <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

(If you want to remove the default styling then exclude the script tag above and also remove id=”cse-search-box” from the 1st Line)

 

Courtesy:-Prayag Verma http://www.stylifyyourblog.com/2011/07/customize-google-custom-search-box.html

Coding An HTML 5 Layout From Scratch

Posted: February 11, 2012 in HTML 5

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:

  • Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
  • Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
  • Use HTML5 alongside a rising technology: Microformats.
  • Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

It’d be a good idea to have a read at some of these articles first:

I’ll also assume you know the basics of HTML and CSS. Including all the “old school” tags and the basic selectors and properties.

[Editor’s note: Have you already got your copy of our Printed Smashing Book #2? The book covers best practices and techniques for professional Web designers and developers.]

Before we begin…

There’s a couple of things you have to bear in mind before adventuring on the new markup boat. HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavours you’ve got available as tools: use the right one for the right job. Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.

There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it does not understand it as of yet. This may also apply to other software such as screenreaders and search engines.

Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done. With the immense amount of feedback and all the hype around it, the current draft is bound to change and it’s impossible to predict how much.

So if you’re ready to do the switch, are not afraid of using technology that in the near future will be way more meaningful and can easily change whatever piece of code that might get broken, then keep reading.

A word on Progressive Enhancement and Graceful Degradation

So what are these two terms all about? Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice.

Both technologies usually go hand in hand and have been part of the ways we do things for years. It’s just the terms that are not that well-known. And now, both of these practices need to evolve due to the new languages that are approaching. If you want to go deeper into both of these terms, check a related article on accessites.org.

1. The Design

This will be the sample layout we’ll be coding:

Smashing HTML5! template

A very basic layout brilliantly named Smashing HTML5! which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

2. The markup

As a very basic start to our markup, this is our html file skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

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

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index">
</body>
</html>

A few highlights:

  • 3 different Conditional comments for IE. First one includes html5 shiv code directly from Google Code for all versions of IE. The second one includes IE8.js for better backwards compatibility for IE7 and below as well as an ie.css file which will sove IE7 and below CSS bugs. Third one is just a CSS file to fix IE6 bugs.
  • The use of an “index” id and a “home” class on the <body> tag. This is just a habit I’ve developed over the past year that has simplified the coding of inner-sections of overly complicated websites.
  • A simplified version of the charset property for better backwards compatibility with legacy browsers.
  • I’m using XHTML 1.0 syntax on a HTML5 document. That’s the way I roll. It’s a habit that I really like and since I can still use it, I will. You can, however, use normal HTML syntax here. That is, uppercase attribute and tag names, unclosed tags and no quotes for wrapping attributes’ values. It’s up to you.

This is a very basic and solid startup for all and any HTML5 projects you might do in the future. With this, we can start assigning tags to the different sections of our layout.

If we had an x-ray machine designed for websites, this would be our page’s skeleton:

Smashing HTML5! template x-rayed

The header

Smashing HTML5! Header block

The layout header is as simple as it gets. The new <header> tag spec reads as follows:

The header element represents a group of introductory or navigational aids.

Thus it is more than logic that we use this to markup our header. We’ll also use the <nav> tag. The spec reads:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.

There’s a lot of buzz regarding the spec of the nav element since “major navigation blocks” is not a very helpful description. But this time we’re talking about our main website navigation; it can’t get any major than that. So after a couple of id’s and classes our header ends up like this:

<header id="banner">
	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>

	<nav><ul>
		<li><a href="#">home</a></li>
		<li><a href="#">portfolio</a></li>

		<li><a href="#">blog</a></li>
		<li><a href="#">contact</a></li>
	</ul></nav>

</header><!-- /#banner -->

Featured block

Smashing HTML5! Featured block

Next is the featured block. This is best marked up as an <aside> since it’s spec says:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

That pretty much sums up our featured block, so let’s go for it. Now, inside of this block there’s a lot going on. Firstly, this is an article, so alongside the <aside> tag, we should be using <article> right away.

We also have two consecutive headings (‘Featured Article’ and ‘HTML5 in Smashing Magazine!’) so we’ll be using yet another new element: <hgroup>. This is a wonderful tag used for grouping series of <h#> tags which is exactly what we have here. It exist to mask an h2 element (that acts as a secondary title) from the outline algorithm, which will save developers some headaches in the future.

The last element on this block is the Smashing Magazine logo to the right. We have yet another new tag for this element: <figure>. This tag is used to enclose some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document. This tag allows us to use a <legend> tag to add a caption to the elements inside. Sadly, this last feature is broken on some browsers as they try to add a <fieldset> around and it is impossible to override it with simple CSS rules. Therefore, I’d suggest leaving it aside and just use <figure> for the time being.

Featured block code will look like this in the end:

<aside id="featured"><article>
	<figure>
		<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
	</figure>
	<hgroup>

		<h2>Featured Article</h2>
		<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
	</hgroup>
	<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>

</article></aside><!-- /#featured -->

The layout’s body

Smashing HTML5! Body block

Next is our document’s body, where all the content will be. Since this block represents a generic document section and a section is a thematic grouping of content, this one is without a doubt a <section> tag.

For the posts, we’ll use the old <ol> tag since, well, it’s an ordered list of articles. Each <li> should have an <article> tag and within this, we’ll have a <header> for the post title, a <footer> for the post information and a <div> for the post content. Yes, a <div>.

The reason for using a div is simple: we’ll be using the hAtom 0.1 Microformat and it requires the content entry to be wrapped by an element. Since no other tag applies to this (it is not a section, it is not a full article, it is not a footer, etc.) we’ll use a <div> since it provides no semantic value by itself and keeps the markup as clean as possible.

With all these tags, and the hAtom microformat in place, the code shall look like this:

<section id="content">

	<ol id="posts-list">

		<li><article>
			<header>
				<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
			</header>

			<footer>
				<abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
					10th October 2005
				</abbr>

				<address>
					By <a href="#">Enrique Ramírez</a>

				</address>
			</footer><!-- /.post-info -->

			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>

			</div><!-- /.entry-content -->
		</article></li>

		<li><article>
			...
		</article></li>

		<li><article>
			...
		</article></li>
	</ol><!-- /#posts-list -->

</section><!-- /#content -->

For the mighty ones: yes, I did not use the <time> element. This tag is rather new, and it is not compatible with the current microformat implementations out there. Since I’m indeed using hAtom it made little point to have both an invalid microformat and a yet-incomprehensible tag. If you’re not using a microformat, I’d suggest using <time> instead.

The extras block

Smashing HTML5! Extras block

The extras block is yet another section of our document. You might struggle for a while deciding whether an <aside> or a <section> tag would be best for this section. In the end, this section could not be considered separate from the main content since it contains the blogroll links and some social information of the website. Thus, a <section> element is more appropriate.

Here we’ll also find another use for the <div> tag. For styling needs and grouping’s sake, we may add two divs here: one for the blogroll section and one for the social section.

For the rest of the block there’s nothing much to decide. It’s the everyday <ul> accommodated set of links on both sections, which in the end may look like this:

<section id="extras">
	<div>
		<h2>blogroll</h2>
		<ul>

			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>

			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>

			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>

			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>

			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>

			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>

		</ul>
	</div><!-- /.blogroll -->

	<div>
		<h2>social</h2>
		<ul>

			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
			<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
			<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>

			<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
			<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
			<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>

		</ul>
	</div><!-- /.social -->
</section><!-- /#extras -->

The About and footer blocks

Smashing HTML5! About and Footer blocks

The footer has no real difficulty. We’ll use the brand new <footer> tag to wrap both the about and the copyright information since the spec reads:

The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Since the nearer ancestor of our <footer> tag is the <body> tag, is more than right to wrap both elements here since we’re adding information about the website’s owner (and thus, author).

For the about block we’ll use an <address> tag, which contains contact information for it’s nearest <article> or <body> element ancestor. We’ll also use the hCard Microformat to enhance the semantic value. For the copyright information we’ll go with a simple <p> tag so the code ends like this:

<footer id="contentinfo">
	<address id="about">
		<span>
			<strong><a href="#">Smashing Magazine</a></strong>

			<span>Amazing Magazine</span>
		</span><!-- /.primary -->

		<img src="images/avatar.gif" alt="Smashing Magazine Logo" />
		<span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>

	</address><!-- /#about -->
	<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

Summing it all up

So, after all this mess, the complete code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

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

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index">

<header id="banner">
	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>

	<nav><ul>
		<li><a href="#">home</a></li>
		<li><a href="#">portfolio</a></li>

		<li><a href="#">blog</a></li>
		<li><a href="#">contact</a></li>
	</ul></nav>

</header><!-- /#banner -->	

<aside id="featured"><article>
	<figure>
		<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
	</figure>
	<hgroup>

		<h2>Featured Article</h2>
		<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
	</hgroup>
	<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>

</article></aside><!-- /#featured -->

<section id="content">
	<ol id="posts-list">
		<li><article>
			<header>
				<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>

			</header>

			<footer>
				<abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
					10th October 2005
				</abbr>

				<address>

					By <a href="#">Enrique Ramírez</a>
				</address>
			</footer><!-- /.post-info -->

			<div>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
			</div><!-- /.entry-content -->
		</article></li>

		<li><article>
			...
		</article></li>

		<li><article>
			...
		</article></li>

	</ol><!-- /#posts-list -->
</section><!-- /#content -->

<section id="extras">
	<div>
		<h2>blogroll</h2>

		<ul>
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

			<li><a href="#" rel="external">Smashing Magazine</a></li>
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>

			<li><a href="#" rel="external">Wikipedia</a></li>
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

			<li><a href="#" rel="external">Smashing Magazine</a></li>
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>

			<li><a href="#" rel="external">Wikipedia</a></li>
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

			<li><a href="#" rel="external">Smashing Magazine</a></li>
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>

			<li><a href="#" rel="external">Wikipedia</a></li>
		</ul>
	</div><!-- /.blogroll -->

	<div>

		<h2>social</h2>
		<ul>
			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
			<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>

			<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
			<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
			<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>

			<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
		</ul>
	</div><!-- /.social -->
</section><!-- /#extras -->

<footer id="contentinfo">
	<address id="about">
		<span>
			<strong><a href="#">Smashing Magazine</a></strong>

			<span>Amazing Magazine</span>
		</span><!-- /.primary -->

		<img src="images/avatar.gif" alt="Smashing Magazine Logo" />
		<span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>

	</address><!-- /#about -->
	<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

</body>
</html>

Say, isn’t that readable? It’s also way more semantic than a bunch of <div>s all over the place.

3. The CSS

Just like our markup, the CSS will also have a very basic start. Call this a frameworks of sorts which I’ve been using for a long time and works fairly well. Here’s the code for our main.css file:

/*
	Name: Smashing HTML5
	Date: July 2009
	Description: Sample layout for HTML5 and CSS3 goodness.
	Version: 1.0
	Author: Enrique Ramírez
	Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");

/***** Global *****/
/* Body */
	body {
		background: #F5F4EF url('../images/bg.png');
		color: #000305;
		font-size: 87.5%; /* Base font size: 14px */
		font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		line-height: 1.429;
		margin: 0;
		padding: 0;
		text-align: left;
	}

/* Headings */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}	/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #C74350;
	padding: 0 1px;
	text-decoration: underline;
}
a:hover, a:active {
	background-color: #C74350;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

/* Lists */
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}

ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

	/* Thead */
	thead th {padding: .5em .4em; text-align: left;}
	thead td {}

	/* Tbody */
	tbody td {padding: .5em .4em;}
	tbody th {}

	tbody .alt td {}
	tbody .alt th {}

	/* Tfoot */
	tfoot th {}
	tfoot td {}

This is our first step into getting the layout together. We can style most of the basic elements from here, so feel free to do so. Here’s a few highlights:

  • For optimum coding, a few basic information on the .css file is at the top in comments form.
  • 2 imports at the beginning of the file. The first one is Eric Meyer’s CSS reset file. Second one is a personalized global forms file which I’ll discuss more deeply later on.
  • Very basic styling for the default tags.

Explaining some properties

For this very part, there’s little to be mentioned. Firstly there’s the text-shadow CSS3 property. To explain it, here’s a sample:

	text-shadow: 1px 5px 2px #333;

This will give us a #333 shadow on our text that’s 1px to the right, 5px down and with a 2px blur. Simple, right? You can use hex and rgba values plus any CSS unit (except %) here.

We also have this little baby:

	* p:last-child {margin-bottom: 0;}

This line will remove the margin bottom of any <p> tag that’s the last child of it’s parent. Useful when using boxes (like we’re doing) to avoid large vertical gaps.

Lastly, we have a couple of selectors:

	::-moz-selection {background: #F6CF74; color: #fff;}
	::selection {background: #F6CF74; color: #fff;}

::selection is a CSS3 selector that lets us style how the text selection looks. It only allows color and background CSS properties, so keep it simple. ::-moz-selection needs to go here since Mozilla haven’t implemented the ::selection selector.

Enabling HTML5 elements

Now, as I’ve stated before, browsers do not understand HTML5 as of yet. And since HTML5 is still in development, little has been discussed about the default styling the new elements will have. Thus, being tags that do not exist for the browser, it does not display any styling in them.

Perhaps it’s fair to assume that most browsers apply something like display: inline for all unknown tags that they might encounter. This is not what we want for some of them, such as <section>, so we need to tell explicitly to the browser how to display these elements:

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

There! Now we can magically style our tags as if they were <div>s!

Limiting our blocks

Some of you might have noticed how I added the class="body" attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I’ve never been a fan of the big wrapping <div> to do that. So we’ll use the basic block centering technique using margins for this. I’m also adding a couple of generic classes to this section that might be used for a post side content.

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

Header styling

We’ll begin with our header. This one is fairly easy. We just want a couple of spacing and a few text styling here and there. Nothing we haven’t done before.

/*
	Header
*****************/
#banner {
	margin: 0 auto;
	padding: 2.5em 0 0 0;
}

	/* Banner */
	#banner h1 {font-size: 3.571em; line-height: .6;}
	#banner h1 a:link, #banner h1 a:visited {
		color: #000305;
		display: block;
		font-weight: bold;
		margin: 0 0 .6em .2em;
		text-decoration: none;
		width: 427px;
	}
	#banner h1 a:hover, #banner h1 a:active {
		background: none;
		color: #C74350;
		text-shadow: none;
	}

	#banner h1 strong {font-size: 0.36em; font-weight: normal;}

We now pass on to the navigation. Pretty much the same as before, nothing really new here. The regular horizontal list, a couple of colour edits. Nothing fancy.

	/* Main Nav */
	#banner nav {
		background: #000305;
		font-size: 1.143em;
		height: 40px;
		line-height: 30px;
		margin: 0 auto 2em auto;
		padding: 0;
		text-align: center;
		width: 800px;

		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
	#banner nav li {float: left; display: inline; margin: 0;}

	#banner nav a:link, #banner nav a:visited {
		color: #fff;
		display: inline-block;
		height: 30px;
		padding: 5px 1.5em;
		text-decoration: none;
	}
	#banner nav a:hover, #banner nav a:active,
	#banner nav .active a:link, #banner nav .active a:visited {
		background: #C74451;
		color: #fff;
		text-shadow: none !important;
	}

	#banner nav li:first-child a {
		border-top-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-webkit-border-top-left-radius: 5px;

		border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}

We’re using another CSS3 property here: border-radius. This new CSS3 property lets us add rounded borders to our blocks without the need of unnecessary, non-semantic tags that will clutter our code or a million of images and clever background-positioning. No, that’s all a thing of the past. With this we just need to set the radius of our border and that’s it.

Of course, border-radius is not widely adopted yet, and thus, we need to use the equivalent properties for Mozilla- and Webkit-browsers. There are a lot of variations to this property, and can make your code a little big, but if you want rounded corners on most of the current browsers, you might as well add them.

You might as well notice the use of !important. This is basically to override the default styles (text-shadow) without complex specificity selectors. In this example it’s here mostly for educational purposes.

Featured block and Body styling

Here’s the CSS code for both blocks. Note that this is not the styling for the posts’ list. Just the major content block. As both of these blocks have no real special CSS properties, I’ll let you guys figure it out.

/*
	Featured
*****************/
#featured {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	width: 760px;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#featured figure {
	border: 2px solid #eee;
	float: right;
	margin: 0.786em 2em 0 5em;
	width: 248px;
}
#featured figure img {display: block; float: right;}

#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}

#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}

/*
	Body
*****************/
#content {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px 20px;
	width: 760px;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Again, this is our everyday coding style. Backgrounds, margins, colours and text styles we’ve been using for years. Perfect example of how styling HTML5 is not that different from current markup languages. It’s just as easy to style as it’s always been.

Extras block styling

Here things begin to get interesting. We’ll begin with basic styling for the block itself:

/*
	Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}

#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
	color: #C74350;
	font-size: 1.429em;
	margin-bottom: .25em;
	padding: 0 3px;
}

#extras a:link, #extras a:visited {
	color: #444;
	display: block;
	border-bottom: 1px solid #F4E3E3;
	text-decoration: none;
	padding: .3em .25em;
}

	/* Blogroll */
	#extras .blogroll {
		float: left;
		width: 615px;
	}

	#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}

	/* Social */
	#extras .social {
		float: right;
		width: 175px;
	}

As you can see, I’m doing a 3 column layout for the blogroll block by floating the <li>s and a 1 column layout for the social block by merely changing its width. This already works very well by itself, but there’s one thing that bothers me. The borders I’ve added for separating each of the links:

Smashing HTML5! Extras block border issue

The highlighted row is the one troubling me. The borders I’ve added are actually on two elements. Each <li> and <a> tag have a border-bottom of 1px, which I don’t want on the last row. So we’ll remove the borders for the last 3 elements on blogroll, and the last element on social.

First we’ll remove the borders on the last <li> of each block. By using the CSS3 :last-child selector, we can target the last <li> of it’s parent <ul>.

	#extras li:last-child, /* last <li>*/
	#extras li:last-child a /* <a> of last <li> */
	{border: 0}

That will remove the border from the last link on both of our blocks. Now we have a new problem. How are we going to remove the border on the other two elements on the blogroll block?

Smashing HTML5! Extras block border second issue

Well, meet :nth-last-child().

#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}

Phew! Looks pretty hard, uh? Not really. This basically targets the second (2) and third (3) elements starting from the end. Exactly the ones I want to remove the border from.

As expected, this will not work on IE, though IE8.js does support :last-child, it does not support :nth-last-child, thus, borders will appear on IE. This is NOT a major design problem, information is still accessible, thus it is pointless to try to achieve the same effect on IE.

Adding icons to social

Now we’ll spice things up a little. We all love how little icons look besides each link. We’ve seen that design technique everywhere. There’s a million ways of applying them, but we’ll use some advanced CSS3 selectors to do this.

Let’s begin with a little introduction. a[n='b'] will target all <a> that has an n attribute value of b. So, for example, if we use this: a[href='picture.jpg'] we’ll be targeting an element like <a href="picture.jpg">. This is great, but not exactly what we want, since the follow-ups of the URL might have a different value. Here’s a couple of other selectors that might come in handy:

  • a[n] will target all <a> that has an n attribute, regardless of its value.
  • a[n='b'] will target all <a> that has an n attribute value of b.
  • a[n~='b'] will target all <a> that has an n attribute which one of its space-separated values is b.
  • a[n^='b'] will target all <a> that has an n attribute that starts with b.
  • a[n*='b'] will target all <a> that has an n attribute that has b somewhere within its value.

Note that neither of these is restricted to the <a> tag. This last one fits us perfectly. So we’ll search for an <a> tag that has a piece of text somewhere within its URL. So this is our code:

#extras div[class='social'] a {
	background-repeat: no-repeat;
	background-position: 3px 6px;
	padding-left: 25px;
}

/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}

The first bit lets us add a padding to the social links, where the icon will be. It’ll also set the default background settings so we don’t have to repeat ourselves. You might be wondering why I’m using div[class='social'] rather than the normal div.social. Simply because, for the browsers that don’t support this kind of selectors (*cough* IE *Cough*), we don’t want a white gap on the left of our links. Thus, using the same selector used for the background icons will keep me safe. IE won’t have a padding nor a background image, while the rest will do.

The second section uses the selector explained above to target each social network and add the proper icon.

This CSS technique is nothing new, and as powerful as it might be, it is not widely used (I’ve even seen JavaScript used to achieve this same thing). Yet another CSS feature that goes unnoticed and shouldn’t be.

Footer Styling

Lastly, we have our footer. As other examples above, this has just basic styling here and there. Besides the border-radius property, there’s nothing new in here.

/*
	About
*****************/
#about {
	background: #fff;
	font-style: normal;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	text-align: left;
	width: 760px;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}

#about .url:link, #about .url:visited {text-decoration: none;}

#about .bio {float: right; width: 500px;}

/*
	Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}

The Posts List

There’s only one last element to style. Once again, basic styling here, but this time, we’ll add a quick effect for when the user hovers over the post.

/* Blog */
.hentry {
	border-bottom: 1px solid #eee;
	padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}

.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}

.hentry .post-info * {font-style: normal;}

	/* Content */
	.hentry footer {margin-bottom: 2em;}
	.hentry footer address {display: inline;}
	#posts-list footer address {display: block;}

	/* Blog Index */
	#posts-list {list-style: none; margin: 0;}
	#posts-list .hentry {padding-left: 200px; position: relative;}
	#posts-list footer {
		left: 10px;
		position: absolute;
		top: 1.5em;
		width: 190px;
	}

Some basics. I’m removing all margin and padding for the last post entry (so I don’t end up with a big gap at the bottom of my box). I’m also using the > selector which basically targets a direct child. For example, #content > .hentry will target a .hentry element that’s directly inside the #content. If the .hentry is inside, let’s say, an ordered list, this rule will not apply since it’s a grandchild and not a direct child of #content. This is to target the single post view once we get onto that.

Continuing with our code, we’ll get this:

#posts-list .hentry:hover {
	background: #C64350;
	color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
	color: #F6CF74;
	text-shadow: 1px 1px 1px #333;
}

This code will change the <li> background color, text color and its <a> color when the mouse is directly above the <li>. This is nothing new and has been possible since forever, but we’re adding it for a simple reason.

HTML5 lets users wrap block-level elements with <a> tags to create block linking areas. Basically, we’ll be able to wrap the entire <hentry> contents with an anchor and have it behave as a proper link. However, after some testing, I’ve figured that Firefox 3.5.1 is not ready for this. Perhaps because of the non-understandable new elements inside of each .hentry, everytime I added an anchor to wrap the contents, everything inside started to behave in weird manners. Safari, Opera and even IE6 work properly. Take a look at the test page. Below are a couple of screenshots for all of you single-browser users.

Opera 9.64:

Opera block level anchors render

Safari 4.0.2:

Safari block level anchors render

Internet Explorer 6:

IE6 block level anchors render

Firefox 3.5.1:

Firefox block level anchors render

So block level anchors are really broken on Firefox, yet we can add a nice :hover effect to the <li>. So we can enhance our user experience visually, though not from the accessibility point of view.

Fixing IE6

Finally, we need to do some fixing for IE6. Below is the complete ie.css and ie6.css file. Each line has a comment on its right side or on the top explaining what it’s fixing. Pretty straightforward. This is ie.css:

#banner h1 {line-height: 1;} /* Fixes Logo overlapping */

And this is ie6.css file:

#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */

/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}

4. The aftermath

So, how does everything look now? Take a look at the final product here. It has been tested on IE6, Firefox 3, Firefox 3.5, Opera 9.64 and Safari 4.0.2. They all behave properly. Below are a series of screenshots of every browser.

Final Version Safari Screenshot
Final Version Firefox Screenshot
Final Version Opera Screenshot
Final Version Internet Explorer 6 Screenshot

It is now safe to say that you can achieve an HTML5/CSS3 layout today that will work on past, current and future browsers without a problem. We are still far away from the time we can fully implement much of HTML5′s coolest features, but we can begin using it today.

Further Resources

There’s a lot of hype and websites dedicated right now to the HTML5 wonder. Here’s a couple:

  • HTML5 Doctor
    Tips and tutorials that will help you implement HTML 5 today
  • HTML5 Editor’s Draft
    Current Draft with everything you’ll ever need to know about HTML5
  • HTML5 Gallery
    In the wild examples of HTML5 implementations
  • The power of HTML 5 and CSS 3
    Great article about some of the major HTML 5 and CSS 3 features
  • HTML 5 and the Future of the Web
    This articles gives you some tips and insights into HTML5 to help ease the inevitable pain that comes with transitioning to a slightly different syntax.
  • Take Your Design To The Next Level With CSS3
    In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website.

In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally it’s just how Adit has described.
Our brain works well, in order to solve a big problem, if we can divide the main issue in N operations that solve N little difficulties, and the total sum of these N little steps provides the solution for our big problem. Perfect, ‘Houston, we have a big problem!’ We should create a working web design. Actually the common routine requires the following main steps:

  • Step 1: understand the theme and the topics of the website and decode the client’s requests
  • Step 2: choose the right style and sketch your ideas
  • Step 3: draw a clean and clear wireframe to summarize the structure of the website
  • Step 4: design the website (in pixels) through an image editor, like Photoshop, to create a real-scale mockup
  • Step 5: convert your psd mockup to HTML and CSS

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

How HTML 5 And CSS3 Can Change Web Design

If you were to ask me which is the greatest change that HTML 5 and CSS3 could bring about, I’d focalize my answer on the use of the image editors. Sure, we can talk about the power of the semantic web or about the reduction of the plugin-based rich internet applications (such as Flash or Java); but as web designer the first, big, change is just within my design process. In fact the new features of CSS3 allow us a complete control of some properties able to create nice effects without the use of jpgs, pngs or gifs. New properties of CSS3, such as box-shadow, avoid creating pixel-perfect images to make precious your web design.
For a long time I’ve thought about Photoshop (or other image editors) ‘it is an essential tool to develope a website.’ Actually I’m changing this point of view to ‘it is an useful tool to develope a website.’
From the routine described in the introduction of the article it’s evident how the psd mockup and PSD-to-HTML conversion are needful things, but, digging into new features of CSS3, a question hires my brain: ‘do you really need a psd mockup?’
The answer, in my opinion, is ’sometimes.’ When you have a clear concept and a good wireframe you may code instantly an HTML-based mockup for a browser; to save your time (and your money) avoiding an almost-absolete step.
Note: I am not saying that you don’t need Photoshop. I am just saying that, sometimes, a psd mockup could be a superflous step, however you could need an image editor to create stunning graphic details.
Megan Fisher explains in wonderful way her point of view about HTML-based mockup with her article on 24ways titled “Make Your Mockup in Markup.”

Quick Overview On HTML 5

HTML 5 borns to improve interoperability and to reduce development costs for websites and web applications. It is not a W3C recommendation yet, and for this reason you have to read information contained in the article like a simple overview on how we might work with new technologies in the (next) future.

HTML 5 is aimed to create a comprehensive and all-in-one markup language for front-end development, able to provide a qualitative information on the different elements of the page; all this introducing new media elements (and their attributes), such as <video> and <audio>, and semanthic elements (that reflect modern usage of the website), such as <article>, <header> and <footer>.
We focalize our attention on the new elements that make easier to structure a web page. Take a look to the following elements, which are all new features of HTML 5 (information from HTML 5 | Working Draft).

<section> – section element is a generic section of a document or application, a thematic grouping of content that contains a heading. The section element is not a generic container element like a <div>. If you create a section for styling purposes or as a convenience for scripting, you should use a <div>. A section element is the right choice when you want that the element’s contents are listed explicitly in the document’s outline (read “<section> is not just a “semantic <div>” to learn more).

<aside> – aside element is a section of a page that consists of content that is tangentially related to the content around the aside element. We can use aside element for sidebars, for advertising, for groups of nav elements, and for other content that we can consider separate from the main content of the page.

<article> – article element is a self-contained composition (a forum post, a magazine or newspaper article, a blog entry) in a web page or web application and that is intended to be distributable or reusable. You should use the article element, instead of the section element, when it would make sense to syndicate the contents of the element.

<footer> – footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. It can contain information about its section, links to related documents, copyright dataansd so on. Footer element used for a general site-wide footer and for a article (or section) footer.

<header> – header element represents a group of introductory or navigational aids, it is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element)

<nav> – nav element is a section with navigation links. Not all groups of links on your web page need to be within a nav element, only sections that consist of major navigation blocks are appropriate for the nav element.

<address> – address element represents the contact information for its nearest article.

<time> – it is used to represent a date and/or the time.

Quick Overview On CSS3

Like HTML 5 also Cascading Style Sheet Level 3 is under development and it is not a W3C recommendation yet. However we can start to use some new features and properties, which work in modern browser, to improve and optimize our web design projects.
There are some properties that you may experiment, such as border-radius and box-shadow, but realistically you have to fight with browsers compatibility to create a CSS3-based style sheet for a client project.
Below, at any rate, you can take a look at some new features and techniques that you may put into practice immediately.

RGBaRGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

background: rgba(196,89,30,0.65);

box-shadow – the box-shadow CSS property accepts one or more shadow effects as a comma-separated list, to attach one or more drop-shadows to a box.

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

border-radius – other great new property: border-radius, that allows us to add nice rounded corners on box-items.

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

text-shadow – the text-shadow new property accepts a comma-separated list of shadow effects to be applied to the text of the element.

text-shadow: 1px 1px 1px #2c0306;

An Elegant Web Design With HTML 5 And CSS3 – Live Preview and Download

Now, after a quick overview on the technologies that we will use, we can start to design our website. The aim is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer).
Below you can see the final resul of our efforts; don’t forget that it is coded through two new great technologies, HTML 5 and CSS3. You may see a live preview of the template and download the archive with all source files.

An Elegant Web Design With HTML 5 And CSS3

Download Source
Download Source

The template can be used and edited without any restrictions or limitations. Feel free to modify the template in private or commercial projects. It is absolutely free to use and released under GNU General Public License. We love our readers!

How To Create A Nice Blog Design Touching The Future

During the introduction I’ve described a scenario in which we don’t need Photoshop to make a good work and create a nice web design. It’s possible, but the initial steps are very important in this case. You need to focus and formalize the requests of the client and create a good plan to work directly with the code.
I suggest to use pencil and paper to sketch your ideas. You should create a working wireframe, not 100% complete, however able to synthesize the client’s necessities and explain your plan for a comfortable work with the code.

Sketch Your Ideas

After a revision of the goals (from client’s requests) I decide to create a clean layout with a simple header, a container for recent posts, a column for archive (that contains a list of posts) and a ’sidebar’ with personal info, a preview of the portfolio and contact info.
Below you can see my row wireframe.
An Elegant Web Design With HTML 5 And CSS3

Graphic Details

Did I say ‘you don’t need Photoshop?’ No my friend, I just said ‘you don’t need psd mockup.’ High-quality graphic details are useful to design a great website. So, start from color palette and then draw good details in order to make precious your design. Below you can take a look to the graphics, created through Photoshop, that help us in building our blog design.

Color palette
An Elegant Web Design With HTML 5 And CSS3

Graphics
An Elegant Web Design With HTML 5 And CSS3

I’ll use the square pattern to create a nice background for the main container; for the header I’ll use the red-gradient image with a soft noise-effect. I’ve create the logo using French Script MT font, a soft gradient effect and a drop-shadow, I’ve also arranged in advance the image to apply, in due course, the CSS sprite techniques. There also two nice, minimal, icons to create ’subscribe to blog’ buttons.

Code Your Website With HTML 5

As evident, we have the following elements: header, last posts container, archive with a list of posts and blocks that usually we find in the sidebar of website, such as personal information, blogroll and contact details.
You may check out complete code here: index.htmlstyle.css.

Step 1 – Basic Structure
First of all I define the basic structure of the HTML page, including Doctype, links to stylesheets, the title of the page and charset details. The following image explains the structure and highlights the tag that I use to create the basic structure.
An Elegant Web Design With HTML 5 And CSS3

And now it’s time for the code.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mr. hurley | personal blog</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<header id="site_head">
		<div><!--useful to create the 960px limit-->
		<!--header stuff-->
		</div>
	</header>

	<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts">
		<!--last posts here-->
		</section>

		<div>
		<section id="archive">
		<!--list od posts here-->
		</section>

		<aside>
		<!--blogroll-->
		</aside>
		</div>

		<aside>
		<section>
		<!--personal info here-->
		</section>		

		<nav>
		<!--links for the portfolio-->
		</nav>

		<section>
		<!--contact details here-->
		</section>
		</aside>

		<footer>
		<!--footer info here-->
		</footer>
		</footer>

	</div><!--/main_container-->

</body>
</html>

Step 2 – The Header
According to the definitions of the paragraph titled “Quick Overview On HTML 5″, we can code the header section of our page as shown below.

<header id="site_head">
		<div>
		<h1><a href="#">mr. hurley</a></h1>

		<nav>
		<ul>
			<li><a href="#">Subscribe</a></li>
			<li><a href="#">Follow Me</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		</nav>
		</div>
	</header>

Create the style.css, linked in our <head> section, and start to add the style for elements (and nested blocks) of the <header>. Note: The first couple of lines in the CSS are used to reset any default browser styling and to set-up the style for ‘general’ tag, such us a or :focus.

@charset "utf-8";
/* CSS Document */

/*  Reset for some default browser CSS - General */

body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
	margin: 0; padding: 0; border: 0; list-style: none;
}

a {
	text-decoration: none;
	color: #961b25;
}

a:hover {
	color: #6f92a7;
}

:focus {
	outline: 0;
}

h1, h2, h3 {
	font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-weight: normal;
} 

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

.float {
		float:left;
	}

body {
	background: #f6f6ee url(images/bck.jpg);
	font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	}	

/* Header */

header#site_head {
	background: url(images/bck_head.jpg);
	-moz-box-shadow: inset 0px -2px 3px #480508;
	-khtml-box-shadow: inset 0px -2px 3px #480508;
	-webkit-box-shadow: inset 0px -2px 3px #480508;
	box-shadow: inset 0px -2px 3px #480508;
	border-bottom: 1px solid #fffffb;
	height: 70px;
	width: 100%;
	display: block;
}

	.header_cont {
		width: 960px;
		margin: 0 auto;
		padding-top: 15px;
	}

		.header_cont h1 {
			text-indent:-9999px;
			float: left;
		}

		.header_cont h1 a {
			background: url(images/logo.png) no-repeat;
			width: 143px;
			height: 45px;
			display: block;
		}

		.header_cont h1 a:hover {
			background-position: 0px -45px;
		}

		nav.head_nav {
			float: right;
			margin-top: 13px;
		}

		nav.head_nav ul li {
			display: inline;
			margin: 0px 5px;
		}	

			nav.head_nav ul li a {
				color: #f6f6ee;
				font-size: 12px;
				font-weight: normal;
				text-transform: lowercase;
				padding: 5px 8px;
			}

			nav.head_nav ul li.home a {
				background: #4f1d1e;
				-moz-border-radius: 10px;
				-khtml-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}

			nav.head_nav ul li a:hover {
				text-shadow: 1px 1px 1px #2c0306;
				background: #4f1d1e;
				-moz-border-radius: 10px;
				-khtml-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				-moz-box-shadow: inset 0px 0px 2px #2c0306;
				-khtml-box-shadow: inset 0px 0px 2px #2c0306;
				-webkit-box-shadow: inset 0px 0px 2px #2c0306;
				box-shadow: inset 0px 0px 2px #2c0306;
				color: #f6f6ee;
			}

			nav.head_nav ul li.rss, nav.head_nav ul li.twitter  {
				position: relative;
				left: -355px;
				margin: 0;
				}

			nav.head_nav ul li.rss a {
				color: #b4676c;
				border-right: 1px solid #903f43;
				margin: 0;
				padding-left: 20px;
				background: url(images/rss.png) left no-repeat;
				font-size:10px;
		}

			nav.head_nav ul li.twitter a {
				color: #b4676c;
				margin-left: 3px;
				padding-left: 20px;
				background: url(images/twitter.png) left no-repeat;
				font-size:10px;
			}

			nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover  {
				color: #f6f6ee;
				-moz-border-radius: 0;
				-khtml-border-radius: 0;
				-webkit-border-radius: 0;
				border-radius: 0;
				-moz-box-shadow: none;
				-khtml-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
			}

The result of the code.
An Elegant Web Design With HTML 5 And CSS3

Step 3 – Last posts container
As usual, I describe directly showing the code how to build a well-done HTML section aimed to enclose recent posts. The <section class=”last_posts”r> is within <div class=”main_container”> (which defines the 960px limit). Here we use the new tags <article>, <address> and <time> for the first time, in order to create a ’semanthic’ single post section. Note: download the archive with the source files, there you can find all used images.

<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts"><!--section for recent posts-->
		<header>
			<h3>Last posts</h3>
		</header>

			<div><!--single post container-->
				<article>
				<div>
					<figure>
						<img src="images/test3.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div>
					<header>
						<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
					</header>
					<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients. After all, they put their trust in me and gladly compensate me for my efforts. I guess I would be...</p>
					<span><a href="#">Read more</a></span>
				</div>
				</article>

			</div>

			<div>
				<article>
				<div>
					<figure>
						<img src="images/test1.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div>
					<header>
						<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
					</header>
					<p>For a long time purple has been the least used colour in web design. In recent months I noticed the number of websites...</p>
					<span><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

			<div>
				<article>
				<div>
					<figure>
						<img src="images/test4.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div>
					<header>
						<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
					</header>
					<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. </p>
					<span><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

			<div>
				<article>
				<div>
					<figure>
						<img src="images/test2.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <address><a href="#">Mr. Hurley</a></address></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div>
					<header>
						<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
					</header>
					<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
					<span><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

		</section>

</div>

Below the style for this section.

/* Main container */	

#main_content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
}

	/* Last posts section */	

	.section_tit {
		clear: both;
	}

		.section_tit h3 {
			background: url(images/line.png) no-repeat center center;
			text-align: center;
			font-size: 34px;
			margin: 10px 0 25px 0;
			color: #c9c9c0;
			text-shadow: 1px 1px 0px #fff;
		}

	div.single_post {
		float: left;
		width: 447px;
		height: 345px;
		margin: 0 16px 35px 16px;
	}

		img {
			border: 5px solid rgba(255,255,255,0.75);
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-box-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
		}

		div.single_post footer {
			color: #2b2b28;
			text-align:right;
			font-size: 10px;
		}

		div.single_post ul  {
			margin-top: 10px;
			border-right: 3px solid #dbdbd4;
		}

		div.single_post ul  li {
			padding: 1px 13px 1px 0px;
		}

		div.single_post ul  li a {
			font-weight: bold;
		}

		div.art {
			width: 250px;
			display: block;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(255,255,255,1);
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin-left: 15px;
			overflow: auto;
			float:left;
		}

		div.art:hover {
			background: rgba(255,255,255,1);
		}

		div.single_post header h2 {
			border-bottom: 1px solid #dbdbd4;
			margin: 20px;
			padding-bottom: 20px;
			text-align: center;
		}

		div.single_post p {
			padding: 0 20px;
			font-size: 12px;
			line-height: 20px;
		}

		span.more {
			float: right;
			margin: 30px 20px 30px 0px;
		}

		span.more a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: inset 0px 0px 2px #3f5867;
		}

		span.more a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

The result of our efforts.
An Elegant Web Design With HTML 5 And CSS3

Step 4 – Archive and aside sections
Now I add an archive with an ordered list of posts and other information organized in <aside> blocks. Take a look at the code to understand how I’ve built the two-columns structure.

<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts">
		<!--...-->
		</section>

		<div><!--left container fo archive and blogroll-->
		<section id="archive">
		<header>
			<h3>Archive</h3>
		</header>

		<ol><!--list of posts-->
			<li><article>
				<figure>
				<img src="images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

			<li><article>
				<figure>
				<img src="images/test5.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
				</header>
				<p>For a long time purple has been the least used colour in web design.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

			<li><article>
				<figure>
				<img src="images/test4.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
				</header>
				<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

		</ol>
		<span><a href="#">More posts</a></span>
		</section>

		<aside><!--blogroll-->
		<nav>
		<div>
			<h3>Friends</h3>
		</div>

			<ul>
				<li><a href="#">PV.M Garage</a></li>
				<li><a href="#">Web Is Love</a></li>
				<li><a href="#">Web Expedition</a></li>
			</ul>
			<ul>
				<li><a href="#">Web Blend</a></li>
				<li><a href="#">Just Test</a></li>
				<li><a href="#">Another Test</a></li>
			</ul>
			<ul>
				<li><a href="#">Random Link</a></li>
				<li><a href="#">Black Rock</a></li>
				<li><a href="#">The Hydra</a></li>
			</ul>
			<ul>
				<li><a href="#">The Orchid</a></li>
				<li><a href="#">The Pearl</a></li>
				<li><a href="#">The Flame</a></li>
			</ul>
		</nav>
		</aside>
		</div>

		<aside><!--sidebar-->
		<section>
		<header>
			<h3>About me</h3>
		</header>
			<div>
				<figure>
					<img src="images/test6.jpg" width="120" alt="test" />
				</figure>
				<ul>
					<li><a href="#">follow me on twitter</a></li>
					<li><a href="#">be my friend</a></li>
					<li><a href="#">my bookmarks</a></li>
				</ul>
			</div>

			<div>
			<p>Hi, this is M. Hurley, a web designer and developer strangely based in Italy. On this blog I want to share with you my experiences and my works. I won't teach, I just want to provide useful information to learn how to deal with the wonderful world of web design.</p>
			<p>Thanks for reading,</p>
			<p><em>Mr Hurley</em></p>
			</div>
		</section>		

		<nav>
		<div>
			<h3>Portfolio</h3>
		</div>
		<div>
			<ul>
				<li><a href="#"><img src="images/test1.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test2.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test3.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test4.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test5.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test1.jpg" width="110" alt="test" /></a></li>
			</ul>
		</div>
		</nav>

		<section>
		<header>
			<h3>Contact</h3>
		</header>

			<p>If you are interested in advertising on this blog, you can purchase a banner directly from <a href="http://buysellads.com/buy/detail/7791">BuySellAds.com</a>, a great service to buy and sell ads.
Feel free to follow us on Twitter and to subscribe to our RSS feed. You can also contact directly Mr Hurley, the mind behind, through an email to <a href="mailto:pier.made@gmail.com">pier.made@gmail.com</a></p>
		</section>
		</aside>

	</div>

I have to style all these elements, so let’s go with CSS rules.

/* Archive - Sidebar */

	.left_cont {
		float: left;
		width: 447px;
		margin: 0 16px 16px 16px;
	}

	aside {
		float: right;
		width: 447px;
		margin: 0 16px 16px 16px;
	}

		section#archive ol li {
			width: 385px;
			min-height: 130px;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(255,255,255,1);
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin: 30px 15px 20px 15px;
			padding: 15px;
		}

		section#archive ol li:hover {
			background: rgba(255,255,255,1);
		}

		section#archive h2 {
			font-size: 16px;
			line-height: 22px;
			margin: 0 0 10px 0;
		}

		section#archive figure {
			margin-right: 15px;
		}

		section#archive footer p {
			font-size: 10px;
			margin-top: 15px;
			text-align: right;
		}

		section#archive footer p a {
			color: #6f92a7;
			font-weight: bold;
		}

		section#archive footer p a:hover{
			color: #961b25;
		}

		aside.friends ul {
			float: left;
			padding-left: 15px;
			width: 95px;
		}

		aside.friends ul li {
			margin-bottom: 10px;
			border-bottom: 1px solid #dbdbd4;
		}

		span.more_arch {
			font-size: 30px;
			margin: 15px 15px 10px 0;
		}	

		section.about, section#archive, aside.friends {
			display: block;
			overflow: auto;
			margin-bottom: 30px;
		}

		div.portfolio {
			margin-bottom: 45px;
			display: block;
		}

		.about_right {
			float: right;
			width: 265px;
			margin-right: 15px;
		}

		.about_left {
			float: left;
			margin-left: 15px;
			padding-top: 5px;
		}	

		section.about p, section.contact p  {
			font-size: 14px;
			line-height: 22px;
			margin-bottom: 18px;
		}

		section.contact p  {
			margin: 0 15px;
		}

		.about_left ul li a {
			width:130px;
			display: block;
			text-align: center;
			padding: 6px 0;
			margin: 13px 0;
		}

		div.portfolio ul {
			margin: 0 15px -8px 15px;
		}

			div.portfolio ul li  {
				display: inline-block;
				margin: 8px 8px 0 8px;
			}

To optimize, I add style for section#archive p, span.more_arch a and .about_left ul li modifying previous rules as shown below.

		div.single_post p, section#archive p {
			padding: 0 20px;
			font-size: 12px;
			line-height: 20px;
		}

		span.more, span.more_arch {
			float: right;
			margin: 30px 20px 30px 0px;
		}

		span.more a, span.more_arch a, .about_left ul li a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: inset 0px 0px 2px #3f5867;
			box-shadow: inset 0px 0px 2px #3f5867;
		}

		span.more a:hover, span.more_arch a:hover, .about_left ul li a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

Below you can see how our code appears on a web browser.
An Elegant Web Design With HTML 5 And CSS3

Step 7 – Finally, just a simple footer
I add a simple footer with credits and some information.

	<div id="main_content">

		<!--...-->

		<footer>
			<p>Contents and resources released under Creative Commons License.</p>
			<p>Design and code by Piervincenzo Madeo - 2010 Mr Hurley Theme - A free HTM5 and CSS3 template.</p>
		</footer>
	</div>

The relative CSS rules for the footer.

/* Footer */

	footer.bottom  {
		clear: both;
		display:block;
		margin: 30px 15px;
		border-top: 1px solid #c9c9c0;
		padding-top: 20px;
	}

		footer.bottom p {
			text-align: center;
			color: #b6b6ab;
		}

See the following image to understand how our footer appears.
An Elegant Web Design With HTML 5 And CSS3

Step 8 – We have a problem: browser compatibility
HTML 5 and CSS3 are two new technologies, so the works actually are in progress. A great issue to use today the new available features is the disparate browser support. Browsers like Firefox 3.6+ and Opera 10.5+ are very promising, but there are many softwares, such as Internet Explorer and Chrome, that present bugs and an incomplete support.
“Web Designers’ Browser Support Checklist” offers a panoramical view about browser support for HTML 5 and CSS3.
I can assert, at any rate, that there are useful solutions to help us to ‘modernize’ our web projects.

First of all we need something that help us to take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. The solution? Modernizr, a small and simple JavaScript library that allow us to use new properties and elements of HTML 5 and CSS3 in clever way.
Download the library here, add the file modernizr-1.1.min.js into your template folder and activate the script adding the following line within <head> tag in index.html:

<script src="modernizr-1.1.min.js"></script>

Modernizr runs through a little loop in JavaScript to enable the various elements from HTML 5 for styling in Internet Explorer, below we can see how this allow us a complete control of HTML 5 also in IE.
An Elegant Web Design With HTML 5 And CSS3

It’s still evident that there are some problems. Where the background-color for div.art and div.art is? Well, IE doesn’t support RGBa. We have two possible ways.
First: we may use the Modernizr method; it allow us to filter the style rules for browsers that doesn’t support RGBa using the classes .rgba and .norgba for activating the filter (read Modernizr Docs to learn more).
Second (my method): I choose, however, of solving this problem adding a simple RGB property where necessary; below you can see how I modify some CSS classes to add the ‘correct’ (big word) background-color for IE too.

		img {
			border: 5px solid rgb(255,255,255); /*rgba ie fix*/
			border: 5px solid rgba(255,255,255,0.75);
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-box-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
		}

		/*...*/

		div.art {
			width: 250px;
			display: block;
			background: rgb(255,255,255); /*rgba ie fix*/
			background: rgba(255,255,255,0.75);
			border: 1px solid rgb(255,255,255); /*rgba ie fix*/
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin-left: 15px;
			overflow: auto;
			float:left;
		}

		div.art:hover {
			background: rgb(255,255,255); /*rgba ie fix*/
		}

		/*...*/

	section#archive ol li {
		width: 385px;
		min-height: 130px;
		background: rgb(255,255,255); /*rgba ie fix*/
		background: rgba(255,255,255,0.75);
		border: 1px solid rgb(255,255,255); /*rgba ie fix*/
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0px 0px 5px #c6c6bf;
		-khtml-box-shadow: 0px 0px 5px #c6c6bf;
		-webkit-box-shadow: 0px 0px 5px #c6c6bf;
		box-shadow: 0px 0px 5px #c6c6bf;
		margin: 30px 15px 20px 15px;
		padding: 15px;
	}

	section#archive ol li:hover {
		background: rgb(255,255,255); /*rgba ie fix*/
	}

Now we can see how IE renders our code.
An Elegant Web Design With HTML 5 And CSS3

Testing the template with Google Chrome I said ‘dammit!’ Why? See how Chrome destroys our efforts in creating a nice ‘read more’ button.
An Elegant Web Design With HTML 5 And CSS3

This bug borns when we use at the same time border-radius and inset for box-shadow. To fix I use the following trick:

	nav.head_nav ul li a:hover {
		text-shadow: 1px 1px 1px #2c0306;
		background: #4f1d1e;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: inset 0px 0px 2px #2c0306;
		-khtml-box-shadow: inset 0px 0px 2px #2c0306;
		-webkit-box-shadow: -1px -1px 2px #2c0306; /*-webkit- inset fix*/
		box-shadow: inset 0px 0px 2px #2c0306;
		color: #f6f6ee;
	}

	/* ... */

	span.more a, span.more_arch a, .about_left ul li a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: -1px -1px 2px #3f5867; /*-webkit- inset fix*/
			box-shadow: inset 0px 0px 2px #3f5867;
		}

	span.more a:hover, span.more_arch a:hover, .about_left ul li a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

Just a trick, but in this case it works fine.
An Elegant Web Design With HTML 5 And CSS3

Step 9 – Rendering on different browsers and validation
Finally we have just to take a look to the different renderings on some browsers and we have to validate the code.
An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

Conclusion

Mission complete! We have a nice and elegant website.
This post is just a practical step-by-step overview on how to use new features of HTML 5 and CSS3, but to learn more about these topics I suggest to read the following articles (and more):

Useful readings and resources to learn more about HTML 5

Useful readings and resources to learn more about CSS3

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

How To Create Sliding Doors With CSS

Posted: February 8, 2012 in HTML 5

Introduction

Of all the navigation types used today, the most popular is arguably the tabbed navigation bar. In its nascent years, web developers would stack images into table cells to build the navigation bar. Then came CSS, and using an unordered list styled with CSS became de facto standard. The trend was to use as little images as possible and use CSS styling properties instead. The problem with that method is that the design is restricted to what CSS allows you to do. Newer versions (CSS3)  offers the ability to stack layers of background images so they are sliding over each other to create a Sliding Door effect. This meant that we might be able to have the best of both worlds – keep the page light by limiting the use of images and at the same time reuse one image to display a beautiful navigation bar.

Figure 1
Fig. 1 – Regular Tabbed Navigation

The best part is that we can reuse most of the markup and styling that we use in the above example. At the end of this article, you will learn how you can convert the above navigation to look like the one below.

Figure 2
Fig 2 – Rounded Tabbed Navigation

Various Techniques

There have been several techniques that have been tried and have failed when it comes to creating tabbed menus. Creating an image with the tab label seems the easiest, but when you want to have 3 states for each tab – active, hover and inactive, then it becomes an engineering headache. The next solution was to use a graphic without the text and overlay the text on the button. That seemed to work, but then you had to have multiple sizes of the buttons for different labels and then since on the web you can’t be sure what font will be used, very often the tabs looked quite messy. After all this people gave up on making the navigation look fancy and preferred to have a functional text-based boxy tabbed bar (like the one in the first screenshot).

Enter the Sliding Doors

This technique is very simple. It resolves the problem of fixed width images for the tabs. While making the graphic, imagine a tab that is really long – in other words, make the tab graphic wider that you need. You might be wondering what you are going to do with such a large tab, but hold that thought.

The sliding door technique basically uses two images stacked up next to each other. One image is long over which the text is laid and the other image closes the other side. We use the background image property because it hides the overflow and only shows the width specified, and the other image slides over it to define the other end. That is why its called the sliding door technique. Here is a screenshot of how the image is split.

Figure 3
Fig. 3

With the CSS background position property, we create one image and reuse it for the both elements. The image looks like this:

Figure 4
Fig. 4 – Graphic used for the tab

The markup for the navigation is quite simple. For example:

Presuming you know how to show the unordered list inline, I will move ahead. The addition to this markup is the span tag inside the anchor tags. As shown in figure 3, we will use the left part of the image (in figure 4) as the background for the anchor tag and give it some padding so that the left edge of the tab shows. The span inside the anchor tag will use the right edge of the image as its background. The span’s image will over lay that of the anchor tag, but since they are both the same image, it doesn’t matter. As long as the image is wide enough to fit the text inside it, we have no problem.

The Style

The sliding doors technique requires you to style 2 elements: the anchor tag and the span inside it. The key property here is background.

#navigation li a {
display: inline-block;
background: url(images/bg_tab.png) no-repeat top left;
padding-left: 15px;
}

#navigation li a span {
display: inline-block;
height: 46px;
background: url(images/bg_tab.png) no-repeat top right;
padding: 12px 15px 8px 0;
}

Styling Buttons

The sliding doors technique isn’t limited to tab navigations. You can use it in many cases such as if you want to box some content inside a fancy looking pattern that you can do with plain CSS, or to display buttons. Here are the screenshots of how you will build flexible width buttons using the sliding doors technique.

Figure 5
Fig. 5 – Bits used to create a button
Figure 6
Fig. 6 – Example of the buttons

Conclusion

So that’s how sliding doors work. Ever since I discovered this technique, I have been trying to use it everywhere because it simplifies the markup as well as allows me to reuse images, and creating the graphics is also so simple.