Touch The Future - Create An Elegant Website With HTML 5 and CSS3 - PVM Garage

Touch The Future: Create An Elegant Website With HTML 5 And CSS3 |...
http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-...
ADVERTISE | ABOUT | ENG | ITA Submit News Submit to Gallery Contact Us Contribute
PV.M Garage | Web Design Blog

jQuery, Interviews, Articles, Graphic Web Design HTML, CSS, Inspiration Tutorials Photoshop WordPress Theme, Coding Freebies Fonts, Resources Gallery Inspire Yourself! Our Tweets 4560 followers Subscribe RSS 2897 fans
Touch The Future: Create An Elegant Website With HTML 5 And CSS3
23 April 2010 Tutorials, Web Design This post was written exclusively for PV.M Garage by Piervincenzo Madeo Comments (431)
112
retweet retweet
Im 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.
1 of 78
8/4/2011 2:09 PM
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 its 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 clients 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 doesnt 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, Id 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 Ive thought about Photoshop (or other image editors) it is an essential tool to develope a website. Actually Im 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 its 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 dont 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 elements contents are listed explicitly in the documents outline (read <section> is not just a semantic <div> to learn more).
2 of 78
8/4/2011 2:09 PM
<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 sections heading (an h1h6 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. RGBa RGBa 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).
3 of 78
8/4/2011 2:09 PM
Below you can see the final resul of our efforts; dont 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.
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 Ive described a scenario in which we dont need Photoshop to make a good work and create a nice web design. Its 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 clients necessities and explain your plan for a comfortable work with the code.
Sketch Your Ideas

After a revision of the goals (from clients 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.
4 of 78
8/4/2011 2:09 PM
Graphic Details
Did I say you dont need Photoshop? No my friend, I just said you dont 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
Graphics
5 of 78
8/4/2011 2:09 PM
Ill use the square pattern to create a nice background for the main container; for the header Ill use the red-gradient image with a soft noise-effect. Ive create the logo using French Script MT font, a soft gradient effect and a drop-shadow, Ive 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.html style.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.
And now its 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 class="header_cont">  </div> </header> <div id="main_content"> <section id="last_posts">  </section> <div class="left_cont"> <section id="archive">  </section> <aside class="friends"> 
6 of 78
8/4/2011 2:09 PM
</aside> </div> <aside> <section class="about">  </section> <nav>  </nav> <section class="contact">  </section> </aside> <footer class="bottom">  </footer> </footer> </div> </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 class="header_cont"> <h1><a href="#">mr. hurley</a></h1> <nav class="head_nav"> <ul> <li class="rss"><a href="#">Subscribe</a></li> <li class="twitter"><a href="#">Follow Me</a></li> <li class="home"><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;
7 of 78
8/4/2011 2:09 PM
} 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;
8 of 78
8/4/2011 2:09 PM
} 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.
9 of 78
8/4/2011 2:09 PM
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_postsr> 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"> <section id="last_posts"> <header class="section_tit"> <h3>Last posts</h3> </header>
<div class="single_post"> <article> <div class="float"> <figure> <img src="images/test3.jpg" alt="test" /> </figure> <footer> <ul> <li><time datetime="2010-04-14" pubdate>April 14, 201 <li>written by <a href="#">Mr. Hurley</a></li> <li>posted in <a href="#">Web Design</a>, <a href="#" <li><a href="#">Comments (15)</a></li> </ul> </footer> </div>
<div class="art"> <header class="post_head"> <h2><a href="#">Options To Consider When Your Client Is Drivi </header> <p>I guess I would be speaking on your behalf when I say that I feel <span class="more"><a href="#">Read more</a></span> </div> </article> </div>
<div class="single_post"> <article> <div class="float"> <figure> <img src="images/test1.jpg" alt="test" /> </figure> <footer> <ul> <li><time datetime="2010-04-14" pubdate>April 14, 201 <li>written by <a href="#">Mr. Hurley</a></li> <li>posted in <a href="#">Web Design</a>, <a href="#" <li><a href="#">Comments (15)</a></li> </ul> </footer>
10 of 78
8/4/2011 2:09 PM
</div>
<div class="art"> <header class="post_head"> <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 desig <span class="more"><a href="#">Read more</a></span> </div> </article> </div>
<div class="single_post"> <article> <div class="float"> <figure> <img src="images/test4.jpg" alt="test" /> </figure> <footer> <ul> <li><time datetime="2010-04-14" pubdate>April 14, 201 <li>written by <a href="#">Mr. Hurley</a></li> <li>posted in <a href="#">Web Design</a>, <a href="#" <li><a href="#">Comments (15)</a></li> </ul> </footer> </div>
<div class="art"> <header class="post_head"> <h2><a href="#">How To Design A Better Blog? Break Down The R </header> <p>Once upon a time in World Wide Web a private and personal diary, w <span class="more"><a href="#">Read more</a></span> </div> </article> </div>
<div class="single_post"> <article> <div class="float"> <figure> <img src="images/test2.jpg" alt="test" /> </figure> <footer> <ul> <li><time datetime="2010-04-14" pubdate>April 14, 201 <li>written by <address><a href="#">Mr. Hurley</a></a <li>posted in <a href="#">Web Design</a>, <a href="#" <li><a href="#">Comments (15)</a></li> </ul> </footer> </div>
<div class="art"> <header class="post_head"> <h2><a href="#">Options To Consider When Your Client Is Drivi </header> <p>I guess I would be speaking on your behalf when I say that I feel <span class="more"><a href="#">Read more</a></span> </div> </article> </div> </section> </div>
Below the style for this section.

/* Main container */ #main_content {
11 of 78
8/4/2011 2:09 PM
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;
12 of 78
8/4/2011 2:09 PM
} 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.
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 Ive built the two-columns structure.
<div id="main_content"> <section id="last_posts">
13 of 78
8/4/2011 2:09 PM
 </section> <div class="left_cont"> <section id="archive"> <header class="section_tit"> <h3>Archive</h3> </header>
<ol> <li><article> <figure class="float"> <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></ </header> <p>I guess I would be speaking on your behalf when I say that I feel so grate <footer> <p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Co </footer> </article></li>
<li><article> <figure class="float"> <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="#">Co </footer> </article></li>
<li><article> <figure class="float"> <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 rec <footer> <p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Co </footer> </article></li> </ol> <span class="more_arch"><a href="#">More posts</a></span> </section> <aside class="friends"> <nav> <div class="section_tit"> <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>
14 of 78
8/4/2011 2:09 PM
<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> <section class="about"> <header class="section_tit"> <h3>About me</h3> </header> <div class="about_left"> <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 class="about_right"> <p>Hi, this is M. Hurley, a web designer and developer strangely based in Italy. On <p>Thanks for reading,</p> <p><em>Mr Hurley</em></p> </div> </section> <nav> <div class="section_tit"> <h3>Portfolio</h3> </div> <div class="portfolio"> <ul> <li><a href="#"><img <li><a href="#"><img <li><a href="#"><img <li><a href="#"><img <li><a href="#"><img <li><a href="#"><img </ul> </div> </nav> <section class="contact"> <header class="section_tit"> <h3>Contact</h3> </header> <p>If you are interested in advertising on this blog, you can purchase a banner dire Feel free to follow us on Twitter and to subscribe to our RSS feed. You can also contact directly Mr Hurley, </section> </aside> </div>
src="images/test1.jpg" src="images/test2.jpg" src="images/test3.jpg" src="images/test4.jpg" src="images/test5.jpg" src="images/test1.jpg"
width="110" width="110" width="110" width="110" width="110" width="110"
alt="test" alt="test" alt="test" alt="test" alt="test" alt="test"
/></a></li /></a></li /></a></li /></a></li /></a></li /></a></li
I have to style all these elements, so lets go with CSS rules.

