Among the various forms of task bars and menus that can be created with the help of CSS3 only, the flying menu is one interesting yet easy to implement type. This menu would be implemented in this tutorial with the use of CSS3 only. The transition propertyof CSS3 would be used in this implementation which is quite powerful and allows the creation of animations without any need of JavaScript or Flash. To begin with the implementation, you would need to create the menu with unordered list, which can be done with simple HTML5 and has been discussed in some of the previous tutorials, so we would skip this part.

To start with, we would need HTML tags to place the CSS IDs and classes within:

<ul id="fly-menu">
<li>
<a href="http://www.etechy101.com">
<img src="images/heart.png" alt="etechy101.com"> Etechy101 Home
</a>
</li>

<li>
<a href="http://feeds.feedburner.com/Etechy101">
<img src="images/rss.png" alt="rss"> Subscribe RSS Feed
</a>
</li>

<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Etechy101">
<img src="images/email.png" alt="email"> Subscribe Email
</a></li>

<li>
<a href="http://twitter.com/StarcomSystems">
<img src="images/twitter.png" alt="twitter"> Follow Twitter
</a>
</li>
</ul>

The list that would be implemented would be, by default, arranged vertically and to adjust it in a horizontal position, the CSS3 property of float would be used with ‘left’ value:

.cleaner {
clear: both;
}

#fly-menu, #fly-glow-menu {
margin: 1em auto 0 auto;
}

#fly-menu li, #fly-glow-menu li {
list-style-type: none;
margin-right: .5em;
float: left;
font-size: 15px;
background: #cacaca;
padding: 10px;
cursor: pointer;
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}

Now we need to give the floating effect to the menu elements with the help of the :hover property. With this property, the menu would float when we hover upon it.

#fly-glow-menu li:hover {
margin-top: -1em;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}

And this completes the easy and simple implementation of a flying menu in which we don’t need anything other than CSS3. The menu can be used on personal blogs and websites to increase the beauty or according to preference.

Local storage over the internet is supported by most of the modern browsers. This local storage provides functionality similar to that of cookies, but it is different from cookies to some extent. In a sense, the storage provided by this method is much more refined and better compared to simple cookie storage. In this method, data stored in a browser would only be deleted from the local machine when requested to do so by the user. Generally, a browser will always avoid deleting data while a script that could access that data is running. Web browsers expose Web Storage through the localStorage object in JavaScript. One easy way to determine whether a Web Browser can support Web Storage is to execute this JavaScript code:

var webStorageSupported = ('localStorage' in window) && window['localStorage'] !== null;

There is a certain set of methods that is implemented by local storage to undertake the task of data storage. Important methods and properties are discussed below:

interface Storage {
readonly long <strong>length</strong>;
void <strong>setItem(String key, Object data)</strong>;
Object <strong>getItem(String key)</strong>;
void <strong>removeItem(String key)</strong>;
void <strong>clear()</strong>;
String <strong>key(long index)</strong>;
};

[inline_ads]
The length property is very useful. It will return the number of key/value pairs currently saved to Local Storage under the currently accessed domain:

alert(localStorage.length);

In case there isn’t any keyword previously stored in the local storage, then the above script will display an alert window with “0″ as the message, otherwise the message will be the number of persisted key/value pairs.

Another important method is setItem(key, value)which saves a new entry on the local machine. For this purpose, following code is executed:

localStorage.setItem('name', 'arman');

We also have another noteworthy method named getItem(key) whose purpose is to ensure that key name (in the above script) was truly saved to the local storage with the value arman.

localStorage.setItem('name', 'arman');
var value = localStorage.getItem('name');
alert(value);

There are a lot of other important methods used in local storage to provide much more efficient storage compared to cookies. Some of the further methods and properties would be discussed in a future tutorial.

The property of multiple backgrounds in CSS3 is very powerful and can be used for a variety of purposes in web development and programming. But still many people using CSS3 do not make the right use of this feature. Initially, this feature existed only in Safari but eventually all the updated browsers were equipped with this support. To add multiple backgrounds in your page, you need to go through the simple process of adding a background and after that, add this piece of code after a comma:

div {
background-image: url(image1.jpg), url(image2.jpg);
}

But another important thing is to define the location of the background image without which it might not work properly. Defining the position of the image is done in, more or less, the ordinary way. For multiple backgrounds, all you need to do is to repeat the process.

div {
background-image:     url(image1.jpg),  url(image2.jpg);
background-position:  top left,         bottom right;
background-repeat:    no-repeat,      repeat-y;
}

Adding more than two images can also be performed in an easier way:

div {
background-image:
url(image1.jpg), url(image2.jpg), url(image3.jpg);
}

The following code would comprehensively add multiple images in the background and would also make boxes with rounded edges that resize perfectly well:

div {
background: url(images/middle.gif);
color: white;
padding: 12px;
background-image:
url (images/bottomleft.gif), url(images/bottomright.gif),
url (images/topleft.gif), url(images/topright.gif),
url (images/top.gif), url(images/bottom.gif),
url (images/left.gif), url(images/right.gif),
url (images/middle.gif);
background-position:
bottom left, bottom right, top left, top right, top left,
bottom right, top left, top right, bottom left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x,
repeat-x, repeat-y, repeat-y, repeat;
}

This completes the attainment of the multiple backgrounds. The process is quite simple and straightforward and for anyone having prior knowledge of CSS3, this can be performed within a few minutes.

A lot of interesting developments can be performed with the help of HTML5 <canvas> element. In today’s tutorial, we would create a simple puzzle game with the help of this element. The HTML and CSS that we would need for initial stages is quite easy to comprehend. Specifically, we would need <canvas> element with specified ID and a container styled with some CSS:

<div id="lightcontainer">
<canvas id="lightpanel" width="500" height="500"></canvas>
</div>

#lightcontainer { margin:20px auto; width:500px; }
#lightpanel { background-color:#002B33;
-moz-box-shadow:0 0 5px #999; -moz-border-radius:10px;
-webkit-box-shadow:0 0 5px #999; -webkit-border-radius:10px;
box-shadow:0 0 5px #999; border-radius:10px;
}

[inline_ads]
A brief explanation of the steps involved in development is in order. First of all, we need to create a field with 5 by 5 light panels. Since the light switch in the game turns on and off at regular intervals, we need to apply that logic accordingly. The starting position and coordinates of the game can be adjusted with the help of JavaScript.

$("#lightpanel").click(function(e) {
// e will give us absolute x, y so we need to calculate relative to canvas position
var pos = $("#lightpanel").position();
var ox = e.pageX - pos.left;
var oy = e.pageY - pos.top;
// Check which fields we need to flip
// 100 = width of the tile
var yField = Math.floor(oy / 100);
var xField = Math.floor(ox / 100);
// The field itself
lightField[yField][xField] = lightField[yField][xField] == "x" ? "o" : "x";
repaintPanel();
});

Code for the remaining directions can be added accordingly. The function repaintPenal () is explained as follows:

function repaintPanel() {
var canvas = document.getElementById("lightpanel");
if (!canvas.getContext){
alert("This demo requires a browser that supports the <canvas> element.");
return;
} else {
clear();
var ctx = canvas.getContext("2d");
var allLightsAreOff = true;
for(var i = 0; i < lightField.length; i++) { // Rows
for (var j = 0; j < lightField[i].length; j++) { // Columns
ctx.lineWidth = 3;
ctx.strokeStyle = "#83BD08";
ctx.beginPath();
// arc( x, y, radius, startAngle, endAngle, anticlockwise)
ctx.arc(j * 100 + 50, i * 100 + 50, 40, 0, Math.PI*2, true);
// Actual draw of the border
ctx.stroke();
// Check if we need to fill the border
if(lightField[i][j] == "x") {
ctx.fillStyle = "#FFBD38";
ctx.beginPath();
ctx.arc(j * 100 + 50, i * 100 + 50, 38, 0, Math.PI*2, true);
ctx.fill();
// Since we need to fill this field, not all the lights are off
allLightsAreOff = false;
}
}
}

// Check if all the lights are off
if(allLightsAreOff) {
// User can't click anymore
userCanClick = false;
// Show message
alert("All lights are off, you finished the game!");
}
}
}

