StudywithDemo: HTML5 and CSS3 Tutorials

HTML5 Canvas API Examples

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this HTML5 introduced the canvas API to create own graphics in our websites with help of JavaScript. It creates a drawing surface a blank area with in the browser that area is marked of in XY coordinates. In this tutorial i want to explain how to create different shapes using canvas element easily with examples. Lets Start with rectangles</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
The rectangles are fully supported by the canvas tag and it has three set of properties like stroke, fill, clear. In this sample ex i have created canvas it has blue outline and filled with green background color and inside the canvas i just drawn  the sample shape rectangle and filled with light green. Please look the example</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDjRUP7m0jXau36og-URXHWn2C2IqK7J98dd7WEUjkWh1kSJ2qW9FBIvP69PDipvhmE0MyU7TzL44SZdr1wKtkyQ0i0tSPuAu6ZOgmlXeP6O3aM5W7hMXMs0khu9iXapT2heYT71v5w0/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDjRUP7m0jXau36og-URXHWn2C2IqK7J98dd7WEUjkWh1kSJ2qW9FBIvP69PDipvhmE0MyU7TzL44SZdr1wKtkyQ0i0tSPuAu6ZOgmlXeP6O3aM5W7hMXMs0khu9iXapT2heYT71v5w0/s1600/Capture.PNG" width="320"></a></div>
</div>

HTML5 Canvas API Examples

One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this ...

Customizing the HTML5 Video and Audio Controls

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
One of the most powerful feature of HTML5 is supports for audio and video tags this feature allows you to reduce the third party plug-ins  like silverlight and flash. HTML5 programmers has really done nice job  by developing these tags. These video and audio tags contains predefined controls but I want to develop custom controls using javascript according to real time requirements. Creating custom video play and pause buttons are very easy when compare to creating stop, forward, reverse buttons and also developed the custom audio controls to increase and decrease the volume. One more think can also develop same code in jquery. Lets begin</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3c68Uh6xMAPVppZHzyONw0EUDg4VsXPMO0UZMiogsCv0eItAtK2ru0cy5h3sBIxa0k6GejQUxwRxfrxMnrXCwKtrvaIYeVqnSrGTbxx4hp6JBUaFXYCSa4jgr3TXyBZAe-iQhEEugrk/s1600/video+and+audio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="453" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3c68Uh6xMAPVppZHzyONw0EUDg4VsXPMO0UZMiogsCv0eItAtK2ru0cy5h3sBIxa0k6GejQUxwRxfrxMnrXCwKtrvaIYeVqnSrGTbxx4hp6JBUaFXYCSa4jgr3TXyBZAe-iQhEEugrk/s1600/video+and+audio.png" width="640"></a></div>
</div>

Customizing the HTML5 Video and Audio Controls

One of the most powerful feature of HTML5 is supports for audio and video tags this feature allows you to reduce the third party plug-ins ...

How to Access HTML5 Data Attributes using JQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery contains data() and attr() methods by using this we will see how to set and get HTML5 data-attributes data. HTML5 has brought  lot of interesting changes into html one of the item that is very helpful in client side programming is data-* Attributes provide a way to store custom data on elements.</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
Jquery easily read and write data using two approaches but there are some differences between them here we can except different outputs so observe the examples carefully.</div>
<div style="text-align: justify;">
<br>
<b>Example</b><br>
<br></div>
<div style="text-align: justify;">
<pre class="brush:html"><!DOCTYPE html>
<html>
<head>
    <title>Accessing HTML5 Data-* Attributes Example</title>
</head>
<body>
    <div id="attendanceList"  
     data-name="faruk" 
     data-age="24" 
     data-gender="male"
     data-attended ="true"
     data-object='{"name": "faruk", "gender":"male", "age": 24, "attended": true}'>
     Today Faruk Attended to Class
 </div>
    
    <h1>How to set /get data-* values using attr() function</h1>
    <div id="attrOutput"></div>
    <h1>How to set /get data-* values using data() function</h1>
    <div id="dataOutput"></div>
    <script src="jquery.min.js"></script>
    <script>
        var $attendanceList  = $("#attendanceList ");
        var $attrOutput = $("#attrOutput");
        var getName = $attendanceList.attr("data-name");
        var getAge = $attendanceList.attr("data-age");
        var getGender = $attendanceList.attr("data-gender");
        var addingOneToAge = getAge + 1;
        var getAttended = $attendanceList.attr("data-attended");
        var getObject = $attendanceList.attr("data-object");
  
        $attrOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
        <br /><br />Age: " + getAge + " = " + typeof (getAge) +"
        <br /><br />Age + 1: " + addingOneToAge +"
        <br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
        <br /><br />Object: " + getObject);
       
  //var setName = $attendanceList.attr("data-name","shaik");
  //alert(setName.attr("data-name"));
  
  var $attendanceList  = $("#attendanceList");
        var $dataOutput = $("#dataOutput");
        var getName = $attendanceList.data("name");
        var getAge = $attendanceList.data("age");
  var getGender = $attendanceList.data("gender");
        var addingOneToAge = getAge + 1;
        var getAttended = $attendanceList.data("attended");
        var getObject = $attendanceList.data("object");
  
        $dataOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
        <br /><br />Age: " + getAge + " = " + typeof (getAge) +"
        <br /><br />Age + 1: " + addingOneToAge +"
        <br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
        <br /><br />Object: " + getObject);
  
  //var setName = $attendanceList.attr("data-name","shaik");
  //alert(setName.data("name"));
    </script>
</body>
</html>
</pre>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #990000;">Output Screenshot</span></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" width="640"></a></div>
</div></div>

How to Access HTML5 Data Attributes using JQuery

In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery co...

CSS3 Rounded Corners and Box Shadows Example

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we going to take look of some nice features in CSS3 provide rounded corners, drop shadows and few new color management features. It doesn’t matter if your are developer or designer at the end of the day our job is basically same we have to create rich, usable website and web application with an awesome user experience.</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
First we will see how to create rounded corner. Rounded corners are nothing but rounds the corner(s) of an element with a defined radius value. I have taken three div tags and each div has a different border class . Look at the top div the border radius property is 20px and applied same pixel to all the four corners. We can also specify amount in percentage for example 1%. If you want to define different border radius on each corner look the second div and last div contains the individual border property.<br>
<br>
<pre class="brush:css">    
 div {
      font-family: verdana, arial; 
      font-size: small;
      padding: 10px;
      width: 400px;
      height: 50px;
      background-color: orange;
    }
    
    .borderEffect1 {
      border-radius: 20px; 
    }
    
    .borderEffect2 {
      /* top-left top-right bottom-right bottom-left */
      border-radius: 10px 50px 10px 0px; 
    }
    
    .borderEffect3 {
      border-top-left-radius: 10px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 0px;
    }
</pre>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOPdRuZI2dwZQG5q7i0sSWvj4tZeNS1WJfNaREGrFGrEulpViwJ8pc2ShEe1BEgolJvzWnQ2OowwcChMNxgkXC38Yx2ttDVTq_nSQka1Ig79QMgOqUyjtj-VB3Vj_5QVtVduEVznPijc/s1600/borders.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rounded Corners and borders" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOPdRuZI2dwZQG5q7i0sSWvj4tZeNS1WJfNaREGrFGrEulpViwJ8pc2ShEe1BEgolJvzWnQ2OowwcChMNxgkXC38Yx2ttDVTq_nSQka1Ig79QMgOqUyjtj-VB3Vj_5QVtVduEVznPijc/s1600/borders.PNG" title="" width="400"></a></div>
<div style="text-align: justify;">
Box shadow is a new property in CSS3. It takes five values horizontal offset the positive number means up shadow and negative number means down shadow, vertical offset, blur distance, spread distance, color, and inset. I have taken series of div tags and applied shadow class for each div.<br>
<pre class="brush:css"> 
 div {
      font-family: verdana, arial; 
      font-size: small;
      padding: 10px;
      width: 300px;
      height: 40px;
      background-color: pink;
      border-radius: 5px;
    }
   
    .dropShadow1 {
      box-shadow: -10px -10px skyblue; 
    }
    
    .dropShadow2 {
      box-shadow: 10px 10px skyblue; 
    }
    
    .dropShadow3 {
      box-shadow: 10px 10px 20px skyblue; 
    }
    
    .dropShadow4 {
      box-shadow: 10px 10px 20px 10px skyblue; 
    }
    
    .dropShadow5 {
      box-shadow: 10px 10px 20px skyblue inset;
    }
</pre>
</div>
<div style="text-align: justify;">
<br></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="box shadow CSS3 example" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KNwaGnwip3Jmfuh-ChfGoVMK0vRhXiPWE10EmzhfhooSkPFK7yuGcTiy8cIxLUQ9pfdErRn4vm9O6cYawdnEq9pL9GD_tB7uLu-3kWHrn6GtfeAQwjBmprxYrdAw2O0DoS8p6Z_oogY/s1600/C3.PNG" style="margin-left: auto; margin-right: auto;" title=""></td></tr>
<tr><td class="tr-caption" style="text-align: center;"></td></tr>
</tbody></table>
</div>

CSS3 Rounded Corners and Box Shadows Example

In this tutorial we going to take look of some nice features in CSS3 provide rounded corners, drop shadows and few new color management fe...

