The UsualDosage Presents: HTML5
This page is provided as a short demonstration of the capabilities of HTML5, Javascript and CSS3.0. You are free to download and and use any of the source files contained in this demonstration.
Site Design Notes
Rounded corners are generated using the
.roundedPanel
{
background-color: #fff;
width: 800px;
margin-left: auto;
margin-right: auto;
border: solid 1px #666;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
box-shadow: 3px 3px 7px #777;
}
The styled fonts used on this site are handled by the
@font-face
{
font-family: 'Lobster Two';
src: url(../resources/LobsterTwo-Regular.otf);
}
@font-face
{
font-family: 'Capsuula';
src: url(../resources/Capsuula.ttf);
}
h1
{
font-family: Lobster Two;
border-bottom: solid 1px #666;
}
Gradient backgrounds used throughout this page are achieved by using various background gradient styling elements. Example CSS code is below:
background: #e6f4f4;
background:
-moz-linear-gradient(top, #eeeeee 1%, #ffffff 100%);
background:
-webkit-gradient(linear, left top, left bottom,
color-stop(1%,#eeeeee), color-stop(100%,#ffffff));
background:
-webkit-linear-gradient(top, #eeeeee 1%,#ffffff 100%);
background:
-o-linear-gradient(top, #eeeeee 1%,#ffffff 100%);
background:
-ms-linear-gradient(top, #eeeeee 1%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#eeeeee',
endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #eeeeee 1%,#ffffff 100%);
This site makes extensive use of several external javascript files, all of which are available free for download below.
- Prettify - A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.
- Modernizr - A small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications.
- JQuery - A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions.