Monday, January 24, 2011

HTML5 Page Structure

<!DOCTYPE HTML>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Name</title>
</head>
<body>

<header>
<nav>
<ul>
<li>Menu - Main Navigation</li>
</ul>
</nav>
</header>

<section>

<article>
<header>
<h2>Title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">January 25th 2011</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>"Ye are the angels, if your feet be firm, your spirits rejoiced, your secret thoughts pure, your eyes consoled, your ears opened, your breasts dilated with joy, and your souls gladdened..."</p>
</article>

<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>My thinking about angels is something new for me, fresh and pure. By daring to openly acknowledge their existence</p>
</article>

</section>

<aside>
<h2>About section</h2>
<p>We all know the word, but how many of us give much credence to the idea, have faith in the existence of angels? And, if we do, would we admit it to ourselves let alone to somebody else. I mean, for me for instance: I am a man, some would say a manly sort of man. I even have a friend who says I'm a pirate, or at least that I laugh like one. </p>
</aside>

<footer>
<p>Copyright 2011 Website name</p>
</footer>

</body>

</html

Sunday, January 23, 2011

CSS background image hacks

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Demos: Example CSS background image hacks

Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentational HTML. In some cases, they even make it possible to emulate things that are not currently part of any W3C working draft, like background transforms and background image opacity.

Most of the hacks in this article tie in with the pseudo-element hack described in an earlier article – Multiple Backgrounds and Borders with CSS 2.1. That article already describes how to emulate multiple background support and its demo page shows several other uses of the basic principle. This article presents a few of those effects and applications in greater detail.

Read More : http://nicolasgallagher.com/