HTML5 Data Storage Example

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
One of the key feature in HTML5 is ability to store data on the local machine is known as data storage. Html 5 data storage is an extension of the already existing cookie mechanism.  There are two types of storages one is session storage and another is local storage. These two types share same methods and properties but the difference is how long data is stored. In either case both types are origin depended which means the data we treat must be from the same source or the same server. The data is stored as items. Items are nothing but key/value pairs.<br>
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEyyUbD-SBsuzan297txZt1033pjSBPaBOIKJD8fZa_bGpNvoqoxdnx70WT6xwdpXzVM2eKUakDDc1BZcqocNIsAAO-YdSV5sCXlvdpLYcUqJkfPqZV8cFF4h-mEEUAasQn-cisOabDM/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML5 SESSION STORAGE AND LOCAL STORAGE" border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEyyUbD-SBsuzan297txZt1033pjSBPaBOIKJD8fZa_bGpNvoqoxdnx70WT6xwdpXzVM2eKUakDDc1BZcqocNIsAAO-YdSV5sCXlvdpLYcUqJkfPqZV8cFF4h-mEEUAasQn-cisOabDM/s1600/Capture.PNG" title="" width="640"></a></div>
</div>

HTML5 Data Storage Example

One of the key feature in HTML5 is ability to store data on the local machine is known as data storage. Html 5 data storage is an extensio...

How to Create a Resume in HTML Format

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial i would like to tell about how to create a resume in html. Before moving to this tutorial i want to share my personal experience why i have created resume in html format. In my first interview almost i answered every question in j2se, j2ee, struts, spring, hibernate, ajax, mysql etc. I thought interview was completed but at last moment interviewer asked me to explain how to make a resume in html then i have explained it and later he asked to do it practically .By god grace i have already know the html so i just created and given to him. Now im the first person shortlisted. So i want to present this resume infront of you.</div>
<div style="text-align: justify;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #e06666;">Screenshots</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk6emO8YdBhNkFOTAysQ5Vp3XPgGBfAhJQ_257JokqMqDbkO50cb8i6hHi_bq50TGdxVrM-A-1E3Nv1-T17CkbAc2YnrgRr7BOYjUpWl6jDhsHEkAUSAQVHLPf2IsDvLwv42yjiqOuZ-I/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Java Developer or Software Engineer Freshers Resume page 1" border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk6emO8YdBhNkFOTAysQ5Vp3XPgGBfAhJQ_257JokqMqDbkO50cb8i6hHi_bq50TGdxVrM-A-1E3Nv1-T17CkbAc2YnrgRr7BOYjUpWl6jDhsHEkAUSAQVHLPf2IsDvLwv42yjiqOuZ-I/s1600/1.png" title="" width="400"></a></div>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGL70ZvfOxXX0Rdp46QLKleIpWhv6YYFmHTkC3heDiyzWUG2r0rotorSlKWAMnncYj4XE8hanWMPRQ315nrOMZj8Fv0lWfp8z8cXZ3NFUjOeaBj_r-INbXrA9Nw1oOd2JG0TGbDDcWiY/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Java Developer or Software Engineer Freshers Resume page 2" border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGL70ZvfOxXX0Rdp46QLKleIpWhv6YYFmHTkC3heDiyzWUG2r0rotorSlKWAMnncYj4XE8hanWMPRQ315nrOMZj8Fv0lWfp8z8cXZ3NFUjOeaBj_r-INbXrA9Nw1oOd2JG0TGbDDcWiY/s1600/2.png" title="" width="400"></a></div>
<br>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>

How to Create a Resume in HTML Format

In this tutorial i would like to tell about how to create a resume in html. Before moving to this tutorial i want to share my personal exp...

HTML5 new tags

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="MsoNormal" style="background-color: white; background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; margin-bottom: 0.0001pt; text-align: justify;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Hai everyone today i will
introduce some of the new tags or elements in html5 along with explanation. This HTML5 tags are also known as Semantic Elements. Html5 is a latest hyper text markup language and next level to html. Web
design is going forward by integrating various types of technologies such as HTML5,
CSS3 and Bootstrap. Some of the older tags have been eliminated and new tags
have been added. Lets have a look on importance of html5.<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: white; background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; margin-bottom: 0.0001pt; text-align: justify;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br></span></div>
<div style="text-align: center;">
<b><span style="color: #e06666;">Screenshot</span></b></div>
<div style="text-align: center;">
<b><span style="color: #e06666;"><br></span></b></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0a6mseB5toKGkMkT1QfLaBS5PR5YJRlYdipme2dTkyHI0wl-7JT_LetDAwY3-A5_33VfTEHYTRsWLPsgBoYtH3C5Zl6Q0XKwH_oetQYg0lFxnduDRd573nt3Gcuvjue8Z-M0hwz1KjfI/s1600/studywithdemo+html5+tags.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0a6mseB5toKGkMkT1QfLaBS5PR5YJRlYdipme2dTkyHI0wl-7JT_LetDAwY3-A5_33VfTEHYTRsWLPsgBoYtH3C5Zl6Q0XKwH_oetQYg0lFxnduDRd573nt3Gcuvjue8Z-M0hwz1KjfI/s320/studywithdemo+html5+tags.png" width="300"></a></div>
</div>

HTML5 new tags

Hai everyone today i will introduce some of the new tags or elements in html5 along with explanation. This HTML5 tags are also known as S...