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
Bootstrap Form
Bootstrap Form
Bootstrap provides a predefined form which can be customized according to your requirement.You can design any form with little effort and customization.It helps in saving lots of time and prevents developer from confusion.
&l...
Navbar
Bootstrap Navbar
Bootstrap provides an pre-defined navbar which can be customized according to your requirement.Predefined classes are present which helps in saving lots of time and prevent us from confusion,makes it more user friendly.With li...
What is css preprocessor ?
CSS pre-processors have really started to gain in popularity in the last several years. It have been around for a while now. We need a compiler to compile that. It means we can't render directly to pre-processors file (scss ,less, styls). In simp...
What is the diffrent between table and div ?
Different between *table* and *div*
What is div ?
The DIV element can be called a block element. It can also be called a layer. Its use involves dividing a page into a logical section. One of its many advantages is the ability to hold what...
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 remove header and footer in print
When we print some html page bydefault the header and footer comes. On different browsers its in different way.
To remove it from chrome use
@page{
size: A4;
margin: 5mm; /* this affects the margin in the printer settings *...
What is CSS box model
Hii,
As we all know CSS is style sheet language used to give a beautiful look,Design to our document written in HTML.
CSS is an abbreviation for Cascading Style Sheet.
CSS is a kind of technology used by many websites to create attracti...
Drag and drop using Javascript
If you want to drag your element from one point to another, here is the code below using Javascript:
HTML:
<div id="dragElement">Drag me!</div>
CSS:
#dragElement {
width:100px;
height:100px;
background-color:#66...
What is image sprite and its uses in CSS?
CSS image sprite is a single image like a image-sheet with all
the images needed for your website.
Image sprites is having all the
images needed at one place in a
single image to it makes the browser
work easy while the browser try to
...
how to use media query to make your page responsive in html?
Hello,
I am sharing an example of html with the use of mediaquery.
Here in the given example below in which i have used 3 separate files,namely
1:Html (a file with .html extension)
2:External css style sheet (a file with .css extensio...
Use of Span tag
Span tag plays a very important role in HTML, CSS designing.It is used to provide beautiful,attracting,as desired features to the attributes using CSS.
SPAN tag is a tag using which attributes can be implemented.
There many tags but we m...
How to create a basic plugin using jquery
If you want to make a functionality that can be used anywhere in the code. For example, you want some method that can be called on the jquery selection and it can perform number of operations on the selection. For this, you can write a plugin.
...
How to make blur overlay effect using CSS
Hello Reader's, If you have to make the beautiful overlay of blur effect of image on the screen then you can learn it from the code below.
This is done by using CSS 3
Put the css as
#myDiv {
width:280px;
height:200px;
...
Difference between id and class attribute
1) There are many different kind of CSS
selector which we can use to apply
CSS style to an element in html. ID
and Class are one of them.
Using Class attribute are easier
as compared to id because of the
negative effects of an ID selec...
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...
Image Sprites in CSS
Image sprites is a collection of different images in a single image. image sprites can can be used in html page for showing different images seperately and help us to increase our image loading time. Any Web page with multiple images generates th...
Circular graphs in SVG
Hello,
Here I am sharing some information related to circular graphs using Javascript.
JavaScript provides a library that generates circular graphs in SVG.
We need to include circles.js or circles.min.js file in the HTML file. It can be do...
How to make shadow of text in html using CSS
Hello Reader! If you want to make your webpage more dynamic which looks like 3d using shadow of texts,
Then you can use CSS.
You just need to add the following css to you text css.
text-shadow:23px 5px 6px #000000;
To make shadow long...
How to make background blur using CSS
Hello Reader!. If you want to show background image blur then you can use css.
Lets's make a html page :-
<div class="background-image"></div>
<div class="content">
<p>This is the para showing the content over the...
How to style checkbox using CSS
If you want your html form to look more beautiful than just the simple check boxes then you can use the following advance css. This will give rich looks to your html form by styling checkbox
First on the html form create the checkboxes using t...
Media types
Media type
Media types, by default the value for the media attribute is all. Without the attribute in the link element,
the user agent will apply the CSS rules in the stylesheet to 'all' media.
all - Suitable for all devices
braille - ...
Make bullet colors in ul li lists using CSS
Hello Reader's
Here is an example bullet list (unordered list) without using any image, you can use custom bullets in your web page as done below.
Here is the HTML
<div class="demo">
<ul>
<li>Your Listing C...
CSS document for printing
Hello everyone,
Lots of web pages have a print-friendly version and many of them don't. I realize that there's no need because you can set up a second CSS document to be called up when a user prints the page.
So, basically we need two css i...
How to set half color on text ?
Hi all,
Below is an example how to make half color on text using css. In this example we are using custom-attribute.
If you are looking for custom-attribute, In one my previous blog I have explained about it click custom-attribute to know m...
How to set space in table row ?
HI all,
We can't add the margin between row in table but we can add space using an alternative method.
for this you have to add some property in your style.
table {
border-spacing: 0 5px ;
border-collapse: separate...
Underline hover effect using CSS
Hi all,
In this, I am showing a simple hover underline effect using pseudo elements and just set transition at .3 second make width 100% on element hover.
See the below code with output -
CSS:
a, a:visited {
text-decoration: none;
...
Simple loader using pure CSS
Hi all,
Below is an example of pure css loader. Using css animate I just rotate the div and change the border radius. Check the code for details.
CSS :
div {
height: 20px;
width: 20px;
background-color: transpa...
Uses of CSS prefixes
Hello all,
Mainly prefixes are used for css3 properties which is experimental or non standard CSS properties, this tells to different browser
Mostly we avoid the prefix but sometimes if you are not using prefix, your css3 properties will no...
Rounded Circle Menu Example
Hi all,
An interesting CSS trick is the creation of circles navigation, sometimes we need this type of navigation, mainly for mobile. Hence it can be useful.
You need to know about pseudo elements for better understanding of this type nav...
How To Create a Scrollspy in Bootstrap
With the help of Bootstrap we can create a Scrollspy function.The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position. According to the below example, i am using data-spy=scroll it is used to scol...
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...
Designing Animated Burger Icon
Hi guys,
So many times people search for how to create animated burger icon used for menu, that changes to cross on click.
Here I have written code for that using html, css and a very little javascript. where the 3 horizontal lines gets conve...
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...
Responsive CSS Counter-Increment
Hello Reader's
In this article I will guide you about the Responsive CSS Counter-Increment. As in example you can see the css counter counting itself.
Here is the example below you can copy & paste the code.
Here is the HTML
<div...
How to Avoid HTML Mistakes
Hello Reader's
Here is the article which will help you to know, How to Avoid HTML Mistakes
In this article I will guide you how to avoid minor mistakes when create an HTML Page.
1) Don't use block elements within Inline elements.
**Wrong ...
How to Create Custom Jquery Tabs
Hello Reader's
In this article I will guide you how to create custom responsive tabs without use of any Jquery plugin.
This will surely make your web page faster because its not an plugin. Its an simple custom Jquery HTML & css.
Copy and p...
How to use upload files with JQuery
Here is the example for *How to use upload files with JQuery. *
If you having trouble with such issues, then use the below code.
Here is the HTML
<div class="flie-btn clearfix">
<input class="fileinput" type="file" name="d...
how to bind click event on dynamically created elements
Below is the example for how to bind click event on dynamically created elements.
If you having trouble with such issues, then use the below code.
Here is the HTML
<a href="#" class="button">Button</a>
<div class="lis...
What is :target selector ?
The :target pseudo-class represents a unique element, with an id matching the fragment identifier of the URL of the document..
For example, the URL http://website-path#demo contains the fragment identifier #demo. In HTML, identifiers are found...
How to centralize div horizontally and vertically ?
Hi all,
Here are two method to center align a position of div.
div{
height: 200px;
width: 200px;
background: #ccc;
top:0;
bottom: 0;
left:0;
right: 0;
margin: auto;
position: absolute;
}
In...
Perspective mockup using CSS
Hello all,
Below is an example, how to create 3D mockup to create this you should know about css Transfrom and about pseudo class.
CSS:-
div{height:240px;width: 160px;background: #ccc; position: relative;
top:40px;padding:5px;bo...
How to make Inside border transparent ?
Hi all,
Here are two method to make transparent border first is by using pseudo element and second is by using background-clip
Example 1:-
In the method I'm using pseudo element :before
.box-border {
background: #0f8ac3;
c...
How to change placeholder color ?
Hi all,
Many time we need to change the input placeholder color or style so here is an pseudo element ::placeholder which can helps you. placeholder defult color is gray with 0.6 opacity so if your input background color is dark in gary, you...
Approximative sibling
pre{border-radius:0;padding:5px;line-height:25px;}
Hi all,
The approximative sibling or adjacent sibling combines two selectors. + works as combinator.
For example:
p {color : green;}
p + p { color:red;}
HTML:-
<div&g...
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="...
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 Get height width or element using Jquery
Hello reader's,
Below is the example for Getting height width or element using Jquery
If you having trouble with such issues, then use the below code to resolve such issues.
Here is the HTML
<button id="dummy-height">Get div Heigh...
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...
