Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

HML5 Canvas Curves

HML5 Canvas Curves 1. Canvas Arc Creating Arc HTML5 Canvas, by using arc() method. HTML <canvas id="myCanvas1" width="578" height="250"></canvas> Script <script> var canvas = document.getElementByI...

Bootstrap versus Foundation

*{margin:0;padding: 0;} .mdUP table{border-collapse: collapse;width: 100%;margin:10px 0;} .mdUP table thead{background: #ccc;} .mdUP table th, .mdUP table td{padding: 5px;text-align:center;border:1px solid #ccc;} ...

Guide to Flexbox

pre{padding:4px;margin:5px 0;border-radius:0;color:#fff;background:#333;border:none;} Introduction : The flexible box called as flexbox is an powerful idea to give the container ability to alter their items You can adjust child eleme...

stylish check box using pure css

Hi all, Below is an example of custom check box, using pure css here is no any script. You can use this example many type, like to select some image or theme. I hope it will helps you somewhere. HTML:- <div class="wrap"> ...

CSS3 Selectors

pre{padding:4px;border-radius:0px;} Hi all, Selector are the basic component in the CSS. Here's a definition of the selector from W3C documentation - A Selector represents a structure. This structure can be used as a condition (e.g. in...

15 HTML5 tags you need to know about

<article> An Independent piece of content of a document such as blog entry newspaper article etc are represented by article tag. In other words we can say that, this tag represent independent piece of content of a document, such as a ...

Switch list/grid view using jQuery

Hi all, Below is an example of switching between list and grid view using jQuery. $( document ).ready(function() { $('.show-list').click(function(){ $('.wrapper').addClass('list-mode'); }); $('.hide-list').c...

How nth-child Works ?

Hi folks, The :nth-child(n) selector is a pseudo element. which show the position on there parents element. You can use (even) and (odd) for all even or odd child element. :nth-child(odd) For example:- tr:nth-child(2n+1) Rep...

Using Local Storage In HTML5 - Capable Browsers

What is Local Storage in HTML5 ? The Local Storage is a client side web storage database which is used to store the data in the form of key/value pairs. Using Local Storage, we can store the data of at least 5MB. It provides javascript bas...

Section and Article tags in HTML5

Article: It represents a self-contained composition in a document, application, or site. It could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content. An article el...

Flipping a div by css3

Hello Readers Here is the example of Flipping a div with css3 transitions and 3d transforms. <div id="container"> <div id="card"> <div class="frontFace"> <h2>Hover Me to view effect</h2>...

What is HTML5shiv.js?

Hello all, In this blog we will discuss about HTML5shiv.js, as all known html 5 in on demand. But some new Semantic Elements which are not accepted by browser like Internet Explorer-9 there was little to no support for HTML5 elements and o...

CSS support guide

Hello all, below is a list of a complete CSS support for every mobile, web and desktop email. *{margin:0;padding:0;} .mybox table{font-size: 13px;font-family:'arial';border-collapse: collapse;} tr.header{height:auto;} ...

How to make simple Overlay popup ?

Hello readers! Here is Example of Overlay popup. It is very simple and responsive. Hope it will helps you somewhere. Html:- <div class="container-popup"></div> <div class="popup"> <span id="close">...

Form Validations in HTML5

Different type of validation for HTML5: 1. Required Attribute: It is used when the value before submission of a form in not filled. It is sometimes known as Mandatory or Compulsory field. Use of "required" attribute. Example: <f...

HTML5 Brings Future into Technology

HTML5 is the revolution which the web technology needs in today's competitive environment. If we look at the recently launched application in the market then we learn that HTML5 is the future platform for the web application development. Whether ...

what is clearfix?

Hello readers ! Today We will discuss about clearfix If you have any floating div inside a container and want to clear the floats normally you may are using clear:both class because this is simplest and most common way to solve this. But it...

Web Worker

Introduction A web worker in html5 is a simple JavaScript file. Html5 have an extended functionality to create thread that continues to work on there own in the background without making any compromise in the performance speed of the...

SVG Shapes

Hello Readers, Today's topic is how to create a SVG?- Every shapes in SVG are based on coordinates (x and y axis). So if you want to edit ,create and script, you have to know about coordinates. SVG has pre define shape like, 1) Circle ...

How to use SVG in html

Hello Readers! In this blog we will discuss about SVG. Scalable Vector Graphics (SVG)? is a type of image format, which is based on XML. SVG makes a vector graphic quality in such a way that the graphic quality will not become dull if you zo...

Sticky footer using pure css

Hello folks! The below code is an example of sticky footer using pure CSS. There are other sticky footer methods, which people use but the problem arises that they do not work with all browsers so the method I am providing below will work with...

HTML5 Page Structure

Hello readers! Here is demo of HTML5 page structure. In this structure we are using semantic elements, so its also called Semantic HTML5 Page Layout. Semantic Elements :- In many website we see html write like shown below- <div class...

Useful Short Hand and CSS Rule Set

Hello readers, Below is some useful example of css rule set and css shorthand. By using css shorthand you can save your time. CSS rule set- Rule set for font declaration:- body {font: italic small-caps normal 13px/150% Arial, Helvetica...

Use of Box Sizing

What is box-sizing ? Box-sizing is a css3 property. It is used to tell browser that width padding border should include the object according to size, which is define by user. For example, you have a text area with 100% widt...

css3 animation game

Duck game using pure CSS3 Hello all, Below is an example of pure CSS3 game using CSS3 animation, pseudo class. This example show efficiency of CSS3. There is no .gif image used. Find the attachment for complete code below. *{margin...

CSS Positioning

As I am a fresher to web design, I don't know exactly all the concepts of positioning and their differences. But as much i have studied the CSS Positioning, I can explain it here as far as my knowledge.Positioning is used to get the blocks exactl...

How to make use of corcdoc API

Below is a sample code base to convert PDF files to HTML5 template making use of well known tool Crocdoc : $_product = $observer->getProduct(); $productid=$_product->getId(); $read = Mage::getSingleton('core/resource')...

Aimated Text shadow by CSS 3

Hello, Bellow is a animation showing shadow of a text moving relative to the movement of the light. <!doctype> <html> <head> <style> @import url(http://fonts.googleapis.com/css?family=Anton); html { height: 1...

Method eq() in jquery

Description: The eq ( index ) method reduces the set of matched elements to a single element or we can say that find the element that matches or equals the index provided. Syntax: Here is the simple syntax to use this method: selector.eq ( i...

How can use Regular Expressions in HTML?

We can use a Regular Expressions width the help of HTML 5. You can use this with "textarea" and "Input" tags. <form action="" method="post"> <label for="username">Create a Username: </label> <input type="text...

Wobble Effect by HTML 5 animation

<!DOCTYPE html> <html> <head> <title>wobble effect</title> <style> body { background-color: tomato; } .container { position: absolute; top: 40px; left: 140px; } .slices { position: a...

How to make iframe responsive

Hello reader ! How to make responsive iframe. We all are face this problem normally so there is an example and i hope it will helps you. CSS :- .wrapper { width: 50%; } .container { height: 0; width: 100%; paddin...

Creating logo using SVG in HTML 5

Hell Readers, If you want to create a logo using SVG in HTML 5, it's not a big deal, you can refer below simple example <!doctype> <html> <head> </head> <body> <?xml version="1.0" encoding="utf-8"?> ...

Creating logo using SVG in HTML 5

<!doctype> <html> <head> </head> <body> <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Evon_Text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y=...

HTML5 Apps Goes Offline

Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE . online and Web are kind of synonyms. So why the term Offline is gett...

Get current geo location from browser using html5

We can get our current geo location (latitude and Longitude.) from desktop browsers as well using html5 geolocation. We just needs to add script into our html page and it will ask you to share your location. After approve it will return you your ...

Adding tooltip on a div using built-in ellipsis

Here is a way of adding tooltip on a div using built-in ellipsis $('.mydiv') .bind('mouseenter', function () { var $this = $(this); if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) $this.at...

How to use transform property of css3

Hello Readers ! In this blog we will discuss about css3 new attribute transform and transition. Okay let's start :- Transform : Mainly transform property uses for give small animation or movement of any object. To use this you have to...

THE BASIC STRUCTURE OF THE PAGE

<html><br> <head><br> <title>My Home Page</title><br> </head><br> <body><br> <h1>This is a heading</h1><br> <p>Document description goes here.....<...

How to inherit the properties and methods of base class to the child class in php

<?php class data<br> {<br> public $firstno;<br> public $secondno;<br> public function getData($fno,$sno)<br> {<br> $this->firstno=$fno;<br> $t...

Check file-size using jQuery without uploading file

A simple code snippet for checking the file-size of a file before uploading it. It will not only help to save time but also network resource as we can implement the file check at the initial point only. The current code allows the user to sel...

CSS3 Pseudo-elements

Hello readers ! In this blog i'll explain what is Pseudo-elements and how can we use it. What is pseudo-classes ? - Pseudo-classes are some special classes which are used to for special effect. You can also use it with css ...

How to use transform-rotate property in CSS3?

<!DOCTYPE html> <html> <head><title>css3</title> <style> div { width:200px; height:200px; margin:80px; background-color:#000000; /* Rotate div */ transform:rotate(60deg); -ms-transform:rotate(60deg)...

Web RTC : Strongest Api of HTML5 Part -ii

holla amigos In my last blog i shared the power of web rtc and the first api getUserMedia of the web Rtc . This article will be focus on the Peer to Peer connection of the Web Rtc. Let me explain you first what is Peer-to-Peer connection ex...

Introduction to php

<html> <head> <title>Example</title> </head> <body> <?php echo "Hi, I'm a PHP script!"; ?> </body> </html> PHP(Hypertext Prepr...

How to create a class and object in php

class rect { public $length=0; public $width=0; public $area=0; public function getData() { $this->length=10; $this->width=20; } public function area() { $this->area = $this->leng...

Document type declaration

Document type declaration ( Or DOCTYPE ) What is Doctype ? The<!DOCTYPE> is not a HTML tag. It is an instruction to web browser about what version of HTML the page is written in. In HTML 4.0...

How To Change Input Type File Title In HTML

We are change the input type file title with the help of this script Like Browse Title Change in to Choice File use this script for change Title function browseclick(){ var fileinput = document.getElementById("browse"); // use in...

Track in HTML 5

The track element allows specifying explicit external timed text tracks for media elements. It does not represent anything on its own. Its provide a simple standardized way to add subtitles, captions, screen descriptions and chapters to video and...

HTML Forms - Submit and Reset Button

<html> <head><title>myForm</title><head> <body> <form action = "example.com" method="Post"> First Name: <input type = "text" name = "firstname" /> Last Name: <input type = "text" name = "...
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: