Here is another example of using a radial gradient for a background, just because it looks nice.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial Gradient Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
background:#FF0000;
/* url(images/check.gif); */
width:100%;
height:100%;
}
.contentHolder
{
margin:0 auto;
width:800px;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
color:#FFFFFF;
}
#topPart
{
height:200px;
}
#middlePart
{
height:400px;
}
#bottomPart
{
min-height:200px;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="gradient" />
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
Monday 16 May 2011
Neon text using GIMP
Here is another GIMP tutorial. How to add a neon effect to text.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects - Neon text</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/neonText.png" alt="neonText" />
<h1>Neon text example using GIMP</h1>
<h2>Prepare your gimp canvas</h2>
<p>Start with a new clean canvas lets say 640px width and 480px height.</p>
<h2>Add some text</h2>
<p>Choose a font you like but I recommend to use an italic text. Now type your word(s).</p>
<p>Right click on the layer with the text and choose Text to Path.</p>
<p>Go to the Edit menu and choose Stroke Path.</p>
<p>In the Stroke Path dialogue choose Stroke with Paint Tool and hit the Stroke button.</p>
<h2>Optional</h2>
<p>You may now need to resize the selection because the text comes too close to the edge and gets chopped off.</p>
<p>Go to Layer-Layer Boundry Size and increase the layer width, centreing the text within the increased layer.</p>
<h2>Back to the necessary</h2>
<p>Select Filters > Alpha to Logo >Neon and click on the OK button.</p>
<h2>Done!</h2>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects - Neon text</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/neonText.png" alt="neonText" />
<h1>Neon text example using GIMP</h1>
<h2>Prepare your gimp canvas</h2>
<p>Start with a new clean canvas lets say 640px width and 480px height.</p>
<h2>Add some text</h2>
<p>Choose a font you like but I recommend to use an italic text. Now type your word(s).</p>
<p>Right click on the layer with the text and choose Text to Path.</p>
<p>Go to the Edit menu and choose Stroke Path.</p>
<p>In the Stroke Path dialogue choose Stroke with Paint Tool and hit the Stroke button.</p>
<h2>Optional</h2>
<p>You may now need to resize the selection because the text comes too close to the edge and gets chopped off.</p>
<p>Go to Layer-Layer Boundry Size and increase the layer width, centreing the text within the increased layer.</p>
<h2>Back to the necessary</h2>
<p>Select Filters > Alpha to Logo >Neon and click on the OK button.</p>
<h2>Done!</h2>
</body>
</html>
Use of wood and paper textures
This example makes use of textures, both wooden and paper. It's the starting position of putting together a website for a local carpenter. I also use one of the Google fonts to add a handwritten effect.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local carpenter</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>
html, body
{
font-family: 'Reenie Beanie', arial, serif;
background:url(images/coursepaper.jpg);
}
#mainContent, #footer
{
margin:0 auto;
width:800px;
}
#mainContent, #paper, #footer
{
position:relative;
padding:20px;
-webkit-box-shadow: 4px 4px 4px #737373;
-moz-box-shadow: 4px 4px 4px #737373;
box-shadow: 4px 4px 4px #737373;
behavior: url(scripts/PIE.htc);
}
#mainContent
{
background:url(images/plywood.jpg);
min-height:440px;
}
#leftSection
{
float:left;
width:140px;
}
#subNav
{
float:left;
width:136px;
margin-left:60px;
}
#subNav a.subMenu, a.subMenu:hover
{
font-size:2em;
color:#FFFFFF;
}
#subNav a.subMenu
{
display:block;
height:96px;
background:url(images/woodenbutton.png) 0 0 no-repeat;
margin-top:0px;
padding-top:20px;
padding-left:20px;
}
#subNav a.subMenu:hover
{
background:url(images/woodenbuttonover.png) 0 0 no-repeat;
padding-top:24px;
padding-left:24px;
}
.menuSelected
{
}
img
{
}
p
{
font-size:1.4em;
}
#paper
{
float:right;
background:url(images/paper.jpg);
width:500px;
min-height:300px;
}
#footer
{
background:url(images/plywood2.jpg);
position: relative;
min-height:40px;
}
</style>
</head>
<body>
<br />
<div id="mainContent">
<div id="leftSection">
<img src="images/stamp.png" alt="stamp">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
</div>
</div>
<div id="paper">
<h1>Welcome to the Local Carpenter</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
</div>
<br />
<div id="footer"></div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local carpenter</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>
html, body
{
font-family: 'Reenie Beanie', arial, serif;
background:url(images/coursepaper.jpg);
}
#mainContent, #footer
{
margin:0 auto;
width:800px;
}
#mainContent, #paper, #footer
{
position:relative;
padding:20px;
-webkit-box-shadow: 4px 4px 4px #737373;
-moz-box-shadow: 4px 4px 4px #737373;
box-shadow: 4px 4px 4px #737373;
behavior: url(scripts/PIE.htc);
}
#mainContent
{
background:url(images/plywood.jpg);
min-height:440px;
}
#leftSection
{
float:left;
width:140px;
}
#subNav
{
float:left;
width:136px;
margin-left:60px;
}
#subNav a.subMenu, a.subMenu:hover
{
font-size:2em;
color:#FFFFFF;
}
#subNav a.subMenu
{
display:block;
height:96px;
background:url(images/woodenbutton.png) 0 0 no-repeat;
margin-top:0px;
padding-top:20px;
padding-left:20px;
}
#subNav a.subMenu:hover
{
background:url(images/woodenbuttonover.png) 0 0 no-repeat;
padding-top:24px;
padding-left:24px;
}
.menuSelected
{
}
img
{
}
p
{
font-size:1.4em;
}
#paper
{
float:right;
background:url(images/paper.jpg);
width:500px;
min-height:300px;
}
#footer
{
background:url(images/plywood2.jpg);
position: relative;
min-height:40px;
}
</style>
</head>
<body>
<br />
<div id="mainContent">
<div id="leftSection">
<img src="images/stamp.png" alt="stamp">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
</div>
</div>
<div id="paper">
<h1>Welcome to the Local Carpenter</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
</div>
<br />
<div id="footer"></div>
</body>
</html>
Letterpress
I use GIMP a lot. It's an excellent program. A lot of people, used to using Photoshop have difficulty getting used to the GUI. I'd never used Photoshop, so I didn't have anything to get used to. I compared the feature list of the 2 programs and GIMP came out very well, so that's the one I used.
This page is a tutorial on how to create a letterpress effect in GIMP.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#737373 url(images/darkcoursepaper.jpg);
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/letterpress.png" alt="letterpress" />
<h1>Letterpress example using GIMP</h1>
<h2>Prepare your gimp canvas</h2>
<p>Start with a new clean canvas lets say 640px width and 480px height.</p>
<h2>Add some text</h2>
<p>Choose a font you like but I recommend to use a bold text.</p>
<h2>Inner gradient</h2>
<p>Right click on the layer with the text and choose Text to selection.</p>
<p>Choose Edit->Clear</p>
<p>Select a gradient tool and use a colour which is darker than the background. Use gradient FG to Transparent and make the gradient from bottom of the text somewhere to the middle.</p>
<h2>White Drop Shadow</h2>
<p>Select Filters > Light and Shadow > Drop Shadow.</p>
<p>Set Offset X, Offset Y and Blur radius to 1. Colour white. Opacity 20.0.</p>
<h2>Inner Shadow</h2>
<p>Select from top navigation Select > Invert</p>
<p>Then Filters > Light and Shadow > Drop Shadow</p>
<p>Set Offset X and Offset Y to 1. Blur radius to 6. Colour black. Opacity 100.0.</p>
<h2>Done!</h2>
</body>
</html>
This page is a tutorial on how to create a letterpress effect in GIMP.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#737373 url(images/darkcoursepaper.jpg);
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/letterpress.png" alt="letterpress" />
<h1>Letterpress example using GIMP</h1>
<h2>Prepare your gimp canvas</h2>
<p>Start with a new clean canvas lets say 640px width and 480px height.</p>
<h2>Add some text</h2>
<p>Choose a font you like but I recommend to use a bold text.</p>
<h2>Inner gradient</h2>
<p>Right click on the layer with the text and choose Text to selection.</p>
<p>Choose Edit->Clear</p>
<p>Select a gradient tool and use a colour which is darker than the background. Use gradient FG to Transparent and make the gradient from bottom of the text somewhere to the middle.</p>
<h2>White Drop Shadow</h2>
<p>Select Filters > Light and Shadow > Drop Shadow.</p>
<p>Set Offset X, Offset Y and Blur radius to 1. Colour white. Opacity 20.0.</p>
<h2>Inner Shadow</h2>
<p>Select from top navigation Select > Invert</p>
<p>Then Filters > Light and Shadow > Drop Shadow</p>
<p>Set Offset X and Offset Y to 1. Blur radius to 6. Colour black. Opacity 100.0.</p>
<h2>Done!</h2>
</body>
</html>
More use of radial gradients
Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>
Use of grey and blue
In this very simple layout, I have applied a radial gradient to a plain background, added an arty black and white photo, and used a nice font for the title in blue. It hints at effective design technique.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#000000;
}
@font-face
{
font-family: 'zancleeYe/FSRegular';
src: url('fonts/zancle_eyefs-webfont.eot');
src: local('☺'), url('fonts/zancle_eyefs-webfont.woff') format('woff'), url('fonts/zancle_eyefs-webfont.ttf') format('truetype'), url('fonts/zancle_eyefs-webfont.svg#webfontDT7UNJnV') format('svg');
font-weight: normal;
font-style: normal;
}
#mainContent
{
margin:0 auto;
width:920px;
padding:10px;
}
h1, #footer
{
font-family: 'zancleeYe/FSRegular';
color:#B0E0E6;
}
h1
{
font-size:4em;
}
p
{
text-align:justify;
color:#FFFFFF;
font-size:0.8em;
}
#leftHand, #rightHand
{
position:relative;
float:left;
margin-right:10px;
padding:10px;
border:1px solid #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(scripts/PIE.htc);
}
#leftHand
{
width:360px;
min-height:374px;
}
#rightHand
{
background:url(images/japan.jpg) no-repeat;
width:480px;
height:374px;
}
#footer
{
clear:left;
padding-top:10px;
}
</style>
</head>
<body>
<img id="background" src="images/chalkBack.png" alt="chalkBack" />
<br /><br />
<div id="mainContent">
<h1>hello world!</h1>
<div id="leftHand">
<p>Lorem ipsum scripta apeirian perfecto cum ad. Patrioque cotidieque ex nam. Feugiat fastidii vis ne, te instructior voluptatibus mei, pro esse temporibus et. Cu pro possit tractatos, ea dictas eirmod erroribus ius, no nec putant facilisi euripidis. Dolore fierent vis in, pri cu prompta inciderint, vix maiorum ponderum recusabo et.</p>
<p>Ut est augue deseruisse, vix cu eripuit dignissim, duo quando aperiam lobortis ut. Intellegam delicatissimi in eos, ius labore placerat maluisset an. Ad corrumpit ullamcorper per, munere gloriatur mei an. Vix ei nonumy ubique fabulas, eros salutatus vis cu, eum regione voluptaria dissentias at.</p>
<p>Inani quaeque nam ne, cu usu simul maiestatis. At nostro posidonium usu. Puto scaevola philosophia ius ex. Sed eu dicam vulputate, epicuri nominavi officiis mei at. No doctus labores pro.</p>
<p>Eu est tale quot. An munere definitionem pri. Ei nonummy blandit petentium est, no mei sale dolores appetere. Error iriure cu eam, ne soleat bonorum dolores sea. Eos id oratio vulputate reformidans.</p>
</div>
<div id="rightHand">
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#000000;
}
@font-face
{
font-family: 'zancleeYe/FSRegular';
src: url('fonts/zancle_eyefs-webfont.eot');
src: local('☺'), url('fonts/zancle_eyefs-webfont.woff') format('woff'), url('fonts/zancle_eyefs-webfont.ttf') format('truetype'), url('fonts/zancle_eyefs-webfont.svg#webfontDT7UNJnV') format('svg');
font-weight: normal;
font-style: normal;
}
#mainContent
{
margin:0 auto;
width:920px;
padding:10px;
}
h1, #footer
{
font-family: 'zancleeYe/FSRegular';
color:#B0E0E6;
}
h1
{
font-size:4em;
}
p
{
text-align:justify;
color:#FFFFFF;
font-size:0.8em;
}
#leftHand, #rightHand
{
position:relative;
float:left;
margin-right:10px;
padding:10px;
border:1px solid #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(scripts/PIE.htc);
}
#leftHand
{
width:360px;
min-height:374px;
}
#rightHand
{
background:url(images/japan.jpg) no-repeat;
width:480px;
height:374px;
}
#footer
{
clear:left;
padding-top:10px;
}
</style>
</head>
<body>
<img id="background" src="images/chalkBack.png" alt="chalkBack" />
<br /><br />
<div id="mainContent">
<h1>hello world!</h1>
<div id="leftHand">
<p>Lorem ipsum scripta apeirian perfecto cum ad. Patrioque cotidieque ex nam. Feugiat fastidii vis ne, te instructior voluptatibus mei, pro esse temporibus et. Cu pro possit tractatos, ea dictas eirmod erroribus ius, no nec putant facilisi euripidis. Dolore fierent vis in, pri cu prompta inciderint, vix maiorum ponderum recusabo et.</p>
<p>Ut est augue deseruisse, vix cu eripuit dignissim, duo quando aperiam lobortis ut. Intellegam delicatissimi in eos, ius labore placerat maluisset an. Ad corrumpit ullamcorper per, munere gloriatur mei an. Vix ei nonumy ubique fabulas, eros salutatus vis cu, eum regione voluptaria dissentias at.</p>
<p>Inani quaeque nam ne, cu usu simul maiestatis. At nostro posidonium usu. Puto scaevola philosophia ius ex. Sed eu dicam vulputate, epicuri nominavi officiis mei at. No doctus labores pro.</p>
<p>Eu est tale quot. An munere definitionem pri. Ei nonummy blandit petentium est, no mei sale dolores appetere. Error iriure cu eam, ne soleat bonorum dolores sea. Eos id oratio vulputate reformidans.</p>
</div>
<div id="rightHand">
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Mobile friendly liquid layout #7
This example combines a tiled background texture, with a radial gradient over the top. This provides the effect of lighting.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mobile friendly liquid layout #7</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<style>
body
{
font-family:Sans-serif;
width:100%;
background:url(images/patch.gif);
}
body, a, a:active, a:hover, a:link, a:visited
{
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="windFarm" />
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="http://www.effectivewebdesigns.co.uk/demo/mobile-friendly-liquid-layout-5.html#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mobile friendly liquid layout #7</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<style>
body
{
font-family:Sans-serif;
width:100%;
background:url(images/patch.gif);
}
body, a, a:active, a:hover, a:link, a:visited
{
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="windFarm" />
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="http://www.effectivewebdesigns.co.uk/demo/mobile-friendly-liquid-layout-5.html#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>
Subscribe to:
Posts (Atom)