Featured
-
Creating Horizontal Menu Bar Using Html and CSS
Hello readers, If you want to create a horizonta
by nitish.rawat -
Custom checkbox using jquery
Hello Reader ! Here is an example how to make
by mukul.kant -
How to make Sticky navigation
Hello Readers ! Below is an example of sticky n
by mukul.kant -
Smoke Font Animation
Hello Friends, The following codes below is an an
by kushal.kant -
How to Make A Simple DropDown in HTML With The Help of Jquery and CSS
You Can Use Below Code to Make A Simple Drop D
by indresh.kumar
Tags
What is semantic elements ?
Hello all,
Semantic elements clearly defines its content. It means that elements which are recognize by their name in html for example <hedaer > , <nav> , <footer>. You can say it helps understand what is happening on the pag...
html link styles
html link styles.
We can change the style of link such as background color, color and text decoration on various event done by mouse such as hover,active and visited through style property.Customization can be done according to your requiremen...
What is grid system ?
What is grid system ?
Grid usage to guide design and page layout is in practice for around 100 years now
Rationalism and New Objectivity came into picture in 1910s and 1920s due to ornamental design
This shift in design was responsib...
What is progress Element in HTML5 ?
The <progress> Element is use to show the completeness of the task. We can use script to manipulate the value of progress bar.
This tag is new in HTML5 and progress element have start tag (<progress>) and end tag (</progress>...
Star rating using pure css
Hi all,
Below is an example, how to make star rating using pure css.
CSS -
.rate {
float: left;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
...
What is input pattern ?
The pattern value is use in input box which tells the user, In which pattern value will store in database. If the value is according to pattern then data will store otherwise it will shows an error.
Its works with following input types:-
t...
Displaying Map using HTML5
Html5 provides geolocation API by using which we can display the results in a Map. Following example shows how we can show the Map in html5. To display the result in a map, you need access to a map service, like Google Maps.
<!DOCTYPE html&...
Geolocation API in HTML5
HTML5 Provides new feature of geolocation API which can help user to find his current location and share the location to the web site.
It works with the javascript which capture the latitude and longitude of the user. It works with the global ...
HTML5 Web Worker
A web worker is basically a javascript code that runs in the background. It does not effect the performance of the Page. Usually When we run some script in our html page the page do not response until the script finishes.
By using Web Workers ...
Custom select box
Hello Friends,
If you are looking to create a custom select box, you can use below HTML and CSS code I have provided.
Below an example of custom select box.
HTML -
<div class="wrapper">
<input id="textfield" type="te...
How to Make SlideShow in HTML5
In the past year, We were using Javascript and jQuery for image slideshow(image Slider), But nowadays we can make slideshow easily with the help of HTML5. In this blog I am going to discuss about how to make slideshow in HTML5 with complete exp...
SVG Matrix transformation
The SVG stands for "scalable vector Graphic" and below are the example for SVG matrix.
The matrix looks like this:
a c e
b d f
0 0 1
There is only first 6 values can be specified, you only provide 6 values to the matrix transfo...
HTML5 - SVG
SVG is used for graphs like Pie charts, 2D graphs in X,Y coordinate system. It stands for Scalable Vector Graphics and it is a method for describing graphics in xml and then xml is rendered by SVG viewer.
Using SVG in HTML5:We can use SVG by <...
Multiple Style Sheets
When Style sheets are effectively merged into a single style sheet in the order in which they appear in the HTML source is said to be Multiple style sheets.If some properties have been defined for the same element in different style sheets, tha...
html5 new input attribute- Part 2
Hello
This blog is in continuation with my previous blog about the html5 input attributes.
Here is the link:
html5 new input attribute
1)FORMMETHOD
This attribute is used for submiting data to the given action url overriding the metho...
Non-Semantic Elements and Semantic Elements in HTML5
Non Semantic Elements:- Traditionally, developers have implemented non-semantic elements with a class attribute to define the structure and express the meaning of content. It tells nothing about its content. The element has no special meaning at ...
Html5 new input attributes
1)AUTOCOMPLETE:- AUTOCOMPLETE attributes is having two features either on or off. If autocomplete is on then the browser automatically complete the values based on values that the user has entered before. This attribute works with form and the fo...
Working with MathML in HTML5
MathMl is a easy way to insert math symbols, expressions and formulas into your web page. The supported browser can convert them to numeric values and symbols. To start writing the math code you have to use <math></math> tag for creat...
HTML5 Datalist Element
Hi all,
Datalist is a new element in HTML5 and very useful. Basically it works with input box and when we write text in it, it will show a related item in list like option box.
Example :-
<label>Select your preferred code editor:&...
What is CSS attribute selectors ?
HI all,
CSS attribute selectors is a great way to manipulate your style may be you have used this before but it really awesome and I am sure using it you can make more easy your style.
Lets understand this with below example -
I have a s...
How to make custom attribute in Html5 ?
Hi all,
You can make your own custom attribute using data-. It allows possessive exchanged information between HTML and its DOM representation. It can work with javascript also, every browser will let you fetch and modify data- attributes usin...
CSS filters
Hi all,
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an expe...
CSS4 selectors
HI all,
As we all knows CSS33 describes the look and formatting of a document written in a markup language very well but now the time is coming for CSS4.
Because it is still in WORKING DRAFT in W3C so all selector is not compatible with all...
Sticky positioning using pure css
Hi all,
Sticky is a new attribute of position property. It is work like relative but it does not effect to any other element or parent element. It decrease your script code you can say, It work like a magic :)
Below is some example which sh...
Ajax Upload Files With the HTML5 FormData
If you are making a Ajax request to submit a form that include files then HTML5 FormData is the solution for that. You can also used jQuery form for upload files using Ajax request.
First, we need to add jQuery code to submit function which is...
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...
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 ...
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...
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...
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')...
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...
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...
