An Blank Html5 Template

May 31, 2012 By Leave a Comment

This is an example about HTML5 Template:

 <!DOCTYPE html>
 <html>
 <head>
 <title>HTML5 template</title>
 <metacharset  =  "utf-8"/> 

 <scripttype  =  "text/javascript">
  document.createElement('header');
  document.createElement('menu');
  document.createElement('content');
  document.createElement('footer');
 </script> 

 <style type="text/css">
  * {
margin:0  ;
padding:0  ;
  } 

  header, menu, content, footer {
display:block  ;
  } 

  menu ul {
list-style-type:none  ;
  } 

  menu ul li {
float:left  ;
padding:5px20px  ;
  } 

  content, footer {
clear:both  ;
  }
 </style>
 </head>
 <body>
 <header>
  <h1>A Blank HTML5 template</h1>
  <menu>
<ul>
 <li>
  <ahref  =  "http://html5snippets.com"title  =  "snippets">HTML5 snippets</a>
 </li>
 <li>
  <ahref  =  "http://charlesdagley.cz.cc/"title  =  "Portfolio">Dagley Designs</a>
 </li>
 <li>
  <ahref  =  "link"title  =  "link">link</a>
 </li>
 <li>
  <ahref  =  "link"title  =  "link">link</a>
 </li>
 <li>
  <ahref  =  "link"title  =  "link">link</a>
 </li>
</ul>
  </menu>
 </header> 

 <content>
  <h2>This is our content area</h2>
  <p>This is just a free html5 blank template</p>
 </content> 

 <footer>
  As found on html5snippets.com---Follow @charlesdagley
 </footer>
 </body>
 </html>

DEMO | DOWNLOAD

Filed Under: HTML5 Examples, HTML5 Snippet Tagged With:

Rubber ball follows mouse cursor

May 31, 2012 By Leave a Comment

Here is code rubber ball, it follows mouse cursor when you move.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas-Animaci&oacute;n</title>
    
    <script type="text/javascript">
      var x=0; //coordenada x del objeto
      var incx=10; //incremento x 
      var y=0;  //coordenada y del objeto
      var incy=5; //incremental de y
      var mouseX=0;
      var mouseY=0;
      var delay=10;
      var timer=10;
      
      function init(){
          var canvas = document.getElementById('tutorial');


          //loop calls dibuja each 20 ms
          setInterval(dibuja,20);  
          
          canvas.addEventListener('mousemove', ev_mousemove, false);


      }
      
      
      function ev_mousemove (ev) {
            mouseX = ev.layerX;
            mouseY = ev.layerY;
            
      
      }
      
      function dibuja(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          timer+=1;
          ctx.fillStyle ="rgba(200,30,10,1)";
          ctx.strokeStyle="#000";
          
          delay=20-(mouseY/100);
          
          accelX=mouseX-x;
          accelY=mouseY-y;
          
          x+=(accelX)/delay;
          y+=(accelY)/delay;
          
          x+=Math.sin(timer)*accelX/5;
          y+=Math.sin(timer)*accelY/5;
          //limpia el canvas 
          ctx.clearRect(0,0,400,400); 
 
       
          
          //dibuja linea
          ctx.beginPath();
          ctx.moveTo(200,400);
          ctx.lineTo(x,y);
          ctx.stroke();
          
          //dibuja el circulo 
          ctx.beginPath(); 
          ctx.arc(x,y,50,0,Math.PI*2,true);
          ctx.fill(); 
          
         // ctx.translate((200-mouseX)/100,0);


       
        }
      }
      
     
    </script>
    
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="init();">
    <canvas id="tutorial" width="400" height="400"></canvas>
  </body>
</html>

DEMO:

Filed Under: HTML5 Examples, HTML5 Snippet Tagged With: , ,

Ribbon with 3D depth effect

May 27, 2012 By Leave a Comment

The depth trick is done simulating a css triangle by having 20px top border with a right, left and bottom transparent borders.
z-index is used to get the triangles behind the content.

First of all we set up our files. We create a new folder with index.html and style.css.

We prepare the HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Ribbon</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- 3D Stuff -->

</body>
</html>

Take a look at the following image to understand how we will realize the “structure” in ourindex.html file.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles.

<div id="container"> <!-- Main Container -->    

<div> <!-- Bubble -->
<div><h2>3D CSS Ribbon</h2></div> <!-- Rectangle with a title -->
<div>
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

The CSS code to style the basic elements (container, bubble and rectangle) is the following.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}
/* // Reset */

body {
	background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
	font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
	font-size: 12px;
	color: #999;
}

h2 {
	font-style: italic;
	font-weight: normal;
	line-height: 1.2em;
}

div#container {
	margin: 50px auto 0px auto; /* centered */
	width: 400px;
}

.bubble {
	clear: both;
	margin: 0px auto;
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-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);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 6px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

Below the result of these statements.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info).

<div id="container">

<div>
<div><h2>3D CSS Ribbon</h2></div>
<div></div> <!-- Left triangle -->
<div></div> <!-- Right triangle -->
<div>
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

We add the two classes to make and place the triangles in style.css… and the style for the content (class info).

.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}

.info {
	padding: 60px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}

Here the result.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

We create a nice menu on the top. Below the markup.

<div id="container">

<div>
<ul>
<li><a href="#">CSS3</a></li>
<li><a href="#">is really</a></li>
<li><a href="#">powerful</a></li>
</ul>
<span>by PV.M Garage</span>
</div>

<div>
<div><h2>3D CSS Ribbon</h2></div>
<div></div>
<div></div>
<div>
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

The style for our top-menu.

.menu {
	position: relative;
	top:3px;
	left: 50px;
	z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
	-webkit-transform: rotate(-45deg); /* rotate the list item */
	-moz-transform: rotate(-45deg); /* rotate the list item */
	width: 50px;
	overflow: hidden;
	margin: 10px 0px;
	padding: 5px 5px 5px 18px;
	float: left;
	background: #7f9db9;
	text-align: right;
}

.menu ul li a {
	color: #fff;
	text-decoration: none;
	display:block;
}

.menu ul li.l1 {
	background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
	background: rgb(131,178,51);
}

.menu ul li.l2 {
	background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
	background: rgb(196,89,30);
}

.menu ul li.l3 {
	background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
	background: rgb(65,117,160);
}

.menu span {
	margin: 15px 80px 0px 0px;
	float:right;
}

Here you can se the simple menu.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Our 3D layout is ready. It’s so sexy, I hope you find the final result attractive and inspiring.

Conclusions

I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari. Some screenshots from different browsers (Windows 7 OS).
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Finally, it’s a good idea to validate the code.

W3C Validation

Response: “This document was successfully checked as XHTML 1.0 Strict!”
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Original link: http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

Filed Under: HTML5 Snippet Tagged With:

Some of JS Engine for making HTML5 Game

May 16, 2012 By Leave a Comment

1. LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.

2. Write AS code into HTML – FlashJS is JavaScript graphics and game development engine with API similar to Flash one.
It`s HTML5 game development tool, based on verified for years Flash methodology.
Just write ActionScript 3 code inside of <actionscript> tag.

3. Crafty is a JavaScript HTML5 Game Engine, Cross Browser compatible, Canvas or DOM, Small file size, Entity Component System, Sprite Map support, Collision Detection, Fire & Forget Events, Lots ‘o Goodies

4.  MelonJS, A lightweight HTML5 game engine … with Javascript, and came from the feeling that no simple, free and standalone library was available to develop games. melonJS is the result of our enthusiasm and past experiments with Javascript, and came from the feeling that no simple, free and standalone library was available to develop games. And although still a work in progress, melonJS already allows to easily create some nice games (see the Gallery page).

Filed Under: HTML5 Games Tagged With:

5+ Impressive Free HTML5 Games You Can Play In Your Browser

May 16, 2012 By Leave a Comment

HTML5 signifies the evolution of markup languageas we know it. Adding a range of new tags, multimedia capabilities and removing the need for many proprietary plugins, it is easy to understand how HTML5 is seen as a big step forward in web development.

Flash games were once the norm when it came to browser-based entertainment, but now thanks to the powerful nature of HTML5 many web applications, streaming services and games are taking advantage of the new bells and whistles.

You’ll need a HTML5 compliant browser to join in, all of these HTML5 games have been tested with the latest stable Google Chrome on Ubuntu 10.10. Other HTML5 compliant browsers include Safari, Firefox and Internet Explorer 9.

Canvas Rider

Blatantly inspired by the classic Line Rider, Canvas Rider allows users to create, share and ride user-generated tracks. If you’ve ever played a physics-based bike game (think Trials, or the more recent Trials HD) then the concept will be very familiar.

html5 games

As a biker you must reach the end of the level, which is considerably easier said than done. Careful use of throttle and lean controls will help maintain your rider’s position on the bike, and when you’re sick of being thrown off all the time you can have a go at creating your own level.

There are hundreds of other users’ creations which can be easily filtered by popularity to reveal some beautifully-crafted levels. Chrome users can install an extension for quick access to Canvas Rider.

VII

VII transforms your whole browser window into a monochrome platform world, with smooth animations, physics and responsive controls. Using both the mouse and keyboard you must navigate, manipulate and clear each screen before progressing.
free html5 games

Your telekinesis can be used to move or surf objects and solve thought-provoking puzzles and predicaments. The quirky art style and character (who vaguely resembles Roger from American Dad) plods along at a sombre pace, allowing you to take in all the HTML5 goodness along the way.

Technically brilliant, graphically pleasing and completely free; VII is a great little introduction to the world of browser-borne platform games.

BoredBoredBored

Whilst VII takes on a more relaxed pace, BoredBoredBored employs a different approach – frantic, death-defying arcade action. Using the arrow keys and your space bar, you (quite literally a dot) must avoid incoming enemy fire whilst propelling yourself into waves of oncoming enemies.

free html5 games

Your only method of attack is accessed via the space bar, the longer you charge your shot; the greater your area of effect.

At the end of the game you will be given a breakdown of how terrible you are, that is unless you make it to the final wave. BoredBoredBored is a fine example of how HTML5 can be used to create an incredibly fast-paced arcade game that can run natively in a browser window.

Sand Trap

Instead of taking advantage of one of the many physics engines for the Flash or Java platform, Sand Trap uses its own built-from-scratch HTML5 effort in this addictive puzzler. Each level contains a maze, and within that maze is a small amount of sand. By rotating the maze, it is your task to syphon the sand into the bucket.

free html5 games

Playing on its simple nature, Sand Trap soon becomes complex and very addictive; especially if you have a soft spot for physics games. This game would probably be even better with a touch interface, if you’re lucky enough to have a tablet PC or similar.

FreeCiv

Civilization in your browser – need I say more? For those of you who do remember the original Civ, FreeCiv is a faithful representation of the Sid Meyer classic that stole so much sleep from those who played it.

html5 gaming

Those that don’t are in for a treat! Don’t let the flat, dated graphics distract you, in Civ the whole world is your oyster. You must explore, settle, trade, mine and generally build a turn-based empire from the comfort of your browser. There’s a tutorial to get you up to speed, and scenarios to play through if you wish.

The option to play against AI or other human players is yours, and you can fully customize your games beforehand. Bye-bye spare time!

The Rest

There were a few games that didn’t quite make the main list but distracted me long enough to warrant a mention, and these were:

Torus

html5 gaming
A nifty take on Tetris, replacing the usual 2D interface with a fully 3D hollow sphere.

Pirates Love Daisies

A delightful HTML5 tower defence game that gives some of the premium efforts out there a run for their money.

JSLander

html5 games

A faithful Lunar Lander clone coded in HTML5 and JavaScript.

Hint: you’ll need a Y velocity below 6 not to crash and below 3 for the perfect landing.

World’s Biggest Pac-Man

An awesome selection of custom Pac-Man levels, all linked together. Bored of your current maze? Exit and seamlessly join the next!

Conclusion

If you’ve not upgraded to a HTML5 compliant browser yet, you’re probably missing out on the web’s hottest new tricks. As a Linux user, constant Adobe Flash crashes, glitches and sluggish behaviour is to be expected on my system. Not once whilst testing any of the games in this article did my PC flinch.

There are some things online that only Flash can do… for everything else there’s HTML5.

Any HTML5 games that tickle your fancy? Which browser do you use? Have your say in the comments below.

[Read more...]

Filed Under: HTML5 Games Tagged With:
« Older Posts
Ping your blog, website, or RSS feed for Free Sitetag