Mick Redman: HTML5

Showing posts with label HTML5. Show all posts

Wednesday 2 March 2011

Nice CSS button

This demonstration relies upon css3pie in order to work in IE. You can get it at http://css3pie.com/
I have tried to use gradients and box shadow to a cool effect.
It seems like a lot of code for a button, but as it's a class, you can create many buttons on the same page with it.
Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SoM KI Box</title>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{

});
</script>
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
.greenButton
{
float:left;
margin:1em;
}
.greenButton .outer, .greenButton .inner, .greenButton .outer:hover, .greenButton .inner:hover
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.greenButton .outer, .greenButton .outer:hover
{
width:8em;
height:8em;
padding-top:0.2em;
padding-left:0.2em;
}
.greenButton .inner, .greenButton .inner:hover
{
border-radius:0.5em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
width:7.8em;
height:5.8em;
padding-top:2em;
text-align:center;
}
.greenButton .outer, .greenButton .outer:hover
{
box-shadow:0 0 0.8em #CCCCCC;
-moz-box-shadow:0 0 0.8em #CCCCCC;
-webkit-box-shadow:0 0 0.8em #CCCCCC;
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
}
.greenButton .outer
{
background-image:-moz-linear-gradient(90deg, #64cc00, #8DE639);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#64cc00), to(#8DE639));
-pie-background:linear-gradient(90deg, #8DE639, #64cc00);
}
.greenButton .inner
{
background-image:-moz-linear-gradient(90deg, #8DE639, #64cc00);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8DE639), to(#64cc00));
-pie-background:linear-gradient(90deg, #64cc00, #8DE639);
}
.greenButton .outer:hover
{
background-image:-moz-linear-gradient(90deg, #C80043, #E33972);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#C80043), to(#E33972));
-pie-background:linear-gradient(90deg, #E33972, #C80043);
}
.greenButton .inner:hover
{
background-image:-moz-linear-gradient(90deg, #E33972, #C80043);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E33972), to(#C80043));
-pie-background:linear-gradient(90deg, #C80043, #E33972);
}
.greenButton a, .greenButton a:link, .greenButton a:hover, .greenButton a:visited, .greenButton a:active
{
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<section id="mainContent">
<figure class="greenButton">
<section class="outer">
<section class="inner">
<a href="getPageContext.php">Get<br />Page<br />Context</a>
</section>
</section>
</figure>
</section>
</body>
</html>

Tuesday 15 February 2011

Mobile friendly liquid layout #4

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 24</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;

}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<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="#">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>
</section>
<footer>Footer</footer>
</body>
</html>

Mobile friendly liquid layout #3

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 23</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img, nav a:hover
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header
{
padding-top:2em;
background:#000000;
}
nav a
{
display:block;
width:4em;
width:3em;
text-decoration:none;
text-align:left;
color:#000000;
}
nav a:hover
{
background:#0000FF;
color:#FFFFFF;
}
footer, header
{
height:8em;
}
#content, #picture, #text, nav
{
background:#FFFFFF;
}
#picture, nav
{
float:left;
width:20%;
}
#picture
{
min-height:10em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
header h1, header h2, header h3
{
color:#FFFFFF;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<section id="content">
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<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="#">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>
</section>
<footer>Footer</footer>
</body>
</html>

Mobile friendly liquid layout #2

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 22</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header, nav
{
padding-top:2em;
}
#top
{
background:#000000;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:left;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
#top, footer
{
height:8em;
}
header
{
float:left;
width:50%;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer, #content
{
clear:left;
}
header h1, header h2, header h3, nav a
{
color:#FFFFFF;
}
</style>
</head>
<body>
<section id="top">
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
</section>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<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="#">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>
</section>
<footer>Footer</footer>
</body>
</html>

Monday 14 February 2011

Mobile friendly liquid layout

This layout works well on most devices. I think it's fair to say that you can do a lot with it. I also discovered a small, but annoying, technical anomaly with webkit browsers while creating it. Using the example below, If I had set the #text element to 'float:left;', this element would have shifted beneath the #picture element. Given the webkit browser is used in many mobile browsers, this becomes more important.

One thing you'll notice from this layout is that I haven't done much with the fonts, but that's just to keep the code slim.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 21</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Header</h1>
</header>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<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="#">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>
</section>
<footer>Footer</footer>
</body>
</html>

Friday 11 February 2011

HTML5 tables

Thankfully the W3C seem to be sticking with tables in HTML5 despite all the criticisms. Most, if not all of the old attributes have gone, leaving us with simple tags and the introduction of the summary attribute to the table tag. Presumably this is to overcome the complaints about accessibility. It looks like a good strategy to me. Tables for data are good. Tables for layout, not so good.

See demo.

Below is an example of a HTML5 table:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables in HTML5</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
table
{
margin:4em;
border:#CCCCCC solid 0.1em;
}
th, td
{
border-bottom:#CCCCCC solid 0.1em;
border-left:#CCCCCC solid 0.1em;
padding:1em;
}
th
{
background:#A7FFFF;
}
</style>
</head>
<body>
<table summary="Everything has a consequence.">
<tr>
<th>Action</th>
<th>Result</th>
</tr>
<tr>
<td>Work</td>
<td>Pay</td>
</tr>
<tr>
<td>Play</td>
<td>Happiness</td>
</tr>
<tr>
<td>Love</td>
<td>Love</td>
</tr>
</table>
</body>
</html>

Wednesday 2 February 2011

Simple layout #15

Here is another layout which uses jquery corners.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
   font-family:Georgia, Times New Roman, Times, serif;
   text-transform:uppercase;
color:#000000;
}
h1
{
   font-size:5em;
}
h2
{
   font-size:4em;
}
p
{
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-variant: normal;
   letter-spacing:0.1em;
   text-align:justify;
}
p
{
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
  <h1>header 1</h1>
  <h2>header 2</h2>
  <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.</p>
</header>
<div id="tl" class="">
  <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.</p>
</div>

</body>
</html>

Monday 24 January 2011

Four cornered web page

How do you add four different backgrounds as corners to your web page?
The answer is below. It even work in IE. You will have to create your own corner images.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 corners</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
#topLeft, #topRight, #bottomLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(topLeftCorner.png) no-repeat left top;
z-index:-10;
}
#topRight
{
background:url(topRightCorner.png) no-repeat right top;
z-index:-9;
}
#bottomLeft
{
background:url(bottomLeftCorner.png) no-repeat left bottom;
z-index:-8;
}
#bottomRight
{
background:url(bottomRightCorner.png) no-repeat right bottom;
z-index:-7;
}
#mainContent, h1
{
padding:2em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="topRight"></section>
<section id="bottomLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>Hello World!</h1>
</section>
</body>
</html>

Wednesday 1 December 2010

Two lessons learned about IE from the coal face

Yesterday was a difficult day. It's my own fault. I should have started testing my portableCMS in IE earlier. I came across 2 problems which took more time than I was prepared for in debugging.

So here is tip number 1. Don't even think of trying to refer to JavaScript constants in your jQuery calls. It's just not worth the hassle.

Tip number 2. As well as referring to a html5 reset, (I use http://html5resetcss.googlecode.com/files/html5-reset.css), add your own HTML 4 reset. Mine is listed below. You will still have problems, but less.

{

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body

{

font-family:Sans-serif;

font-size:1em;

}

h1, h2, h3, h4, h5, h6

{

margin:0;

padding:0;

font-weight:normal;

}

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea

{

margin:0;

padding:0;

}

blockquote

{

margin:1.25em;

padding:1.25em

}

{

font-style:italic;

}

acronym, abbr

{

cursor:help;

}

small

{

font-size:.85em;

}

big

{

font-size:1.2em;

}

a, a:link, a:visited, a:active, a:hover

{

text-decoration:none;

}

table

{

margin:0;

padding:0;

border:none;

}

form

{

margin:0;

padding:0;

display:inline;

}

label

{

cursor:pointer;

}

.clear { clear:both; }

.floatLeft { float:left; }

.floatRight { float:right; }

.textLeft { text-align:left; }

.textRight { text-align:right; }

.textCenter { text-align:center; }

.textJustify { text-align:justify; }

.blockCenter { display:block; margin-left:auto; margin-right:auto; }

.bold { font-weight:bold; }

.italic { font-style:italic; }

.underline { text-decoration:underline; }

.noindent { margin-left:0; padding-left:0; }

.nomargin { margin:0; }

.nopadding { padding:0; }

.nobullet { list-style:none; list-style-image:none; }

Tuesday 16 November 2010

Using css3pie with on HTML5 for cross browser effects

I have been using css3pie from http://css3pie.com/ for some time now. In order to run the test below, you will have to download it. You could put it in a scripts folder as I have but it doesn't matter. The example below contains a few elements which will make it work cross browser.
Firstly, I have added the html5.js reference at the top.
Secondly, I have reset the * and body values.
Thirdly, I have use em insted of px.
Finally, I switched the gradient around on the -pie-background call.
Enjoy!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3pie test</title>

<style>
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:Sans-serif;
color:#FFFFFF;
font-size:1em;
line-height:140%;
}
section#borderRadiusExample
{
background:#6BC2E8;
width:10em;
padding:0.62em;

/* rounded corners */
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;

/* Shadow */
box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-moz-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-webkit-box-shadow:0.3em 0.3em 0.3em #CCCCCC;

/* Linear gradient */
background-image:-moz-linear-gradient(90deg, #6BC2E8, #ABDEF3);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BC2E8), to(#ABDEF3));
-pie-background:linear-gradient(90deg, #ABDEF3, #6BC2E8);

behavior:url('scripts/PIE.htc');
}
</style>
</head>
<body>
<section id="borderRadiusExample">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</body>
</html>

Monday 15 November 2010

HTML5 tags I am currently using

Why would I write this article?

It's just to give you a flavour of the HTML5 features I have found to be reliable and how I use them. There is a simple template below, but essentially they are <header></header>, <footer></footer>, <section></section>, <article> </article> and <aside></aside>.
Of course, you may be thinking, he's not using proper HTML5 html and meta tags. That's because the new ones are not currently accepted by the W3C Validators.

See demo.

<!DOCTYPE html>

<head>

<title>HTML5 example</title>

body

{

font-family:Sans-serif;

}

#mainPage, header, footer

{

margin:0 auto;

width:30.8em;

*width:30em;

}

#leftContent

{

float:left;

}

#rightContent

{

float:right;

}

footer

{

clear:both;

}

</style>

</head>

<body>

<h1>My header</h1>

</header>

<article>Article 1</article>

</section>

<aside id="rightContent">Content on the aside</aside>

</section>

<footer>Footer</footer>

</body>

</html>

Wednesday 11 August 2010

My HTML5 Template

Here is my HTML5 template. It also contains a few things I like to put in my pages.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="stylesheets/html5reset.css" />
<link rel="stylesheet" href="stylesheets/pageStyle.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylesheets/smalldevice.css" />
<link rel="stylesheet" href="stylesheets/printstyle.css" media="print" />
<link rel="shortcut icon" href="images/favicon.ico" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
WebFont.load(
{
google:
{
families: [ 'Tangerine', 'Cantarell', 'Yanone Kaffeesatz' ]
}
});
</script>
<script src="scripts/jQueryFunctions.js"></script>
<script src="scripts/html5functions.js"></script>
</head>
<body>
<div id="page">
<header>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>First article on left.
</article>
<article>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</article>
</section>
<aside>
The stuff aside
<article class="yellowbox">
This is the text in the box.
</article>
</aside>
<footer>
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
</footer>
</div>
</body>
</html>

Enjoy!