Above function was the most important in the implementation of this simple game and with this, you can try out this game on your browser. It might not be as good as the original version of the game but you would certainly enjoy it.

CSS3 in conjunction with JQuery can be used to develop an attractive feed widget which would display the feed on blog or website’s sidebar. This can be used to display the latest posts, news or comments present on the website. The choice between different feed formats can be set according to the requirement. First of all, we need to set the HTML structure of the widget. For this, we would use the following code:

<div id="feedWidget">

<div id="activeTab">
<!-- The name of the current tab is inserted here -->
</div>

<div class="line"></div>

<div id="tabContent">
<!-- The feed items are inserted here -->
</div>

</div>

After this comes the part of CSS3, which would be used to style the widget. Only the styles that are directly used by the widget are included here.

#feedWidget{
background:url(img/bg.png) repeat-x #47525c;
border:2px solid #48535e;
margin:0 auto;
width:200px;
padding:5px;
position:relative;

/* Remains hidden if JS is not enabled: */

display:none;
z-index:20;
}

#activeTab.hover,.dropDownList{
background:url(img/drop_arrow.png) no-repeat 95% 50% #47525c;
border:1px solid #38434d;
margin:-1px;
cursor:pointer;

/* CSS3 round corners: */

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

#activeTab,.dropDownList div{
color:white;
cursor:pointer;
font-size:20px;
margin:0 2px 0 0;
padding:5px;
text-shadow:0 1px 1px black;
}

In the above code, special hover class has been defined for the #activeTab div. instead of the regular :hover pseudo-class. This has been done because the later is more appropriate only when multiple tabs need to be shown. After CSS3, we make use of JQuery for specifying the declarations of different feeds and handling the output of those feeds.

$(document).ready(function(){
/* Counting the tabs: */
var totalTabs=0;
$.each(tabs,function(){totalTabs++;})
$('#feedWidget').show().mouseleave(function(){

/* If the cursor left the widet, hide the drop down list: */
$('.dropDownList').remove();
$('#activeTab').removeClass('hover');
})

.mouseenter(function(){
if(totalTabs>1) $('#activeTab').addClass('hover');
}};

$('#activeTab').click(showDropDown);
$('.dropDownList div').live('click',function(){
showDropDown();
showTab($(this).text());
});

showTab('@tutorialzine');
}};

You can create additional functions and include them in the tabs object. This would further enhance the functionality of your feed widget.

You can create a completely customizable portfolio with the help of HTML5 and optionally using JQuery. First of all, we would need to write a markup for the HTML5 document, after which we would proceed on to the JQuery code. The markup HTML5 code is as follows:

<html>
<head>
<meta charset="utf-8" />
<title>Making an HTML5 Portfolio - eTechy101.com Demo</title>
<link rel="stylesheet" href="assets/css/styles.css" />
</head>

<body>
<header>
<h1>My Portfolio</h1>
</header>

<nav id="filter">
</nav>

<section id="container">
<ul id="stage">
</ul>
</section>

<footer>
</footer>

[inline_ads]
You would see certain new HTML5 elements in the above code which were not part of the previous versions. The main heading would be included in the holder element while unsorted detail of all the required lists would be inserted in the section element. Additionally, we would need a content filter which would be styled as a green bar under thenevelement. All the portfolio items would be included in the #stage list which is unordered for the time being.

The items would further be explained in a piece of code given below where each of them would have an HTML5 data attribute defining a series of comma separated tags. Recording of tags and creation of categories would be done latter with the use of JQuery. So the items along with their tags are:

