Home » Archive

Articles in the HTML5 Category

CSS3, Design, HTML5, jQuery »

[10 Apr 2013 | No Comment | ]

Mobile & Tablet Emulator is an useful online tool to check the screen resolution on different mobile and tablet devices.
Do you check your mobile website screen resolution on multiple devices straight from your desktop. It is now possible with this mobile emulator.
Launch >> Mobile & Tablet Emulator
Below web app screenshot and some the devices in which you can check your screen resolution.
Mobile Emulator Web app screenshots:
Screenshot1

Screenshot2

Screenshot3

Mobile devices supported:

BlackBerry: 320×240
iphone4s: 320×480
iphone5: 320×568
Galaxy S3: 360×640
Lumia 900: 480×800

Tablet devices supported:

Kindle Fire 7: 533×853
Google Nexus: 603×966
Apple iPad: 768×1024

Download directly from Google webstore. Best …

CSS3, Design, HTML5 »

[3 Mar 2013 | No Comment | ]

Now we can create eye catching animation using CSS3 and HTML5, so to describe that feature. We have explained how to create ticking or rotating clock hand in middle of the circle using CSS3 animation.
In this simple article on creating CSS3 animation we have used two important CSS3 properties.

animation
@keyframes

Note that we have to add prefix of -webkit-, -moz-, -ms-, -o-, infront of animation and keyframes to work on respective browsers.

 
Simple HTML5 CSS3 Animation code:
Below is the sample code which creates the ticking hand animation over circular background. Code explanation is …

CSS, CSS3, Design, HTML5, Javascript »

[24 Feb 2013 | No Comment | ]

Simple javascript and html coded calculator does simple operations like Addition, Subtraction, division and multiplication.
The code is free to use or modify.
I am distributing to code to be useful for beginners.

Simple Calculator (html, css, javascript)
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
</head>
<style>
#wrapper
{
width:250px;
height:330px;
background:#333;
position:absolute;
}
#container{
width:95%;
height:95%;
position:relative;
left:5px;
top:7px;
border:1px solid #666;
background:#666;
}
.inputClass
{
padding:10px 0px;
margin:4px 0px 0px 4px;
text-align:right;
font-size:14px;
font-weight:600;
}
.numericBTN{
width:52px;
height:30px;
margin:20px 0px 0px 4px;
}

.controlBTN
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000;
background: -moz-linear-gradient(
top,
#f5c7d7 0%,
#ff5c5c);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f5c7d7),
to(#ff5c5c));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ff5c5c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px …

CSS, CSS3, Design, HTML5 »

[18 Jan 2013 | No Comment | ]

To create layout which scales across multiple devices, We dont always use the same content or images across the smaller screen size devices.
It is wise to use minimal content in small screen devices. So while creating responsive design!! means loading different stylesheet pages or applying different styles for the content. We want remove some containers from the layout inside media queries CSS.

HTML5 Tutorials
CSS3 Tutorials

 

Problem:
How to remove some of the text or image content from HTML page on small screen devices while using media queries?, But which is better way to …

HTML5, Javascript »

[5 Nov 2012 | No Comment | ]

When building game for IOS device using HTML5 we may need to detect the IOS device tilt direction to move the Car, Space ship or any Object in same direction. There are lots and lots of user interactive games or apps can be done with this. In this article we have shared the code which makes it possible to tilt programming objects to react with user action of tilting the IOS device.
Note: Please note that the code works only in IOS browser. 
Will not work on the HTML5 enabled browser …