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
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...
How to use parallax scrolling?
HI all,
Parallax scrolling is very popular now days in website making. it is not very difficult you just have to understand some basic method to use it.
Below is an example which will shows you how it works.
HTML:-
<section class="...
Creative navigation using css
Hi all,
Here is an example of awesome navigation. mainly we use css transition to move the element with help of radio button.
css:-
<div class="wrap">
<input id="nav0" name="foo" type="radio" /><label for="nav0">...
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...
How to remove a HTML element using Jquery
Hello reader's,
Below is the example to Remove the HTML element using Jquery
If you having trouble with such issues, then use the below code.
Here is the HTML
<p>Write your text here.</p>
<p>Write your text here.<...
How to Create Cross-Browser Custom Upload Button with Jquery
Hello Reader's
In this article I will guide you to create Cross-Browser Custom Upload Button With JQuery
If you facing any problem for upload button use this code.
Here is the HTML
<div class="Container">
<label>Upl...
Simple Parallax Effect with smooth scrolling Jquery
Hello reader's,
Below is the example for Simple Parallax Effect with smooth scrolling Jquery
If you having trouble with such issues, the use the below code.
Here is the HTML of Scroll trigger
<div class="carousel-indicators">
...
Custom Checkbox Button
Hello Guys
This article will guide you To Create Custom Check box by using simple HTML and CSS.
Here is the demo of custom check box
Here is the HTML
<input type="checkbox" id="1"><label for="1"><span></span&g...
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...
Add or Remove Class by Using Jquery
Hello Guys
The below example will guide you to add or remove class by using jquery.
So if you are stuck in such case follow the below code.
Here is the HTML Code
<nav>
<ul>
<li><a href="javascript:v...
How to make favicon for your website
Hi,
If you owning a website you might have seen logo's and banners for it, but there's also a little icon on top on tabs showing your website Icon. That icon is called as Favicon.
this is a icon format you can generate this easily with easy s...
How to show any video from Youtube to your website customized
Hi,
You want to show any video from youtube to be shown in you website, read my following steps
There are several other customization features that you can do with video ,i.e.(set Height or width, set youtube logo, Show suggested videos when t...
custom checkbox and radio button using pure css
Hi all,
Here is an example of custom radio button and check box using pure css.
I hope it will helps you.
CSS :-
**/*Radio button*/
.radio, .checkbox{display: inline-block;}
.radio { padding:5px; margin-left:40px; }
.radio input[ty...
How to Integrate Skype with Webpage ?
Hello Readers,
Here I am mentioning steps to integrate Skype with a webpage.
Hope it will help you somewhere.
To generate code for Skype buttons, use URL
http://www.skype.com/en/features/skype-buttons/create-skype-buttons/
You will get t...
Fonts sizes
Hello Readers
In this article I will guide you about the font size diffidence pixels, points, ems & %.
Here is a flow chart below in which I have mention the difference between pixels, points, ems & %. these font sizes are not actual.
...
Artificial Intelligence in web applications
Artificial intelligence is an area of computer science which deal with creation of machines or software , which have the mind like human , which can understand and can react on different situation and which can develop it self .
Artificial int...
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...
How to show another website's page into your own website, Live!
Say you are developing a website for a hotel which is already on Tripadvisor.(example).
Now you know it's not good idea to fill reviews from hotel guests in your own page since it's better to rate hotel on Tripadvisor.
I'm coming with a excelle...
How to upload data/file to a website uisng command prompt
You need to connect your Site FTP first.
Open the DOS Command Prompt
then type: ftp
It will shown like this
C:>ftp www.yourshite.com
220 yoursite.abc.net FTP server ready.
User (yoursite.abc.net:(none)): username
331 Password...
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...
Left side navigation using pure css
Hi all,
Below is an example to make left side navigation using pure css.
css:
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-s...
How to make responsive navigation pure CSS
Hello folks,
Here is an example of responsive navigation without javascript using pure css.
HTML:-
<nav>
<a href="#" class="logoNAv">Logo </a>
<input type="checkbox" id="nav" /><label for="nav"><...
AngularJS - Tutorial 1
*{margin: 0;padding:0;}
.mainCol{margin: 0 auto;font-family: 'Georgia';font-size: 15px;color: #146ba3;padding: 10px;}
.mainCol h4{font-size: 18px;margin: 0 0 10px;}
.mainCol ul li{list-style: none;;padding-bottom: 3px;}
...
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...
Simple custom dropdown by using css
Hello Readers
Here is the example of custom drop down by using Css and HTML.
Here is the HTML
<div class="container">
<div class="customSelect">
<span class="arrow"></span>
<select i...
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...
WebKit and How it is Helpful for HTML5
What is WebKit?
Apple Inc. launched open source web browser named **Webkit** In today's time it powers browser such as Google Chrome, Apple Safari, the default iOS browser, and the default Android browser.
In CSS, the -webkit- prefix is use...
WebKit: Why it dominates the market and how is it helpful for HTML5
Webkit is an open source web browser engine that was originated by Apple Inc. and currently powers browsers such as Google Chrome, Apple Safari, the default iOS browser, and the default Android browser.
In CSS, the -webkit- prefix is used ...
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;}
...
Meta tag and its uses
What is meta tag?
The <meta> tag gives metadata about the HTML document.
It is a machine parsable and the metadata will not be displayed on the page.
These elements are typically used to specify page description, keywords, author of the ...
HTML5 tags : article, aside, nav, section, footer, header, address
Important Tags Used in HTML5
In this tutorial I have mentioned some important html5 tags are with there example.
article : The article tag is used for self-contained content. We can use it in blog posts, news article, forum posts or user co...
Semantic Markup
Semantic is the study of any language and it's interpretation. For computer language word semantic is used in communicating and in HTML these are the tags that are used in a mark up document. for example h1, h2, h3, h4, h4 and h6 tag are used for...
How to Develop Game Using Pure CSS3 ?
Hello all,
Below is an example of pure CSS3 game using CSS3 animation. This example show efficiency of CSS3.
Below is the sample of flying plane game.
CSS:-
* {margin: 0;padding: 0;}
.board {width: 300px;height: 600px;margin:20px aut...
Opensearch Integeration
sometimes you found the search engine of website in browser drop-down list. to add you own website search in that drop-down search engine list. you need to use opensearch format.
OpenSearch is a collection of simple formats for the sharing of ...
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...
To Make a Preloader Using HTML and CSS
Hello readers,
If you want to make a preloader using HTML and CSS follow the below code:
Html
<div class="circle">
<div class="inner">
<div class="spot"></div>
</div>
</div>
<...
Foundation-5 Cheat sheet
Hello Friends,
In the era of new HTML Concepts or platforms like- Bootstrap, Foundation. We are using these platform to make our HTML more elegant and in a responsive Form.
Today I am adding something for Foundation CSS platform. L...
Creating Horizontal Menu Bar Using Html and CSS
Hello readers,
If you want to create a horizontal menu bar in a web page using HTML and CSS follow the below code.
CSS:-
<style type="text/css">
#menu
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
...
Typography viewport size
Hello reader,
In this blog we will discuss about,
how to manage font size in different viewport.
Usually we fix the font size with different viewport size using @media.
But as we know CSS3 has some new values. Viewport size: vw, vh, and vm...