<li data-tags="Print Design">
<img src="assets/img/shots/1.jpg" />
</li>
<li data-tags="Logo Design,Print Design">
<img src="assets/img/shots/2.jpg" />
</li>
<li data-tags="Web Design,Logo Design">
<img src="assets/img/shots/3.jpg" />
</li>

Now comes the work of JQuery which is to loop through the portfolio items in the #stage list and at the same time, create an unordered list for every tag that it comes across. A new menu option would also be created with JQuery:

$(document).ready(function(){
var items = $('#stage li'),
itemsByTags = {};
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
elem.attr('data-id',i);
$.each(tags,function(key,value){
value = $.trim(value);
if(!(value in itemsByTags)){
itemsByTags[value] = [];
}
itemsByTags[value].push(elem);
});
});

Tags are added in the form of an array to the itemsByTags object. So basically itemsByTags would be holding the array of the items having Web Design among their tags. What now remains is styling the page which can further be done with the help of CSS.

Using faux columns is a technique to create a background image which simulates equal-height columns. However, the drawback with the simple technique that was used previously was that it only worked with fixed-width columns. That problem was overcome with the advent of liquid faux columns, which uses some background-position trickery and a bit of math to create a variable-width effect. With the introduction of background-size in Safari and Opera, however, faux columns are about to become a lot easier; all you need to do is create a background image and assign a percentage value to background-size, allowing the image to expand or contract with its containing box.

The way this is done is with a simple PNG image; here we’ve made it 1000px wide, with two colored columns of 250px each, so that it’s easier to calculate column widths. The background-image has been set on the html element, which has been assigned a width of 90%. Inside this there is a container div with a width of 100%, and three columns with the widths set at the same ratio as the background image:

<div id="container">
<div id="one"> </div>
<div id="two"> </div>
<div id="tre"> </div>
</div> 

#container {
position: relative;
width: 100%;
} 

#one {
margin: 0 25%;
} 

#two, #tre {
position: absolute;
top: 0;
width: 25%;
} 

#two {
left: 0;
} 

#tre {
right: 0;
}

[inline_ads]
The html element has the background-size declaration applied to it, with a percentage value to make it liquid, using the browser-specific prefixes followed by the proposed declaration (for safety):

