Featured
-
How Regression Testing Detects Integral Errors In Business Processes
Humans are forever changing and evolving and so to
by kristina.rigina -
Get Display Banner Advertising Opportunity on FindNerd Platform
“Do you have a product or service that nee
by manoj.rawat -
Android O Released with Top 7 New Features for App Developers
Android was founded by Andy Rubin, Rich Miner, Nic
by sudhanshu.tripathi -
Top 5 Features That Make Laravel the Best PHP Framework for Development
Laravel is a free open source Web Framework of PHP
by abhishek.tiwari.458 -
Objective C or Swift - Which Technology to Learn for iOS Development?
Swift programming language is completely based on
by siddharth.sindhi
Tags
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">...
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...
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...
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>
<...
How to make simple calculator with the help of Angulor JS
This Script will helpful to make a simple 'addition' 'subtraction' 'multiplication' 'division' calculator with the help of Angular JS.
<!DOCTYPE html >
<html>
<head>
<title>Angulor Calculator</title>
&...
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...
Use of css Property calc()
Hello readers !
In this blog we will discuss on a css property named calc().
What is calc() ?
This is a way to change simply any numeric value in CSS automatically. like height, width, margin, padding, font-size, background-position etc ...
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...
Make a shape using css
Hello reader !
If you want to make a shape using pure css (after and before pseudo Elements) without using any images follow the code below.
.wrapper{
height: 220px;
width:500px;
margin: 0 auto;
}
.wrapper .midtop{
mar...
Evon Logo Using CSS
Hello readers !
Here is an example of css3 by using these codes you can make any logo. There is no use of any image. For example I used the same code to make Evon Logo. If you want to use the same code for creating other logo you have to do so...
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...
Create shapes using css
Hello readers!
In this blog we will discuss how to make shapes using css only. to make any shape we have to know mainly about 2 pseudo Elements.
::before :- We can use this element to insert some content before an element.
::after :- W...
What is meta tag and there uses.
p {padding-left:3px;font-style:italic !important}
Hello Readers,
Usually we all uses the meta tags, but don't know properly what are these, their actual uses & their importance? So here I will explain you about meta tags and i hop...
Jquery Animation
Jquery animate() method is used to animate any element in the web page. It allow us to create custom animations.The syntax for this:
$(selector).animate({params},speed,callback);
The parameters of animate() mehod are:
The params parameter de...
How to Create Accordion
Hello All,
If you want to make an accordion, this code will help you to make a dynamic accordion using HTML, CSS and Jquery.
An accordion is a stacked list of items. Each item can be "expanded" or "stretched" to reveal the content associated...
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...
Custom checkbox using jquery
Hello Reader !
Here is an example how to make a custom check box using simple script and css.
Script
$(document).ready(function(){
$('label').click(function(){
$(this).toggleClass('checkedN');
});
});
css
.checkedN {ba...
How to make Sticky navigation
Hello Readers !
Below is an example of sticky navigation with simple script which is compatible with internet explorer.
You can use this script for sticky header or sticky footer.
I hope it will be helpful for you.
Script:-
$(docume...
Example of Parallax Scrolling
Hello Readers !
Here is an example of parallax scrolling with simple script and it is also compatible with internet explorer.
Parallax Scrolling :-
The parallax scrolling web design is in trend, Its shows the background moving at a slow...
Example of parallax
Hello Readers !
Here is an example of parallax with simple script and it is also compatible with internet explorer.
Script :-
<script type="text/javascript">
$(document).ready(function() {
$(window).bind('scroll',funct...
Make a div align center using jquery
Hello Readers !
Here is an example, how to make a div always center align using jquery. You can do this using css but this method will work with positions (absolute, fixed etc) and it is also compatible with internet explorer.
<script>...
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 Down In HTML With The Help Of Jquery And CSS
***Jquery***
<script>
$(function(){
$('.DropDown > ul > li').on('click', function(){
$('.DropDown ul ul').slideUp();
...
How to create a Sticky Menu bar with CSS and Jquery
In this example, we will create a simple webpage that consists of the header, the navigation and the content.
<div class="wrapper">
<div class="header">
Header
</div>
<div class="nav">
...
Box-shadow effect using css3
Hello readers !
This blog show how you can use shadow effect using css3.
CSS :-
body {
background: #F2F2F2;
color: #999;
padding: 0;
margin: 0;
}
.container {
width: 820px;
margin: 10px auto;
padding:...
Multiple Backgrounds with CSS3
Multiple Backgrounds:-
We can use multiple background images in CSS background property using a comma-separated list of values. The the first value in the list represents the top layer, with subsequent layers rendered behind successively.
Bel...
Fade-in effect using CSS3 @keyframes Rule
With CSS3 @keyframes rules, we can make a fade-in effect for any HTML element we want. In following code, we are just changing the opacity of an element on two different @keyframes states. We can increase the fade-in time by animation-duration pr...
Simple CSS3 Animation Example
Hi,
Here is an example of a simple animation showing a tree growing on the field and then some rays coming over it.
For this I will be using following images.
bg.jpg
treetrunk.png
branches.png
rays.png
shadow.png
...
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...
Text-shadow
Text-shadow:-
The text-shadow declaration allows you to create a text shadow.
Each shadow is specified as an offset from the text, along with optional color and blur radius values.
Syntax:-
text-shadow: h-shadow v-shadow blur color;
As you...
Creating Multiple Columns in CSS3
CSS3 Provides Column Property to layout the content in form of columns like done in News Papers, Magazines and Books.
Column include multiple properties which are as follows.
column-count
column-gap
column-rule
.textBox{
width:...
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...
Enhancing HTML Content by Pseudo Elements
Pseudo Elements play important role while designing some web based stuff. With pseudo elements we can add content after or before any element in our web page.
Below is very simple demonstration.
<h1>Use of Before</h1>
<h2>U...
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...
CSS 3 Filters
With CSS3, we can apply filters to our HTML elements in order to make them more interactive. There is no reqiurement of any designing software like photoshop anymore for making such effects.
Below are some filter examples:-
Blur:-
value from...
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=...
css3 Animation
Hello readers !
In this blog i'll show how to use animation attribute in css3. By attribute you can
replace animated gif images, Flash animations, and JavaScripts also.
Okay lets start Its have two part :-
First we are describe the object...
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...
CSS Border-radius
The rounded corners are applied to the element's background area, the element's border, and the box-shadow if specified. The CSS3 border-radius property allows you to apply rounded corners to HTML elements without the need to use images or other ...
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...
What are Animations in CSS3?
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes anim
{
from {background:#fff;}
to {background:#00ff;}
}
@-webkit-keyframes anim /*Safari and Chrome*/
{
from {background:#000;}
to {background:#090909;}
}
div
...
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.....<...
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)...
How to open and close div using css
Hello! readers,
There is an example to show a div on click using only css. You can use it as popup box also.
--css--
.show , .hide{color:#FC6}
#contain {display: none; border:1px solid #999;padding:10px;width:200px;margin-top:10px}
...
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...
How to Clearing floats
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browse...