/* Archive - Sidebar */ .left_cont { float: left; width: 447px; margin: 0 16px 16px 16px; } aside { float: right; width: 447px;
15 of 78
8/4/2011 2:09 PM
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;
16 of 78
8/4/2011 2:09 PM
} .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;
17 of 78
8/4/2011 2:09 PM
-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.
Step 7 Finally, just a simple footer I add a simple footer with credits and some information.
<div id="main_content">  <footer class="bottom"> <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 CS </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.
18 of 78
8/4/2011 2:09 PM
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.
Its still evident that there are some problems. Where the background-color for div.art and div.art is? Well, IE doesnt 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 doesnt 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;
19 of 78
8/4/2011 2:09 PM
-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.
20 of 78
8/4/2011 2:09 PM
Testing the template with Google Chrome I said dammit! Why? See how Chrome destroys our efforts in creating a nice read more button.
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.
21 of 78
8/4/2011 2:09 PM
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.
22 of 78
8/4/2011 2:09 PM
23 of 78
8/4/2011 2:09 PM
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 Yes, You Can Use HTML 5 Today! HTML 5 Wikipedia HTML 5 Cheat Sheet (PDF) HTML 5 Doctor HTML 5 Draft Standard HTML 5 and CSS 3: The Techniques Youll Soon Be Using Coding A HTML 5 Layout From Scratch
24 of 78
8/4/2011 2:09 PM
A Preview of HTML 5 Get Ready for HTML 5 Useful readings and resources to learn more about CSS3 Push Your Web Design Into The Future With CSS3 CSS3.info CSS3 Current Work CSS 3 Cheat Sheet (PDF) Cleaner Code with CSS3 Selectors Working With RGBA Colour The Basics of CSS3
Related Posts:
How To Create Depth And Nice 3D Ribbons Only Using CSS3 Nice And Simple Toolbar For Your Website With CSS3 And jQuery DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial Creating a Simple Photo Site From PSD to HTML/CSS (Part 2) How To Realize A News Aggregator Using Simple Pie In An Adaptive Layout
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.
Submit
StumbleUpon 1,334
112
tweets
retweet
431 Comments
Leave Your Commment RSS Feed 1. Reply
25 of 78
8/4/2011 2:09 PM
Francesco Ciabatta April 23, 2010 at 6:03 pm HTML5 is fantastic! Tnx for the tutorial. 2. Reply
Bluefaqs April 23, 2010 at 7:19 pm A very concise tutorial. You did an excellent job of explaining the steps Piervix. Ive about aced CSS3 as far as whats available, but havent messed too much with HTML5. Youve helped to clear up a few things that I wasnt sure about. Thanks! 3. Reply
Richie April 23, 2010 at 8:29 pm Lovely detailed tutorial. One of the best I have seen so far. Thanks Pier :D Reply
bjrldevf February 10, 2011 at 5:59 am GcgrJd iiusgarogkjt, [url=http://ecuqltuvoinl.com/]ecuqltuvoinl[/url], [link=http://yqfipgtgmzop.com /]yqfipgtgmzop[/link], http://cooojkttbtcg.com/ 4. Reply
Lam Nguyen April 23, 2010 at 8:34 pm Very clearly and detailed. Well done, bro! Reply
26 of 78
8/4/2011 2:09 PM
Rami February 21, 2011 at 7:58 am Jouez pour le plaisir ou en rel aux jeux de rami en ligne 5. Reply
Jared April 23, 2010 at 8:46 pm Arrgh This is exactly what I was doing! You beat me to it!! Haha, you did a very nice job on this, and this will actually be very helpful to me. 6. Reply
Mike Smith April 23, 2010 at 8:55 pm WOW. This tutorial is extremely detailed and the final outcome is stunning. Definitely an awesome post and one Ill be bookmarking for later reading (again and again). :) 7. Reply
marbio April 23, 2010 at 9:17 pm Woow..Piervincenzo youre great. This tut rocks :) 8. Reply
clerik April 23, 2010 at 10:19 pm Hell congrats! 9. Reply
Michela April 24, 2010 at 9:24 am We need to start with these new techniques and you explained them very well The layout is very pleasant
27 of 78
8/4/2011 2:09 PM
Congrats Pier :) 10. Reply
piervix April 24, 2010 at 1:21 pm Thank you friend, for all your comments. Appreciated Im glad and honored. You make me feel so good! 11. Reply
j.bentham April 24, 2010 at 3:44 pm nice to see some lost citations.. 12. Reply
Joddy Street April 24, 2010 at 5:41 pm great!! thanx for the tute 13. Reply
hung bui April 24, 2010 at 11:23 pm This tutorial is really helpful for people like me who start digging into HTML5 and CSS3. Great tips. Many thanks. 14. Reply
Mihai O. April 25, 2010 at 10:06 am Great article :) 15. Reply
28 of 78
8/4/2011 2:09 PM
Destry Wion April 25, 2010 at 10:29 am He 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. So, there are no women web designers, or do they just not have your respect? (There is a long list of talented web women, and respect is a two-way street.) Maybe Im old fashioned, but always refer to the woman in your copy and assume the man, never the opposite. Or write your copy so its not gender reliant. Dont mean to put you on the spot, but Im surprised Veerle Pieters, for example, hasnt already popped in here to make the point more poignantly. :) Otherwise, great writeup! Reply
piervix April 25, 2010 at 12:00 pm Im so sorry. The misunderstanding borns because Im italian and here to indicate generic third person (masculine/feminine) we use only he (lui in italian) I know, there many highly-skilled women in web design world I fix to He/she ok? Thanks for the comment, appreciated. 16. Reply
Kim Love April 25, 2010 at 10:45 am Nice article, not read it all yet, will will do later. Noticed your url and a few of your titles mention HMTL rather than HTML (unless theres a funky new mark-up language doing the rounds that has totally passed me by? :) Reply
piervix April 25, 2010 at 1:56 pm fixed Kim. Thank you for the comment I apologize for the typo ;) 17. Reply
29 of 78
8/4/2011 2:09 PM
Amit April 25, 2010 at 11:44 am The layout breaks in IE7. Why doesnt Modernizer take care of IE&? 18. Reply
Tom April 25, 2010 at 12:48 pm Hey, you forgot to clear header_cont, it does not have the correct height. Add overflow:hidden for example and see the difference in firebug. Otherwise nice post :) Regards, Tom Reply
piervix April 25, 2010 at 1:12 pm Do you mean? .header_cont { width: 960px; margin: 0 auto; padding-top: 15px; height: 55px; } I think it is not necessary in this case, the real content is in nav.head_nav and .header_cont h1. Let me know what do you think Tom. Thanks for your comment. Appreciated! 19. Reply
Peter April 25, 2010 at 1:27 pm Wonderful article. However, you have misspelled HTML a number of times throughout your article. HMTL
30 of 78
8/4/2011 2:09 PM
Appears a number of times (over 20times). It should be: HTML Reply
piervix April 25, 2010 at 1:46 pm just typos fixed all! Thanks 20. Reply
Mat_ April 25, 2010 at 3:27 pm Man, you rock. great tutorial! thanks a lot 21. Reply
Ivan April 25, 2010 at 7:50 pm This tutorial is great, verry detailed :-) 22. Reply
Ali April 25, 2010 at 8:25 pm Fantastic tutorial, thanks. 23. Reply
Kristelvdakker April 26, 2010 at 10:11 am why IE!? Why!? You bring me to tears every time! Why cant you love me? Is it so hard for you to work with us in stead of working against us?
31 of 78
8/4/2011 2:09 PM
nice tutorial though! And sorry for the nervous breakdown ;) lol 24. Reply
Dan April 26, 2010 at 9:31 pm Nice. You could even go one more step and use css3 gradients for the header background. header#site_head { background-color: #632327; background-image: url(images/bck_head.jpg); background: -webkit-gradient(linear, left bottom, left top, color-stop(0.38, rgb(89,29,32)), color-stop(1, rgb(123,53,59))); background: -moz-linear-gradient(center bottom, rgb(89,29,32) 38%, rgb(123,53,59) 100%); -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; } BTW, webkits box shadow doesnt support inset yet. Reply
Dan April 26, 2010 at 9:48 pm Sorry, Im mistaken. Its supported in Chome but not Safari. Odd. 25. Reply
Deluxe Blog Tips April 26, 2010 at 10:41 pm Really nice tutorial. I like the way you explain in details. It helps us to better understand. 26. Reply
Jireck April 26, 2010 at 11:58 pm
32 of 78
8/4/2011 2:09 PM
impressive tut ! ! ! Html5 + CSS3 + piervix = Jireck Happy im without words .. Just : thanks !! 27. Reply
Beben April 27, 2010 at 12:36 am awesome for begining to going on future CSShihihihi thanks 28. Reply
ken the tech April 27, 2010 at 1:26 am Just wondering how much time did you spend writing this article. Lucky me, I was looking for a Html 5 + css3 article, and this one is all I want! Thanks mate! 29. Reply
Jerome Bohg April 27, 2010 at 9:21 am Wow, you really spend a LOT of time writing this article. Very detailed. Good tutorial. I know it may not be part of this article but Im sure libraries such as jQuery will also be a big part future webdesign/development. I think the future looks very bright for upcoming websites! Thanks for sharing your knowledge. 30. Reply
Paulius Rasytinis April 27, 2010 at 10:22 am Amazing tutorial and the result by the way. Im glad i read Your blog :) 31. Reply
33 of 78
8/4/2011 2:09 PM
piervix April 27, 2010 at 11:22 am Thanks for your love, friends. Im glad and honored! 32. Reply
Valdecir Carvalho April 28, 2010 at 6:14 am Hi I really love it! How to convert it to a wordpress theme? Is it possible? Thanks a lot! Valdecir Carvalho, S Reply
Daniel April 30, 2010 at 6:16 am Would love to see a WP version as well thats how awesome it is! 33. Reply
le-juge May 10, 2010 at 6:53 pm Awesome post! Thanks for the tutorial! 34. Reply
Mark May 11, 2010 at 3:11 pm Great article! 35. Reply
Tim Read
34 of 78
8/4/2011 2:09 PM
May 16, 2010 at 12:49 am Wow. Great article how do you find time to write it?! 36. Reply
RodgerFox May 16, 2010 at 6:59 pm Terrific! Fascinating. I often read your blog You do not mind if I take the design and make a theme for wp 37. Reply
Sivaranjan May 29, 2010 at 5:34 pm This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :) 38. Reply
AJ June 24, 2010 at 4:04 am What is up with all the ids and classes? This is more like XHTML 1.0 with an HTML5 doctype and a few extra tags. 39. Reply
Stephanie June 25, 2010 at 12:56 am Oh noe! What happened in Chrome 5? Is it just me? 40. Reply
Stephanie June 25, 2010 at 1:15 am Ah, it was just me. Weird conflict btw chrome & electric sheep screensaver.
35 of 78
8/4/2011 2:09 PM
41. Reply
junghae July 23, 2010 at 8:04 am ho, html5. 42. Reply
Jordan Whalen July 24, 2010 at 1:01 am Hey I loved both the design and article maybe I skimmed to much but I really need an answer to this question I havent been able to find he answer anywhere, is building an HTML blog purely for mockup purposes or are you able to add more posts later? Ive already finished learning HTML5 (atleast whats available) and Css3 and I would much rather build blogs in HTML + CSS than have to learn PHP so I can build a custom wordpress theme. Thanks for any help :) 43. Reply
martensms August 11, 2010 at 7:11 am Well, pretty cool article. Its nice to see developers getting to HTML5 already also if IE doesnt support new tags when not using e.g. document.createElement(header) before. But Ive got a question: Why are you using div.single_post instead using article.single_post? ..using only makes sense when you have descriptions or subtitles for images. Using inside is pretty nasty! Theres which would make more sense. Well, and then youve got the advantage for floating instead of div.float =) PS: That were only tipps using the tags the right wayhope that helped a bit. Have a look at my Playground where Im testing out pretty anything on HTML5 , CSS3 and their APIs. Link: http://martens.ms/?q=playground.html Greets, Chris Reply
martensms August 11, 2010 at 7:13 am Well, again (stripped out the opening and close tag)
36 of 78
8/4/2011 2:09 PM
Well, pretty cool article. Its nice to see developers getting to HTML5 already also if IE doesnt support new tags when not using e.g. document.createElement(header) before. But Ive got a question: Why are you using div.single_post instead using article.single_post? ..using _figure_ only makes sense when you have descriptions or subtitles for images. Using _footer_ inside _figure_ is pretty nasty! Theres _figcaption_ which would make more sense. Well, and then youve got the advantage for floating _figure_ instead of div.float =) PS: That were only tipps using the tags the right wayhope that helped a bit. Have a look at my Playground where Im testing out pretty anything on HTML5 , CSS3 and their APIs. Link: http://martens.ms/?q=playground.html Greets, Chris 44. Reply
Cynthia September 17, 2010 at 5:00 am I m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He 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. Thanks for the post. przeprowadzki warszawa 45. Reply
jess October 21, 2010 at 1:58 pm wow! incredible, thanks for the tutorial.. 46. Reply
speedj November 2, 2010 at 12:03 pm dude, youre using too much. the whole idea of the semantic web and html5 is to use as much as descriptive tags as possible. using divs to wrap and stuff is really old fashioned. your css is very bad. css is read from right to left. stuff like section#archive footer p a is very wrong. Google Steve Souders High Performance Web Sites and youll understand. 47. Reply
37 of 78
8/4/2011 2:09 PM
PPeter November 2, 2010 at 12:05 pm It think you should rethink the layout of your website. This is for example a n extremly long page (look at the size of the scroll handle) and thus very annoying to read. Cheers. 48. Reply
jogesh November 3, 2010 at 12:04 am thank to share info. i really need this :) keep it up man. 49. Reply
Fatih YILDIZHAN November 4, 2010 at 3:55 pm wonderfull & amazing, thanks a lot! 50. Reply
Siva November 10, 2010 at 7:13 am Hey dude Fantastic Blog.. im a Tester and till now i din have much interest on web designing but now im very eager to learn it.. Thx a lot dude 51. Reply
vector December 2, 2010 at 7:34 am Thanks! :-) Very useful :-) 52. Reply
38 of 78
8/4/2011 2:09 PM
TheShadow December 3, 2010 at 8:33 am Thanks for this awesome tutorial 53. Reply
aey December 11, 2010 at 9:56 pm this is perfect, thanks for sharing men 54. Reply
MHayes December 16, 2010 at 2:29 pm Wow while I have come across MANY HTML 5 / CSS3 tuts this is glorious I must read and reread and then released under GNU this is too much. Thanks is just not enough but Ill say it again THANKS. Im off to study. This is the first time I encountered your blog but I must come back. 55. Reply
porno December 19, 2010 at 4:06 pm I especially like the Screen Supersize. 56. Reply
abercrombie milano December 29, 2010 at 4:21 am Wow while I have come across MANY HTML 5 / CSS3 tuts this is glorious I must read and reread and then released under GNU this is too much. 57. Reply
39 of 78
8/4/2011 2:09 PM
Tag Your Friends January 10, 2011 at 3:06 am Ive seen several talented creative people designing great stuff with HTML5+CSS3 and you definitely are one of them! Reply
ivan March 20, 2011 at 4:58 pm Good article, well done. 58. Reply
webtrendset January 15, 2011 at 9:50 am Great tutorial of HTML5. Thankyou 59. Reply
Cisco January 26, 2011 at 4:22 am Candidates need to obtain CCNA and CCIE certifications for the cause that essential requirement for acquiring this certificate. Reply
oral b electric toothbrushes February 22, 2011 at 10:01 pm I understand that there are a lot of spam lately. Apparently its pretty hard for people to grasp the concept that relationships can be mutually beneficial. I can leave a meaningful fantastic comment and add content and essence to one of your pages and you will give me a link in exchange. There are too many takers out there and they arent willing to help people out. Take take take! . Reply
40 of 78
8/4/2011 2:09 PM
the best oral b electric toothbrush February 22, 2011 at 11:05 pm This is exactly the information I wanted. Thank you for writing this post in your website. 60. Reply
Mike January 29, 2011 at 10:30 am Great tut! Thanks for posting. Have not read it all yet, but I certainly will. OK, so Im probably a terrible noob, but am I the only one to see the pre sections widen when I hover over them? (width changes from 652 px to 604 px) I see it in all major browsers (IE8, FF3.6, Chrome 8, Opera 11, Safari 4). Two questoins: 1. How do you do it (is it some JS trick)? 2. And why? Thanks again! 61. Reply
Jekre February 1, 2011 at 2:41 am You are awesome! thanks a ton for creating a tutorial like this. Cheers Jekre 62. Reply
free bondage February 8, 2011 at 4:49 pm This is really interesting, You are a very skilled blogger. Ive joined your rss feed and look forward to seeking more of your magnificent post. Also, I have shared your website in my social networks! 63. Reply
Carrie Rath
41 of 78
8/4/2011 2:09 PM
February 9, 2011 at 6:47 am Good recommendations on dogs. I own an 8 yr old golden retriever and I love him to death. Will come back for sure! . 64. Reply
Kaden Hamilton February 9, 2011 at 10:52 am Great tutorial! Very helpful! -Kaden 65. Reply
John979 February 10, 2011 at 1:12 am Very nice site! is it yours too 66. Reply
Free Porn February 10, 2011 at 6:38 am Im impressed, I have to say. Really hardly ever do I encounter a blog thats each educative and entertaining, and let me inform you, youve got hit the nail on the head. Your concept is outstanding; the difficulty is something that not enough individuals are speaking intelligently about. Im very comfortable that I stumbled across this in my search for one thing regarding this. 67. Reply
http://www.pvmgarage.com/2010/04/how-to-create-a-magnifying-glass-icon-in-photoshop/ February 10, 2011 at 8:19 am Finding a web designer can be a total pain.Ive spent 5 hours searching for a decent one and ended up here! 68. Reply
http://www.edparton.com/blog/2010/10/choice/ February 10, 2011 at 9:03 am Finding a web designer can be a total pain.Ive spent 5 hours searching for a decent one and ended up here!
42 of 78
8/4/2011 2:09 PM
69. Reply
http://www.lucascobb.com/inspiration-old-tyme-painted-signs/ February 10, 2011 at 9:05 am Finding a web designer can be a total pain.Ive spent 5 hours searching for a decent one and ended up here! 70. Reply
http://www.sott.net/articles/show/216860-Is-Atheism-a-BeliefFebruary 10, 2011 at 9:13 am Finding a web designer can be a total pain.Ive spent 5 hours searching for a decent one and ended up here! 71. Reply
http://www.jobrapido.co.uk/?q=vb+wroot February 10, 2011 at 9:16 am Finding a web designer can be a total pain.Ive spent 5 hours searching for a decent one and ended up here! 72. Reply
facebook video February 10, 2011 at 3:32 pm Sorry for the huge review, but Im really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if its the right choice for you. 73. Reply
videos February 10, 2011 at 3:56 pm Ill gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.) 74. Reply
43 of 78
8/4/2011 2:09 PM
IndellDed February 10, 2011 at 9:42 pm , . . . 75. Reply
iphone for free February 11, 2011 at 4:38 am hey there fantastic blog website and theme. Im hoping Im not bothering you I merely wanted to ask just what wordpress plugin you use to show the latest remarks on your blog? I really wish to do the same for my free iphone 4 page but I cant acquire the plugin or widget for it. Thanks a lot for your time :) 76. Reply
tipLeteOpebrA February 12, 2011 at 3:06 am Overview of US restaurants. In-N-Out Burger 77. Reply
illurnaliep February 12, 2011 at 5:41 am Hi 78. Reply
Telma about mobile phones February 12, 2011 at 5:49 am Hi I am so delighted I found your blog, I really found you by accident, while I was researching on Askjeeve for something else, Anyhow I am here now and would just like to say thanks for a fantastic post and a all round entertaining blog (I also love the theme/design), I don? have time to read it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read much more, Please do keep up the fantastic job.
44 of 78
8/4/2011 2:09 PM
79. Reply
free iphone February 12, 2011 at 6:59 am hey cool website and web theme. I am hoping I am not pestering you I simply wished to inquire precisely what wordpress plugin you use to display the latest feedback on your blog? I really want to do something similar for my free iphone page however I cant locate the plugin or widget for it. Thanks a lot for your time :) 80. Reply
webhosting kostenlos February 12, 2011 at 3:04 pm Hello I must say, Im impressed with your site. I had no trouble navigating through all the tabs and information was very easy to access. I found what I wanted in no time at all. Pretty awesome. Would appreciate it if you add forums or something, it would be a perfect way for your clients to interact. Great job 81. Reply
general car insurance February 12, 2011 at 9:41 pm This website is really a stroll-by for the entire info you needed about this and didnt know who to ask. Glimpse here, and youll definitely discover it. 82. Reply
Delia mobile dual February 13, 2011 at 12:49 pm When I initially commented I clicked the Notify me when new comments are added checkbox and now each time a comment is added I get several e-mails with the same comment. Is there any way you can remove me from that service? Appreciate it! 83. Reply
cheap car insurance in florida February 13, 2011 at 1:12 pm very good put up, i definitely love this website, carry on it 84. Reply
45 of 78
8/4/2011 2:09 PM
penis enlargement February 14, 2011 at 3:02 am RE: Its so hard to get backlinks these days, honestly i need a backlink by comments on your blog / forums or guestbook to make my website appear in search engine. I am getting desperate Now! I know youll laugh while reading this comment !!! Here is my website vimax|bigger penis|penis enlargement pills|penis enlargement pills|penis enlargement|download youtube videos|penis enlargement pills|Vimax|penis enlargement I know my comments do not relate to the topic, but PLEASE HELP ME!! APPROVING MY COMMENT! So what is the problem my friends, Im collecting backlinks to make my website vimax|bigger penis|penis enlargement pills|penis enlargement pills|penis enlargement|weight loss program|penis enlargement pills|Vimax|penis enlargement appear in the search engines!! whether are the comments look like a crap! BH2011titit 85. Reply
Web designer Singapore February 14, 2011 at 4:03 am Give more ideas for the future in the next article in this blog. Ill waiting for that ideas. 86. Reply
cheap car insurance in florida February 14, 2011 at 7:59 am very nice put up, i actually love this web site, keep on it 87. Reply
Gorgyh February 14, 2011 at 8:25 am Hi Guys, As this is my initial submit here I would like to share something helpful with you all , the other day I ran across among the best website online , you can add your online back links as well as ad banners coming from clickbank.com,offers of cpa,and so on.. its still fresh site yet I do believe truly useful to each internet marketing out there Link : http://craigpress.com/offer/ in the event that publish beneficial do not forget to say thanks :) 88. Reply
46 of 78
8/4/2011 2:09 PM
SmfruikPnari February 14, 2011 at 5:45 pm 89. Reply
penis health February 14, 2011 at 6:02 pm Thanks as a replacement for winning the at all times to talk atop of this, I stand strongly far it and honey erudition more on this topic. Naturamax 90. Reply
acai testimonials February 14, 2011 at 10:26 pm Acai berry??(weight loss)??? H E L P?okay so i heard from multiple sources that acai berries can help you loose weight. i know that there is a make of the acai berry or something like that. would i loose weight if i took the acai berry vitamins say from walmart or cvs?the acai berry vitamins say that its made from pure acai berries, exactly the same thats in certain dietary supplements? would it still have effect on my weigh loss? please answer. and thanks in advance. 10 points to the best answer! :) 91. Reply
liciliseo February 15, 2011 at 8:47 am viagra buy cialis online buy viagra 92. Reply
Edgar Leghorn February 15, 2011 at 5:54 pm Hands down, Apples app store wins by a mile. Its a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but Im not sure Id want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.
47 of 78
8/4/2011 2:09 PM
93. Reply
dedaBrurbibre February 15, 2011 at 10:39 pm Zithromax Stomach Ache Loose Stools Lyrica Vs Wellbutrin Ativan 2Mg Buy Zithromax And Sun Sensitivity Flonase Commercials Cialis Blood Pressure Cialis Prostate Zetia No Prescription Wellbutrin Sr Buy Clonazepam 2Mg Zithromax Gonorrhoea Nursing Indications For Zithromax How Long Before Wellbutrin Starts To Work Borderline Personality Disorder Will Zithromax Cure Gonorrhea Buy Lorazepam 2mg Switch From Cymbalta To Wellbutrin Cialis And Back Pain Prostate Cancer Cialis Drug Cialis Benifets Wellbutrin Sr 150mg Buy Download Tadalafil Prescription Online Cialis Yahoo Cialis Buy Cheap Brand Cialis Medication Headache Wellbutrin Dry Mouth Buy Cialis 20 Mg Cialis Shortness Of Breath Zithromax For Otitis Streptococcus Pneumoniae Zyvox And Wellbutrin Prescription How Long Does Cialis Stay In Your System Expiration Date Zithromax 250 Mg Buy Cialis In Young Wellbutrin Sr Online Consultation Now Viagra Vs Cialis Professional 94. Reply
regcure February 16, 2011 at 3:15 am thought provoking comments here 95. Reply
webhosting joomla February 16, 2011 at 3:45 pm nsightful thoughts here. Are you certain this is the best way to look at it though? My experience is that we should pretty much live and let live because what one person thinks just another person simply doesnt. People are going to do what they want to do. In the end, they always do. The most we can yearn for is to highlight a few things here and there that hopefully, allows them to make just a little better informed decision. Otherwise, great post. Youre definitely making me think! Barry 96. Reply
Mitchel Cogdell February 17, 2011 at 2:24 am thats a good article. Thank you i wish your article will be continue. 97. Reply
loaccefly
48 of 78
8/4/2011 2:09 PM
February 17, 2011 at 7:26 am . 98. Reply
Gregory Despain February 17, 2011 at 1:48 pm I was recommended this web site by my cousin. Im not sure whether this post is written by him as nobody else know such detailed about my trouble. Youre amazing! Thanks! 99. Reply
Kasandra Driere February 17, 2011 at 7:34 pm Can I just say what a relief to find somebody who really knows what theyre talking about on the internet. You positively know tips on how to convey a problem to gentle and make it important. More people need to read this and perceive this side of the story. I cant imagine youre not more popular since you positively have the gift. 100. Reply
Building Backlinks February 17, 2011 at 10:52 pm Great blog here i like all the information thats being shared, congratulations. 101. Reply
Andrew A. Sailer February 18, 2011 at 5:48 am The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future itll do even better in those areas, but for now its a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPods strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice. 102. Reply
motors security system
49 of 78
8/4/2011 2:09 PM
February 18, 2011 at 8:39 am Id be a refrigerator, Im full of things that satisfy the people I care for and their friends weird I know but Im hella hungry right now. 103. Reply
webhosting vergleich February 18, 2011 at 9:44 am Thanks for sharing, please keep an update about this info. love to read it more. i like this site too much. Good theme ;). 104. Reply
bookmarking-demon February 18, 2011 at 9:56 am http://www.bo-oks.info/bookmarking-demon/ http://www.bo-oks.info/adonis-effect/ http://www.bo-oks.info/autoblog-samurai/ http://www.bo-oks.info/fapturbo/ http://www.bo-oks.info/fat-burning-furnace/ http://www.bo-oks.info/fat-loss-4-idiots/ http://www.bo-oks.info/forex-megadroid/ http://www.bo-oks.info/forex-nuke/ http://www.bo-oks.info/get-paid-to-draw/ http://www.bo-oks.info/forex-powerband-dominator/ 105. Reply
jameco industries February 18, 2011 at 11:28 am Nahh, but I did burn pop corn. It was all black. I put it in for 5 minutes and it was all black XD 106. Reply
Wekendanind February 18, 2011 at 3:48 pm 107. Reply
50 of 78
8/4/2011 2:09 PM
christophe February 18, 2011 at 4:41 pm Very good tutorial thanks !! I followed it to create my business website: http://www.rougesurblanc.com 108. Reply
Pharme488 February 18, 2011 at 9:29 pm Hello! bbegddd interesting bbegddd site! 109. Reply
Tibetan Jewelry February 19, 2011 at 4:10 am Thanks for the essay loaded with so many news. Stopping by your essay helped me to get what I was looking for. 110. Reply
auto approve backlinks February 19, 2011 at 4:30 am I found your weblog site on google and verify a number of of your early posts. Continue to maintain up the excellent operate. I just extra up your RSS feed to my MSN Information Reader. Seeking forward to reading extra from you afterward! 111. Reply
IaJmjF February 19, 2011 at 5:43 am qshkQtWS 112. Reply
51 of 78
8/4/2011 2:09 PM
Marcel Spoerl February 19, 2011 at 10:48 am Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something informative to read? 113. Reply
payday loan lenders February 19, 2011 at 12:36 pm Precisely what web browser is this internet page optimized for Chrome? 114. Reply
milwaukee combo February 19, 2011 at 5:03 pm I used to be very happy to search out this internet-site.I wanted to thanks to your time for this excellent learn!! I definitely having fun with every little bit of it and I have you bookmarked to take a look at new stuff you blog post. 115. Reply
oiculesEo February 19, 2011 at 6:10 pm thanks for this nice post 111213 116. Reply
Pseultall February 20, 2011 at 8:05 am Zithromax Z Pak Generic Oral Suspension [url=http://www.box.net/shared/p055enuo19 ]Diazepam 5mg Buy[/url] Unmarked Valium Generic Name Vitamin D And Osteoporosis Bone Health Valium For Dog Breeds Drug Test For Diazepam [url=http://www.box.net/shared/ym7hpmk8sc ]Buy Diazepam 10mg[/url] Zithromax Long Term Otitis Media Cialis Contradictions 2g Azithromycin Zithromax Percocet Valium Stronger [url=http://www.box.net/shared /dgbkgx6gk2 ]Valium 10 mg Buy[/url] Diazepam Symptoms Ginseng Nausea Health Benefits Diabetes Nz Healthy Food Choices Valium L522 Buy Generic Cialis With Online Consultation [url=http://www.archive.org/details /HealthcareDegreeOnline ]Health Care Degree[/url] Seropositive Arthritis Health Pink Eye Zithromax Prescription Significance Of Asthma Health Natural Alternatives Cialis [url=http://www.box.net/shared/dfr9r0rrm6 ]Cialis 20mg Or 10mg[/url] Valium Rebound Grammar Zithromax Hoosier Healthwise Plan B Insurance Program Nutrilite Saw Palmetto Healthy Prostate [url=http://www.box.net/shared/opnhfe5ase ]Zithromax 250mg[/url] Tools To Check Blood Pressure Health Diazepam Autoinjector Post Cialis Canada
52 of 78
8/4/2011 2:09 PM
117. Reply
queclassunc February 20, 2011 at 10:54 am thanks for this nice post 111213 118. Reply
dukan diet February 20, 2011 at 2:52 pm There may be noticeably a bundle to know about this. I assume you made sure nice factors in features also. Reply
Dukan Diet March 1, 2011 at 2:38 am Heh, what do you know about the dukan diet. 119. Reply
garage door repairs london February 20, 2011 at 3:10 pm I am usually to blogging and i really admire your content. The article has really peaks my interest. I am going to bookmark your site and preserve checking for new information. 120. Reply
pheromones that are real February 20, 2011 at 4:20 pm Hmmm I cannot seem to access a couple of your links. I wonder if it is my firefox browser or your homepage. 121. Reply
Pregnancy For Dads February 20, 2011 at 4:30 pm
53 of 78
8/4/2011 2:09 PM
A Practical Pregnancy Diet Plan 122. Reply
milwaukee drill 18v February 20, 2011 at 5:49 pm You made some first rate factors there. I appeared on the web for the problem and located most individuals will associate with along with your website. 123. Reply
Franklyn Hollo February 20, 2011 at 8:15 pm I just want to say I am all new to blogs and really enjoyed your web site. Likely Im want to bookmark your blog . You actually have beneficial writings. Many thanks for sharing your website page. 124. Reply
Saurabh Nagar February 20, 2011 at 10:56 pm Awesome tutorial man!! but i wonder why is my firefox in trouble, any hack for that? 125. Reply
EzineArticles February 20, 2011 at 11:58 pm There is obvisously a lot to know about this. I think you made some good points in Features too. Great Job. 126. Reply
salony slubne February 21, 2011 at 3:18 am I am going to go ahead and bookmark this post for my brother for the study project for school. This is very interesting. This post truly made my day suknie na lub.. Can I give you an opinion? I just wanted to take a minute to say thanks for posting this The way you write make it truly trouble-free to read.. Use a good day! 127. Reply
54 of 78
8/4/2011 2:09 PM
acne scar treatments February 21, 2011 at 4:45 am I stumbled upon your site in bing. And I will be back next time, thanks. 128. Reply
best acne scar treatments February 21, 2011 at 4:49 am After reading your post, I thought your ideas were very simple but as I kept reading on, I do see you have a point. Keep on writing, I will keep on stopping by to read your new content. 129. Reply
Luigi Fulk February 21, 2011 at 5:43 am Hey there! Im a first time reader of your blogwanted to let you know that its very informative and to keep up the great work! Looking forward to your future articles! 130. Reply
natural beef jerky February 21, 2011 at 7:11 am I understand that there are a lot of spam lately. Apparently its pretty hard for people to grasp the concept that relationships can be mutually rewarding. I can leave a meaningful great comment and add content and substance to one of your pages and you will give me a link in exchange. There are too many takers out there and they arent willing to help people out. Take take take! . 131. Reply
Apple iPod shuffle 2 GB Blue February 21, 2011 at 7:19 am Howdy! I just would like to give a huge thumbs up for the good information you might have here on this post. I will likely be coming again to your blog for extra soon. 132. Reply
55 of 78
8/4/2011 2:09 PM
Shenna Rosella February 21, 2011 at 7:20 am hi, solid web log, just I dont see how to add your website in my rss reader. Could are Assist me please? Reply
Match en direct February 21, 2011 at 7:27 am thank you for work ;)
Score en direct February 21, 2011 at 7:51 am voir les match en direct et foot en direct en streaming football 133. Reply
casino February 21, 2011 at 7:41 am Jouez aux machines sous sur le meilleur casino en ligne Reply
Turf February 21, 2011 at 7:54 am Parier au PMU et Zeturf sur les meilleurs sites de paris hippiques 134. Reply
Sleeping Basics When Pregnant February 21, 2011 at 8:34 am
56 of 78
8/4/2011 2:09 PM
how to send you an email? let us get closer 135. Reply
internet monitoring February 21, 2011 at 10:10 am This is a good look into the arena of this subject. I have gained a lot from you and am thankful. I will bookmark it and let other folks know about it. Be Good! 136. Reply
recommended books for children February 21, 2011 at 10:15 am If you people have nothing to say about the post topic then do not say anything at all. You guys are obviously just spamming. Please refrain from such indecent behavior . 137. Reply
best books for children February 21, 2011 at 11:43 am You have a really useful homepage. I have been here reading for about 40 mins. I am a newbie and ur knowledge is very useful to me. 138. Reply
blue mountain coffee February 21, 2011 at 1:11 pm You have a very useful blog. I have been here reading for about 30 mins. Im a new and your education is very useful to me. 139. Reply
scrapebox February 21, 2011 at 4:14 pm There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM 140. Reply
57 of 78
8/4/2011 2:09 PM
top colon irrigation February 21, 2011 at 6:41 pm I found your website in google. And Ill be back next time, thanks. 141. Reply
tankyek February 22, 2011 at 12:22 am This actually answered my drawback, thanks! 142. Reply
sinema izle February 22, 2011 at 5:13 am your text is really good. i will share your article on facebook and twitter. 143. Reply
oral b electric toothbrush whiten teeth February 22, 2011 at 10:15 pm I appreciate the time you put in this work or in this article. Although you have interesting ideas, I really cannot agree with them. Im sure there are better ways to walk through this difficult situation. Not trying to insult or be stupid or anything . 144. Reply
viagra February 23, 2011 at 3:24 am MgYALCf http://bjfqtv.com/ xbfVxbM [url=http://jbgzxp.com/]xbfVxbM[/url] 145. Reply
best pheromone cologne February 23, 2011 at 1:16 pm
58 of 78
8/4/2011 2:09 PM
Can I give you an opinion? Do you think you could add a couple more in the way of content in this post? I think youve got some good points, but Im just not sold. Maybe you could add a few more resources to your blog. 146. Reply
http://www.howtogetmyexback.net/ February 23, 2011 at 7:15 pm There are some attention-grabbing cut-off dates in this article but I dont know if I see all of them heart to heart. Theres some validity however I will take maintain opinion till I look into it further. Good article , thanks and we would like more! Added to FeedBurner as effectively 147. Reply
Lashaun x431 pc center February 23, 2011 at 8:29 pm Hello! Do you know if they make any plugins to help with SEO? Im trying to get my blog to rank for some targeted keywords but Im not seeing very good results. If you know of any please share. Thanks! 148. Reply
fdasf March 2, 2011 at 4:06 pm test 149. Reply
Annika Thielges March 10, 2011 at 9:49 am Awesome website you have here by the way 150. Reply
Target Promo Code March 14, 2011 at 1:43 pm Hey there just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Firefox. Im not sure if this is a formatting issue or something to do with browser compatibility but I figured Id post to let you know. The design and style look great though! Hope you get the issue fixed soon. Cheers!
59 of 78
8/4/2011 2:09 PM
151. Reply
Kat Skinner March 14, 2011 at 8:13 pm The layout of the thumbnails, meta data and post excerpt from this article was a major influence for my current site design http://www.katskinner.com. Thanks for the inspiration! 152. Reply
Matt Smith March 18, 2011 at 6:53 pm Looks like the html5 spec has changed since you published this. Just tried the demo and the page was all sorts of garbled in the most recent Chrome and Firefox betas. Ironically, your compatibility layer made the ie8 version work perfectly though. :p 153. Reply
Hospital March 21, 2011 at 5:58 pm Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog Hospital Porn mp3 154. Reply
Zigi March 25, 2011 at 7:39 am the project looks broken in Chrome 10.. now! whats the cause? Reply
cga March 28, 2011 at 10:08 am It is broken not only in Chrome but in *any* HTML5 capable browser but Safari on Mac.
60 of 78
8/4/2011 2:09 PM
I fixed it by adding figure (and figcaption because i use that) to the very first declaration: body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button, figure, figcaption { hope this help everyone. 155. Reply
how do i jump higher March 26, 2011 at 4:44 am Have you ever thought about including a little bit more than just your articles? I mean, what you say is valuable and everything. However imagine if you added some great images or video clips to give your posts more, pop! Your content is excellent but with images and video clips, this site could undeniably be one of the most beneficial in its niche. Amazing blog! 156. Reply
Emma March 28, 2011 at 6:49 am cialis en ligne rien de mieux 157. Reply
youporn.com March 31, 2011 at 2:53 pm Youplaisir.com is from far the number 1 website in france in April 2011 158. Reply
Tim Nam April 4, 2011 at 5:14 am Hi admin, Your tutorial is very useful for a HTML5 beginner like. I will read it again & follow your guides carefully. Thank alot for sharing. Tim 159. Reply
61 of 78
8/4/2011 2:09 PM
Tutorial Lounge April 5, 2011 at 4:30 am i really like your technique and using in my roundup. thanks 160. Reply
business plan goals April 6, 2011 at 12:13 am can you suggest me best book to learn html5 161. Reply
rihana0786 April 7, 2011 at 7:06 am Amazing work! The comprehensive data given was extremely helpful. I am hoping you carry on with the great job done. Locksmith Norwalk 162. Reply
technocket April 7, 2011 at 8:13 pm very good article ,thanks for this information, ilike this 163. Reply
Shellie Ribaudo April 8, 2011 at 3:10 am Good post. I study something more challenging on completely different blogs everyday. It should always be stimulating to learn content from other writers and follow somewhat something from their store. Id prefer to make use of some with the content on my weblog whether or not you dont mind. Natually Ill provide you with a link in your internet blog. Thanks for sharing. 164. Reply
pissing tube April 18, 2011 at 6:15 am
62 of 78
8/4/2011 2:09 PM
Watch hundreds of completely free peeing clips! 165. Reply
Spanferkelgrill April 19, 2011 at 10:57 am But a smiling visitant here to share the love (:, btw great style and design . 166. Reply
Patsy Kry April 22, 2011 at 12:55 pm Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossip and web stuff and this is really frustrating. A good blog with interesting content, thats what I need. Thank you for making this web-site, and I will be visiting again. Do you do newsletters? I Can not find it. 167. Reply
Ifeoma Beard April 26, 2011 at 2:24 pm hi there %BLOGINTITILE% owner. i want to say that %BLOGINTITLE% is actually nice and the post was excellant. it appears that youve got lots of visitors on your blog. i have started off blogging couple of weeks back and im still struggling to get any visitors to my blog. i would really really like it if you ever go to my blog and comment on the posts. even though the blog is entirely new, still there is certainly some great content on it. i hope youll enjoy reading it. Cheers Ifeoma Beard 168. Reply
Martin April 27, 2011 at 3:39 pm I have been here reading for about 30 mins. 169. Reply
HL April 28, 2011 at 4:44 am Hi,
63 of 78
8/4/2011 2:09 PM
Excellent walk-through! But UI breaks when opened in Firefox 4. Can you suggest the way to resolve it? Thanks. HL 170. Reply
vaporizer April 28, 2011 at 10:38 pm Nice tips ! Im just getting on html 171. Reply
cell phone tips April 29, 2011 at 12:35 pm I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. Its pretty worth enough for me. Personally, if all webmasters and bloggers made good content as you did, the internet will be a lot more useful than ever before. 172. Reply
Kitchen Colours April 29, 2011 at 2:35 pm Lol! That is funny! Me like your site. 173. Reply
Curtis Wiens May 2, 2011 at 10:19 am I noticed this site does not work in Chrome. 174. Reply
Wiaty ogrodowe May 12, 2011 at 1:06 pm Is that going well with IE, firefox and Opera?
64 of 78
8/4/2011 2:09 PM
P.S. Very good post. 175. Reply
Puebla real estate May 12, 2011 at 2:36 pm Simply want to say your article is as amazing. The clarity in your post is just excellent and i could assume you are an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please keep up the rewarding work. 176. Reply
jouer au poker gratuitement May 13, 2011 at 7:59 pm jeux de poker gratuit sans telechargement poker gratuit hold em poker online sfr casio online strip poker flash service jouer au poker jeux de poker en anglais jouer au poker gratuit sans tlchargement auchan online meilleur jeux de poker en ligne poker flash valeur des jetons au poker jouer a la belote poker 177. Reply
Disney vacation tips May 14, 2011 at 7:59 pm This web site is known as a stroll-via for all the information you wished about this and didnt know who to ask. Glimpse right here, and also youll definitely discover it. 178. Reply
Adventures May 16, 2011 at 5:38 am Nice post. Very helpful :) 179. Reply
Der Kieler May 18, 2011 at 3:11 pm Thanx a lot for that one ! 180. Reply
65 of 78
8/4/2011 2:09 PM
promise rings for girlfriend May 21, 2011 at 1:03 am Hey you know what, I am still dependent to those free templates. 181. Reply
georgetown youth baseball May 23, 2011 at 10:23 pm i do not believe they are using scapelist 182. Reply
z May 24, 2011 at 9:12 am Comfortably, the post is during truthfulness a hottest on this subject well known subject matter. I agree with ones conclusions and often will desperately look ahead to your updaters. Saying thanks a lot will not just be sufficient, for ones wonderful ability in your producing. I will immediately grab ones own feed to stay knowledgeable from any sort of update versions. get the job done and much success with yourbusiness results! 183. Reply
best hair straighteners May 25, 2011 at 7:52 am Thanks for the tutorial, it really helped me a lot as I just started to learn about CSS, always wanted to modify and make my site look slightly different than the original theme, thanks again! 184. Reply
Luxury Mykonos Villas May 26, 2011 at 9:23 am Really informative post. Thank you! 185. Reply
66 of 78
8/4/2011 2:09 PM
Trek Bikes May 27, 2011 at 5:29 pm Attractive section of content. I just stumbled upon your web site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Anyway Ill be subscribing to your feeds and even I achievement you access consistently rapidly. 186. Reply
Maan May 30, 2011 at 7:40 am Thanks for sharing , its really nice :) 187. Reply
papi underwear May 31, 2011 at 7:27 am Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I get in fact enjoyed account your blog posts. Any way Ill be subscribing to your feeds and even I achievement you access consistently quickly. 188. Reply
Cloud9 June 3, 2011 at 1:57 pm What version of html do programs like Dreamweaver 4 use? 189. Reply
youporn June 4, 2011 at 2:03 pm Youcharme is becoming one of the best website without ads in France in 2011 190. Reply
bird feeder June 10, 2011 at 9:25 pm good stuff, thank you for the great content youve put up on you blog.
67 of 78
8/4/2011 2:09 PM
191. Reply
Abu dhabi city tour June 18, 2011 at 4:05 pm The most important thing is to share the true said as i can see it around. 192. Reply
minimum June 20, 2011 at 11:55 am Thanks for this very helpful tutorial ..! 193. Reply
plate joiners June 20, 2011 at 3:23 pm Thats really true said,i am some how agree with what you said. 194. Reply
plate joiner June 20, 2011 at 5:33 pm Its a great opportunity to be here,Once again i will visit this page. 195. Reply
chapter5 June 22, 2011 at 7:10 pm not working in firefox 5. 196. Reply
Brazos Place Condos June 26, 2011 at 5:40 am
68 of 78
8/4/2011 2:09 PM
The Brazos Place Condos are one of Austins most recent office building to condo conversion projects and it has a very rich history. Hugo Franz Keuhne, founder of the School of Architecture at the University of Texas, designed The Commodore Perry Hotel in 1948. The hotel was converted into an office building and renamed One Commodore Plaza in 1984. In 2006 2007, under the direction of Pomeroy Reinhart Stration Development (PRS Development), it has been transformed into mixed-use development offering luxury condominium residences, a smartly-planned office condominium and two levels of convenience and retail. 197. Reply
Bingo June 28, 2011 at 4:14 am Thanks for your comment ;) 198. Reply
kifit July 1, 2011 at 5:11 am thx for the post dude 199. Reply
streaming July 1, 2011 at 5:12 am nice post man, i love it 200. Reply
vieilles July 1, 2011 at 5:12 am nice post dude, you rock 201. Reply
film x July 1, 2011 at 5:14 am wouhah ! A great post man 202. Reply
69 of 78
8/4/2011 2:09 PM
Renate Poper July 4, 2011 at 4:56 am This was definitely a great and enjoyable post. On the other hand I am having trouble getting this site to show correctly with this chrome browser, any kind of suggestion what exactly could be the problem? 203. Reply
Discount Hermes July 5, 2011 at 5:20 pm The crucial indicate realize is that this is applicable not just in , but also to. 204. Reply
Blackjack July 6, 2011 at 7:42 am Superbe article qui ma aid a optimiser le design de mon site de blackjack. 205. Reply
Downloadcrackedapps July 6, 2011 at 9:18 pm Realy good site,thank you so much for your time in writing the posts 206. Reply
tabletpcunion July 7, 2011 at 11:32 am Great post. You show very detailed skills. I will try it. thanks for sharing. 207. Reply
Sri July 11, 2011 at 12:26 am
70 of 78
8/4/2011 2:09 PM
Great tutorial but why would anyone like to sit and code 10 to 20 pages of code.. to achieve something tat can be easily done using flash..!! 208. Reply
Clara July 12, 2011 at 1:12 pm Hi I downloaded the images and typed up the code but the images wouldnt show on the browser, then I copied and pasted the same code directly from the site and they showed up without a hitch, Ive compared the two with a fine tooth comb and theyre identical but the images refuse to show when I type the code in? If you have any idea why this may be happening Id appreciate your help. Thanks. 209. Reply
cleveland granite July 13, 2011 at 12:53 am This is certainly one of the better tutorials Ive seen in a while. By the way, I like the look and layout of this blog its easy on the eyes. 210. Reply
poker July 13, 2011 at 1:29 pm Thanks for expressing your ideas with this blog. Ive learned quite a few important things by means of your post. 211. Reply
cheap hats July 15, 2011 at 10:44 pm Thank you! This is a good article! Thank you for sharing! 212. Reply
Evan July 19, 2011 at 6:50 pm Html 5 is indeed the way to go. Great way to design nice looking websites. 213. Reply
71 of 78
8/4/2011 2:09 PM
Lena Xs July 25, 2011 at 12:17 pm The steps are easy to follow!Very good work!fgfdh Irina T. 214. Reply
rowruffdesign July 28, 2011 at 7:47 am It doenst work on Google Chrome you get a really wierd upset from the design greats 215. Reply
Renato Reis July 30, 2011 at 12:20 pm Adorei! 216. Reply
glass whiteboard August 1, 2011 at 1:35 pm I think this is one of the most vital information for me. And i am glad reading your article. But should remark on few general things, The website style is wonderful, the articles is really great : D. Good job, cheers Trackbacks 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Touch The Future: Create An Elegant Website With HMTL 5 And CSS3 Touch The Future: Create An Elegant Website With HMTL 5 And CSS3 Type How do I hide files in my computer that would only make it possible for me to view? Touch The Future: Create An Elegant Website With HMTL 5 And CSS3 | PV.M Garage Web Design Touch The Future: Create An Elegant Website With HMTL 5 And CSS3 | PV.M Garage Netcrema creme de la social news via digg + delicious + stumpleupon + reddit Creaza un website elegant in HTML5 si CSS 3 | WorldIT Most Tweeted Articles by Designer Experts Touch The Future: Create An Elegant Website With HTML 5 And CSS3 | Source code bank Touch The Future: Create An Elegant Website With HTML 5 And CSS3 | PV.M Garage Internet Brain HTML5 / CSS3?????????????????? / TEL CREATIVE DATABASE ????????????????????????? links for 2010-04-25 Donghai Ma links for 2010-04-25 doug off the record
72 of 78
8/4/2011 2:09 PM
13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71.
All There Is To Know About HTML5 and CSS3 | Design your way Top Worthwhile Tutorials of the Week links for 2010-04-26 | Michael Ong | On9 Systems Elegant website : HTML5 & CSS3 Touch the future! Ronald Jusuf's Virtual Ramblings Touch The Future: Create An Elegant Website With HTML 5 And CSS3 | Design Newz 15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials Pattern Inc 15 Useful HTML5 Tutorials and Cheat Sheets 15 Useful HTML5 Tutorials and Cheat Sheets 15 Useful HTML5 Tutorials and Cheat Sheets - Programming Blog 15 Useful HTML5 Tutorials and Cheat Sheets | Duong Luat 15 Useful HTML5 Tutorials and Cheat Sheets : Web Lime Design and IT blog Useful HTML5 Tutorials and Cheat Sheets Caintech.co.uk 15 Useful HTML5 Tutorials and Cheat Sheets | The New Drop KopfPit Weblog Bookmarks vom 25.04.2010 bis zum 29.04.2010 15 Useful HTML5 Tutorials and Cheat Sheets | Focus of Photography EastZoneSoupCube - links for 2010-04-29 A Single Website To Win Them All [Linkdump #3] 1, 2, 3, 4 HTML5! Tomasz Kowalczyk Notable Tech Posts 2010.05.02 | The Life of Lew Ayotte Aafrin.com - 10 Learn To Code Site In CSS3/HTML5 Tutorial Resources HTML 5 Max Studio Pro MyInkTrail: Best of the Design Community, April 2010 | MyInkBlog MyInkTrail: Best of the Design Community, April 2010 | crazyegg.net MyInkTrail: Best of the Design Community, April 2010 - Programming Blog ??Html5???15????? | ?7?? 15? HTML5 ??????? - ???? HTML5????????? - Parazzi Touch The Future: Create An Elegant Website With HTML 5 And CSS3 | Website Development And Techno News What company do games workshop use to ship online orders? Gad-tech.com Google Adsense help!!!!!.. Wat can be wrong?? | The Blogging Expert 10 plantillas HTML5/CSS3 para ir practicando | Recursos para Dise 10 plantillas HTML5/CSS3 | RiCoTeRo X Blog 10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow) | Site Design Tips 10+ Free HTML5-CSS3 Website Templates | WebDesign Collection What is the best web development tool for mac? 9 CSS3 Tools + 20 hilfreiche CSS3 Ressourcen | hpvorlagen24 Webdesign Magazin ???????30?HTML5????-??? ???????30?HTML5???? ?????????30?HTML5???? | ?cake??? ???:???????30?HTML5???? : 20g:??? ?? ?? ?? ?? ?? ?? ???????30?HTML5???? | ?? ???????30?HTML5???? Lamtin's BLOG ???????30?HTML5???? | Magento Template | Magento Theme | Magento Skin | Magento Design ???????30?HTML5???? - ???? ???????30?HTML5???? - MacDesign MacDesign.Cc 60 Tutorials, Articles and Resources to Learn HTML5 ???????30?HTML5???? | ???? 30?HTML5????,??????? | Adobe CS5 10 + HTML5-CSS3 Website Template: progettiamo il web di domani! | paitadesignblog ???????30?HTML5???? - WebGIS?? ???????30?HTML5???? | ????? 15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com Anonymous Anonymous 30?HTML5???? | Insbire's Blog ??Z?? ??X?? ???????30?HTML5???? ??????30?HTML5???? i??? ???????30?HTML5???? | ????????-??????????
73 of 78
8/4/2011 2:09 PM
72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127.
TemplateLand Blog Blog Archive 25 Essential HTML5 Tutorials and Techniques Free HTML5 CSS3 Website Templates | Beat Fly Blog | tutorial photoshop jquery css Blog Archive html5Touch The Future: Create An Elegant Website With HTML 5 And CSS3 30HTML5 - Blog.Parse(typeof(PsychoCoder), Richard McCutchen); Blog Archive Useful HTML5 Tutorials & Snippets 25 tutoriales y tcnicas esenciales para HTML5 Damaris's Blog 30HTML5 | Fabian-Design.de - Preiswertes Webdesign | Blog HTML5 | DesignWalkerdesignwalker.com | PORTFOLIO -POST Links for June 28, 2010 jmock.me Anonymous 10+ Free HTML5+CSS3 Website Templates | 30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers | tripwire magazine 30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers | TechFleck - b2bweb.fr Work Wild Web @ BornToBeWeb 30HTML5 25 Tutoriales y tcnicas para HTML5 | Valiomadres 30 HTML5 | LuFree HTML5- und CSS3-Templates und -Tutorials | CSS, HTML, Templates, Tutorials | Dr. Web Magazin 14 Of The Best HTML5 Tutorials The Creative Project 30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers Chilesabe 40 40 plantillas CSS y XHTML gratis y de alta calidad | CSSBlog ES 30 HTML5 | |woiweb| 10 Awesome Html5 Startup Tutorials For Newbies [Tripwire magazine] 30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers MayBeMayBe 15 Useful HTML5 Tutorials and Resources | Top Design Magazine - The best place for web design and digital content Japan News And Articles Blog Archive Web HTML 5 10 Create An Elegant Website With HTML 5 And CSS3 W3 Web Designer | Kerala Web Designer create an elegant website with html 5 and css3 | moof twittert and blogt! 12 Free HTML5 and CSS3 Templates and Frameworks To Get You Started | Devlounge Link hc design HTML5 Le Trung Sin's Blog 30HTML5 30HTML5 | Yunui.com 25 Essential HTML5 Tutorials and Techniques Read more about 25 Essential HTML5 Tutorials and Techniques ItPak.net Be a Part of Itpak.Net 18 Highly Useful HTML5 Tutorials And Techniques 20 CSS3 HTML5 30 HTML5 | tenten Blog You are now listed on FAQPAL 8 Tutorials Html5 essenziali per sviluppatori e web designers | Pecciola 30HTML5+CSS3 - html5 - HTML5/CSS3 25 Best Html5 Tutorials & Demos and Resources HTML5 Why we should all care? Encodez Blog Quality XHTML Templates Light & Clean 15 Highly Useful HTML5 Tutorials For Web Designers 22 HTML5 ) | Zhou Blog ( 40 Essential CSS Templates, Resources and Downloads / Weblog Hans van Goor 5 Free HTML5-CSS3 Templates to open the new online world | ZwebbieZ 40 Essential CSS Templates, Resources and Downloads | FlexLib 25+ Awesome CSS3 Tutorials & Resources | Web Media Magazine Blog Archive 30HTML5 Html5 hakknda bilmeniz gerekenler | web tasarm ve internet magazin 10 HTML5 LighT Pan HTML5 Techniques Ultimate Collection of Tutorials WebKing@Krishna Free html5 css3 templates to get started | Savetime On Coding Flexible Web Layouts in HTML5 and CSS | Android
74 of 78
8/4/2011 2:09 PM
128. Most Important Techniques of HTML5 | Designs Planet 129. Top 10 HTML 5 Tutorials For Web Designers TechnoZeast 130. Coding Flexible Web Layouts in HTML5 and CSS TNT Factory - Web design studio, Graphic design, Search engine optimization 131. 37 Best HTML5 Tutorials And Techniques 2010 | webdesign14.com 132. 15 Excellent Step by Step HTML5 Website Coding Tutorials | Web Designer Aid 133. How To Start Using HTML5 + CSS3 Now! | The KO Design Blog 134. 45 high quality CSS and XHTML web templates | WebsterBox 135. 45 (CSS XHTML) 136. 50 PSD Conversion Tutorials | webdesign14.com 137. Top 25 HTML5 Tutorials For Web Developers | DesignDevBits 138. 20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint 139. 30html5 140. Must See HTML5 Tutorials | Webpappa 141. 40 Essential CSS Templates Rekuromeo's Daily Blog 142. Business 143. 50 Useful HTML5 Tutorials, Techniques and Examples for Web Developers | DesignModo 144. 40 CSS | Jackchen Design 1984 145. 30HTML5 - Dream step 146. 50 Useful HTML5 Tutorials, Techniques and Examples for Web Developers 147. 50html5 - - / / 148. Learning by doing-designing a website for me Samantha Lovelace 149. 30 PSD to HTML Tutorials | Graphic For All 150. HTML5 Tutorials and Techniques That Will Keep You Busy - Noupe Design Blog 151. HTML5 Tutorials and Techniques That Will Keep You Busy | Boomeroo Web Resources 152. HTML5 Tutorials and Techniques That Will Keep You Busy | Neil Kearney Design 153. HTML5 Tutorials and Techniques That Will Keep You Busy abdie.web.id 154. HTML5 Tutorials and Techniques That Will Keep You Busy | Feegk 155. Wordpress Blog Services - HTML5 Tutorials and Techniques That Will Keep You Busy 156. HTML5 Tutorials and Techniques That Will Keep You Busy | The best Tutorials 157. HTML5 Tutorials and Techniques That Will Keep You Busy | excreters.com 158. HTML5 Tutorials and Techniques That Will Keep You Busy 159. 30+ Must Try HTML 5 Tutorials and Techniques | Webwibe 160. HTML5 | 30 161. 20 kvalitetnih HTML5 tutoriala | Tutoriali.com.hr 162. [ 30HTML5 | Xiaoshao ] 163. Guide til de bedste HTML5 ressourcer | Webhotel Blog | ByteBob nyheder 164. 50 HTML5 165. Ouzhan Seluk BLBL Blog Arivi 50 HTML5 Dersi [ingilizce] 166. Dzinepress Ultimate Collection of HTML5 Tutorials and Useful Links Global Nerdy 167. HTML5 ? html5 IT 30 168. Holy smokes, I have my own domain! TDesignR 169. Html5 hakknda bilmeniz gerekenler internet magazin 170. Ultimate Collection of HTML5 Tutorials and Useful Links Life 171. kuldeeparora.com Dzinepress Ultimate Collection of HTML5 Tutorials and Useful Links 172. HTML5 Tutorials and Techniques That Will Keep You Busy - desmaksolutions.com | desmaksolutions.com 173. 30HTML5 | 174. 30HTML5 | 175. 176. Around 50 Great And Excellent PSD Conversion Tutorials 177. 30 Extremely Useful HTML5 Tutorials and Tricks 178. 7 Schritt-fr-Schritt Tutorials zum Erstellen einer HTML5-Website HTML5Tutorial 179. 28 Excellent HTML 5 & CSS3 Tutorials and Techniques | Sandip Chavda | Business | Day To Day | Food | News | Education | Entertainment | Movies | Love | Medical | Social Networking | Facebook | Sports | Cricket | Technologies | Internet | Mobiles | Wor 180. 30+ Best Html5 Tutorials | Best Wordpress Host 181. Html5 - iDotNet 182. Tips y recursos para empezar con HTML5 ShadowMaster 183. HTML5 | Jackchen Design 1984 184. Complete Html5 Resources & Guide | Best Wordpress Host
75 of 78
8/4/2011 2:09 PM
185. 186. 187. 188. 189. 190. 191. 192. 193. 194. 195. 196. 197. 198.
HTML5 | HTML5 | 10 Plantillas web HTML5 gratis pero de calidad 15 Free HTML5 Website Templates for Your Stylish Designs | DesignFloat Blog 30HTML5 | 50 Useful HTML5 Tutorials, Techniques and Examples for Web Developers | Cerise Graphics 25+ Must See Convert Photoshop to HTML/CSS Tutorials | Tutorials Share | Graphic & Web Design Tutorials HTML5 | HTML5 Tips y recursos para empezar con HTML5 | Romero Jacob Brooks Design | Graphic Design Blog Touch The Future: Create An Elegant Website With HTML 5 And CSS3 | Asheville Graphic Design Blog | Jacob Brooks Best HTML5 Tutorials | HTML5ARENA Latest Free HTML5 Website Templates 2011 | 39 grandes tutoriales y recursos HTML5 | Digisolnet Blog PSDTUTS 10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow)
Leave your comment