html { background-image: url(‘opera_bg.png’); -khtml-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 90%; background-size: 100%; background-position: 50% 0; background-repeat: repeat-y; width: 90%;

Webkit value is different from the others; during this test, it seems that Webkit obtains its width from the entire browser window, not from the containing element; therefore, we have to set this value to be equal to the width of the containing element. After that the background-position and background-repeat declarations have been added; background-repeat to tile the image down the page, and background-position because Webkit seems to ignore the margin values and puts the image at top left of the browser window; this is only necessary if you’re centre-aligning your page. This was just a short glimpse at the technique whose applications can further be explored.

Although common tags were present in the previous versions of HTML, HTML5 introduced special structural tags which considerably enhanced the power and ease of web programming. For a majority of everyday programming, these tags would eventually replace many of the typical div entries from the code. The definition of the structure starts with the tag:

<section>

A section is a thematic grouping of content, typically preceded by header, and ends with footer. Sections can be nested inside of each other, if needed, and can hold any amount of typical markup. The <header> of a section is typically a headline of grouping of headlines but it may also contain further helpful information about the section. A <footer> typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. <nav> is a tag that defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer. Finally, we have <article> and <aside> tags which are used for an independent entry and tangentially related content respectively. Following comprehensive example makes use of all these tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    <footer>
      <p>Ending line</p>
    </footer>
  </body>
</html>

As you can see, the tags themselves are much more descriptive than simply providing an id attribute to a div. This also gives the added benefit of a descriptive closing tag, as </article> is much more understandable that wondering which <div id=”something”> goes with a given </div>. At present, some of the browsers are missing full support for the structural tags of HTML5, but it would eventually become an integral feature of every browser.

With the canvas element present in HTML5, a lot of interesting things such as games, video effects and graphs etc can be created.  It can also be used to produce some slightly less complex effects, like manipulating images on the page. In this tutorial we would use the canvas element to create vector masks and use them to modify images. For this purpose, first we need a canvas tag in our page:

<canvas id="c" width="200" height="158"></canvas>

This just sets up a simple canvas with the width and height of our image. We have chosen these dimensions so that it does not take up any more space than is needed. Next in JavaScript we will get the canvas and its drawing context in JavaScript:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d')

So now we are ready to begin drawing our image into the canvas.

We have our canvas set up, now we need to draw the image into that canvas. We can do this easily, but we need an HTML img element with our image in order to draw it. We could grab an <img> tag from our page, but we can do it using JavaScript.

// Create an image element

var img = document.createElement('IMG');

// When the image is loaded, draw it

img.onload = function () {

ctx.drawImage(img, 0, 0);

}

// Specify the source (src) to load the image

img.src = "http://i.imgur.com/gwlPu.jpg";

[inline_ads]
Here we are creating a new element for our image. Since we can’t draw the image until it has been downloaded, we need to wait for onload to draw it. Inside of the onload listener, we call the ctx.drawImage(), and pass it the img element. We also pass 0, 0 meaning we want to draw 0 pixels from the top and left.

In the canvas, we can use a technique called clipping. We can use a path we define to specify that future operations should only affect the area within the path. Since the canvas is transparent, if we create a clipping path, and then draw the image, the image will only show up inside the shape of that path. So let’s draw a circle, clip to that path, and draw the image:

// Create an image element

var img = document.createElement('IMG');

// When the image is loaded, draw it

img.onload = function () {

// Save the state, so we can undo the clipping

ctx.save();

// Create a circle

ctx.beginPath();

ctx.arc(106, 77, 74, 0, Math.PI * 2, false);

// Clip to the current path

ctx.clip();

ctx.drawImage(img, 0, 0);

// Undo the clipping

ctx.restore();

}

// Specify the source (src) to load the image

img.src = "http://i.imgur.com/gwlPu.jpg";

You may notice the ctx.save() and ctx.restore() calls. This is because anything we try to do to the canvas after we clip it will only work within the clipping region. We call save() before we clip and then call restore() after, and the state of the canvas will be restored to before the clipping was applied. Everything you drew will remain, but the clipping definition will be gone. So the entire thing can also be done without clipping, but clipping can be used to further enhance the beauty of the overall effects.

Although CSS3 transition property is pretty simple, but creating 3D stuff using this and other properties can be quite cumbersome at times. This tutorial is reserved to create 3D animations in CSS3 in a least difficult way. This would be done using a special property of CSS3 which can be found in the library with the name of -webkit-perspective. This property is what would be used in this tutorial as well.

The most important role in the execution of this task would, once again, be performed by HTML. It goes like this:

<ul id="movieposters">
<li>
<img src="images/01_iron_man_2.jpg" alt="Iron Man 2" />
<div class="movieinfo">
<h3>Iron Man 2</h3>
<p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>
<a href="#" title="Iron Man 2">More info</a>
</div>
</li>
<!-- More movie posters here -->
</ul>

[inline_ads]
After that would come the CSS3 part which would mainly utilize the Safari reference library for CSS3 visual effects. This would work equally well with most other latest browsers.

#movieposters
{ list-style:none; margin:100px 0; height:550px; }

#movieposters li
{ display:inline; float:left;
-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }

#movieposters li:hover
{ -webkit-perspective: 5000; }

#movieposters li img
{ border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }

#movieposters li:hover img
{ -webkit-transform: rotateY(0deg); }
.movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;
-moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
-webkit-transform: translateZ(30px) rotateY(30deg);
-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }

#movieposters li:hover .movieinfo
{ -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }

.movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }

.movieinfo p { padding-bottom:15px; }

.movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto;
-moz-border-radius:5px; -webkit-border-radius:5px; }

.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }

The above code would give the beautiful effects of 3D, including rotation, hovering and transitions. However, since this property is relatively new, some browsers might have problems executing it in the way it should be. Other than these minor problems, everything is perfectly fine with this animation code.