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
Text highlight
How to highlight a text in bootstrap
In bootstrap we can highlight the important text with the tag <mark>. Thus text can be easily highlighted and customization can be done as required.
As shown in example below name of country's get...
Gradient
How to create background of two colors.
In bootstrap we can create background of two colors with the help of gradient.You can also specify the angle os standard two color.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#...
how to use video in background using html/Bootstrap
Hi ,
This post will help you to use Video in background with bootstrap.
View Live Example :
http://107.20.120.5/HTML/fn/video.html
<style>
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;...
Clearfix
how to clear floats in bootstrap.
Bootstrap provides an predefined class .clearfix through which you can clear floats just by adding this class to the parent element.
.clearfix() {
&:before,
&:after {
content: " ";
...
Feedback with optional icons
Feedback with optional icons.
Bootstrap provides classes to add optional feedback icons which would required manual positioning for inputs. Thus, it save a lot of time for making it user friendly. This can be done by adding class .has-feedback...
Validation states
Validation states
We can denote the state of a form through visual,color-based indications.This can be done through using classes as .control-label, .form-control, and .help-block.These are the validation styles for warning, error and success ...
Using AJAX in ASP.NET
Ajax Calls in ASP.NET
For removing postback in web page you use
1 Update Panels
Update Panels are used when there is partial postback of page can happen.
2 Ajax Calls
If you want to minimize postbacks to the extent Ajax c...
Table specific customization
How to customize a table to your requirement.
We can also apply specific characterstics for a table.To define special style for a table we can add id attribute to the table.
<table id="t01">
<tr>
<th>Firstname</...
Table caption
How to add a caption to a table.
We can also give heading to a table making it more attractive.This can be done by adding caption attribute to the table.
<table style="width:100%">
<caption>Monthly savings</caption>
...
Table rowspan
How to create cell span of more than one column in a table.
To create a cell span of more than one row in a column we add the attribute rowspan to that column and designate its value.The value of rowspan determine the number of rows a cell spa...
Table colspan
How to create cell span of more than one column in a table.
To create a cell span of more than one column in a row we add the attribute colspan to that column and designate its value.The value of colspan determine the number of columns a cell ...
Table heading.
How to create heading in a table.
It is very easy to create heading in a table.We can do it by adding <th> tag for the content of row to be shown as heading.
<table style="width:100%">
<tr>
<th>Firstname<...
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>...
Images shapes
Images shapes.
In bootstrap,we can modify shape of image just by adding pre-defined classes as img-rounded,img-circle,img-thumbnail.It saves a lot of time of developer as prevents them from long and confusing coding for creating different shap...
Static Contol
Static Control.
When we need to insert an plane text in front of form label we can do this by adding a class .form-control static class.Thus bootstrap provides an predefined class for inserting an plane text thus making it more effecient for ...
Checkboxes and radios
Checkboxes and radios.
In bootstrap we can add features of multiple selection from group of choices with the help of checkboxes while for selecting one option out of many we use radios.It also provides an option of disabled checkboxes and radi...
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;
...
Horizontal form
Horizontal form.
Bootstrap provide us the feature to align labels and groups of form controls,we can do so by adding .form-horizonal class to the form.Required customization can be done by little effort making it more user friendly and time sa...
Contextual classes
Contextual classes
In bootstrap we can create color table rows and cells with the help of contextual classes such as active,success,info,warning,danger.
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success...
Creating Modals with Bootstrap
Please follow below code to create modules or popup with bootstrap help.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"&...
Media queries
Media queries
In bootstrap we can create responsive site which can run on desktop as well as mobile.Thus breakpoints can be defined by using media queries whose attributes can be changed under specified conditions.
<!-- Stack the colum...
How to devloped a Affix Navigation Menu in bootstrap3
Hi Readers,
Affix means attached or locked, hence Affix navigation helps and authorize an element to lock or get attached to a particular area of web page. This is general used with icons (social media icons like- FB, Twitter, LinkedIn, G+ etc...
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 ...
Bootstrap badges(active nav states)
Bootstrap badges(active nav states)
Bootstrap provides built-in styles which can be included in bootstrap navs or more for placing badges in active states in pill navigations.
<ul class="nav nav-pills" role="tablist">
<li role="...
Bootstrap badges
Bootstrap badges.
Badges can be easily created by adding a predefined class badge to links of nav bar in Bootstrap.You can customize it further according to your requirement.
<a href="#">Inbox <span class="badge">42</span>...
Bootstrap Buttons
Bootstrap Buttons
Bootstrap provides button classes to quickly create a styled button.So you can design any type of buttons with little effort and customization.
<!-- Standard button -->
<button type="button" class="btn btn-defaul...
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 ...
Pre vs. Code
<code> use for inline code it can wrap and <pre> for block code that must not wrap so, new lines and spaces get rendered as new lines..
It is little mystified by the <pre> and <code> tags. If youre not sure which to use...
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 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 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...
How to set multiple values in a option box
Hello Reader's!
If you need to set a option box with multiple select options then you can use the logic below:-
Logic is to set the name of your option box in array format, Like
<select name="flower[ ]" multiple>
Lets see the...
One Page Responsive Template
Mobile Responsive Email Template Using HTML
The tutorial explains how to build an Advanced email template that works in every email client, including outlook and smartphone apps. To acquire maximum compatibility it goes with minimal media querie...
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...
HTML datalist Tag
The datalist tag provides a list for options that are predefined for an input element in the html.
The datalist tag can be used to provide an "autocomplete" feature on input elements. After using this the predefined options list is made as we ...
HTML Title
HTML title tag is must for Search Engine Optimization and it gives title to your web page.
The HTML title tag must be used inside the head tag.
The title of the page is displayed on the title bar of the browser.
Example
<!DOCTYPE htm...
Html dialog box
This is an html tag which creates popup dialog box on a web page.It represents interactive component like window.
Following is an example of Html dialog box:
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FF...
What is a box model?
The box model is a box that wraps the HTML element. According to the box model concept, element of every is a rectangular box and may have width, height, padding, borders, and margins. There are few new properties in CSS, to better understand.
...
When to use tag img or css background images
Proper uses of img tag
You can make use of IMG in case you are looking forward to enable people to print your page and the image has to be present there by default.
For images that have important meanings, you can go for IMG wi...
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...
Changing Placeholder Color
WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ex- ::-webkit-input-placeholder.
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). ex- :-moz-placeholder
Mozilla F...
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...
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 <...
How to make animation with SVG HTML5
Here is the simple example of SVG animation. We use HTML structure to show svg graphics in browser.
Tags used:-
svg <svg>:- Makes the svg structure.
circle <circle>:- Element is used to draw circles.
g <g>:- Element is...
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...
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...