Name * Email (will not be published) * Website Comment
The Good, Bad And Ugly Of The Web Design Industry Group Interview: The Daily Challenges Of Young Designers And Developers
Socialize With Us
Twitter Delicious Design Bump Design Float Facebook Digg Web Blend
76 of 78
8/4/2011 2:09 PM
Subscribe RSS Feed Follow Us On Twitter
25 Great Stock Images Plus with $100 Subscription Giveaway 30+ Stunning Photos of New York City30+ Stunning Photos of New York City
Entrepreneurs that inspire you to grow your internet business View all
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design View all
Make a Slick and Dark Button Sprite How to Create a Flash WebsiteHow to Create a Flash Website
Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 2) View all
Friends and Partners

Aext.net AREA 1 ColorBurned Design Your Way DesignArtWall Designrfix Dzinepress Francesco Mugnai Free Vector Graphics Fudge Graphics Geek Sucks Little Box Of Ideas Photoshop Brushes BestDesignTuts Joomlafan Box Onextrapixel
77 of 78
8/4/2011 2:09 PM
PelFusion Presidia Creative PSD Vault Queness Smashing Share Think Design Blog Tutorial Lounge W3Avenue Web Design Booth Tutorialfox PSD to WordPress Smashing Hub
Web Design Updates

Take a look at Web Design Updates. A place where we feature the best articles, freebies, tutorials and ideas of the web. Submit your good stuff on WDU
This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio. Contents and resources released under Creative Commons License. Design and code by PVM Garage - Copyright 2010 PV.M Garage Theme - All Rights Reserved. HOME | ABOUT US | ADVERTISE | CONTACT US
78 of 78
8/4/2011 2:09 PM

Touch The Future - Create An Elegant Website With HTML 5 and CSS3 - PVM Garage

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Touch The Future - Create An Elegant Website With HTML 5 and CSS3 - PVM Garage

Uploaded by

Copyright:

Available Formats

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

PV.M Garage | Web Design Blog

How HTML 5 And CSS3 Can Change Web Design

Quick Overview On HTML 5

Quick Overview On CSS3

How To Create A Nice Blog Design Touching The Future

Sketch Your Ideas

Code Your Website With HTML 5

And now its time for the code.

The result of the code.

Below the style for this section.

The result of our efforts.

src="images/test1.jpg" src="images/test2.jpg" src="images/test3.jpg" src="images/test4.jpg" src="images/test5.jpg" src="images/test1.jpg"

width="110" width="110" width="110" width="110" width="110" width="110"

alt="test" alt="test" alt="test" alt="test" alt="test" alt="test"

/></a></li /></a></li /></a></li /></a></li /></a></li /></a></li

I have to style all these elements, so lets go with CSS rules.

-moz-box-shadow: none; -khtml-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

The relative CSS rules for the footer.

See the following image to understand how our footer appears.

Now we can see how IE renders our code.

Just a trick, but in this case it works fine.

Author: Piervincenzo Madeo

clerik April 23, 2010 at 10:19 pm Hell congrats! 9. Reply

Congrats Pier :) 10. Reply

Mihai O. April 25, 2010 at 10:06 am Great article :) 15. Reply

Appears a number of times (over 20times). It should be: HTML Reply

Jireck April 26, 2010 at 11:58 pm

Mark May 11, 2010 at 3:11 pm Great article! 35. Reply

junghae July 23, 2010 at 8:04 am ho, html5. 42. Reply

IndellDed February 10, 2011 at 9:42 pm , . . . 75. Reply

illurnaliep February 12, 2011 at 5:41 am Hi 78. Reply

SmfruikPnari February 14, 2011 at 5:45 pm 89. Reply

February 17, 2011 at 7:26 am . 98. Reply

motors security system

Wekendanind February 18, 2011 at 3:48 pm 107. Reply

IaJmjF February 19, 2011 at 5:43 am qshkQtWS 112. Reply

Pregnancy For Dads February 20, 2011 at 4:30 pm

A Practical Pregnancy Diet Plan 122. Reply

Sleeping Basics When Pregnant February 21, 2011 at 8:34 am

how to send you an email? let us get closer 135. Reply

best pheromone cologne February 23, 2011 at 1:16 pm

fdasf March 2, 2011 at 4:06 pm test 149. Reply

pissing tube April 18, 2011 at 6:15 am

Watch hundreds of completely free peeing clips! 165. Reply

HL April 28, 2011 at 4:44 am Hi,

P.S. Very good post. 175. Reply

Brazos Place Condos June 26, 2011 at 5:40 am

Sri July 11, 2011 at 12:26 am

Renato Reis July 30, 2011 at 12:20 pm Adorei! 216. Reply

Leave your comment

Subscribe RSS Feed Follow Us On Twitter

Unique Handwritten Free Fonts For Your Next Designs

A Roundup of 45 Industrial Free Fonts

Friends and Partners

Web Design Updates

You might also like