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
Why you Need to be Ready for Flash to HTML5 Conversion?
It's been only 8 years since Steve Jobs announced the death of Flash, but in the field of computing, that's a long time. Steve Jobs is no longer in this world now, but his prophecy came true. His decision to block the use of...
Learn How to Use CSS3's Viewport Units - Web Design Tips
The viewport is the area of a web page that is visible to the user and provides the information to the user for his use. This area varies according to the size of the device, like desktop, laptop, smartphone, tablets etc. And units are given to v...
How to Use Parameters in HTML5 Video Tags/Attributes
One Of the Most powerful elements of HTML5 is Video. The video element is used to embed the video in the HTML page.
There is no need of any plugin or other markup, and the best thing is that it supports all the major browsers. You have to just...
Best 5 CSS Grid Layout Frameworks Web Designers Should Use
Frontend CSS frameworks ordinarily comprise of a bundle of a structure of records and organizers of institutionalized code (HTML, CSS, JS documents etc.)
The standard segments are:
CSS source code to make a framew...
How to Design a Spin Loader using Canvas?
Canvas is an HTML5 element which is used to draw graphics using a script. It is only a container for graphics and has several methods for drawing boxes, texts, images etc. We can easily design a line, an arc, a circle and much more. The canvas el...
Hide and show of div based on radio click
A radio buttons is a form element used if we want the user to select one option from the multiple options.
The difference between radio buttons and check boxes is that, radio button allows to select only one option from multiple options and in...
How to Upload Multiple Files to Drive Using HTML Form
Input tag has many type for the values.
for e.g input type "button" defines the input like button.
In the same way input type "file" defines a box to upload a file to drive.
<input type="file"...
WebStorage in HTML5
WebStorage in HTML5:
It is an alternative to cookies and it is better than cookies. With the help of localstorage we can store data locally inside user browser. It is more secure as compared to cookies. It can be modified easily using&nb...
Top 8 Major Changes in Latest Bootstrap 4 Alpha Version for Web Designers
Hello Readers! Currently alpha version of Bootstrap 4 has been released on 19 August 2015 with some major changes. Moving from bootstrap 3 to bootstrap 4 , some components are changed and some are improved and only few have been dropped.
...
How to use HTML5 download attribute
HTML5 provides download attribute that can be used in place of PHP-driven file download scripts. In this article, you will come to know about this new attribute of html5.
One Attribute, Two Functions
download attribute sets a file download na...
Storing Objects in HTML5 localStorage
In HTML5 there is a new feature of localStorage. With this feature web pages store data locally inside the user’s web browser.
Earlier, cookies were used for storing data. The data is used only when it is asked. also you can not store larg...
Bootstrap Sticky Header & Sticky Footer
In some of our site pages, we need to make the Header and Footer constantly visible and settled to top and bottom of the screen individually. In today blog, I will demonstrate how we can implement the sticky or fixed header and footer utilizing j...
How to disable zoom via mouse scroll on embedded Google Maps?
Hello, Readers!
I worked on a PSD recently and it required me to embed a map into it which was done successfully. I embedded a Google Map using iFrames.
But in doing so, I came across a problem. The problem was: When we/user scroll the page...
The Viewport - Responsive Web Design
Viewport meta tag is the primary idea of Responsive Web Design. The viewport differs from device to device. It will be smaller on a mobile when contrasted with PC screen.
To set the viewport, HTML5 presented a technique <meta> tag,...
What is SVG and How Can We Embedding SVG in Html5?
Scalable Vector Graphics is mostly known as SVG is an image format type which is based on XML it is basically used for 2-dimensional graphics for a web. We can resize SVG vector images to any extent without destroying the image qualit...
Close window on button click
If you have requirement to close window on button click, for example closing popup window, you can use below code for same:
<input type="button" id="myCloseButton" onClick="window.close()" />
Here we have created a button and added ...
Bootstrap Grid System
Bootstrap grid system are used for creating page layout using series of rows and columns.
It allow maximum 12 columns across the page.
First class we use in grid system is .container. All rows and columns are placed inside container. Conta...
How to Customize Checkbox With the Help of CSS?
s we know checkboxes look and feel is dependent on the operating system in which we are seeing them .For windows operating system they look different and for mac operating system they look different. It is very difficult to change the look of the...
An Overview on SVG Images
Hello readers, Today in my blog I will discuss Scaleable Vector Graphics Images.
Introduction:-
It is an XML-based vector images created for 2D graphics.
Using the Vector Graphics we can create geometric objects such as lines...
SVG element in HTML5
Hi Readers!
This blog post will discuss the basic concepts of HTML5 SVG element.
SVG stands for Scalable Vector Graphics. It is used for describing 2D-graphics and graphical applications in XML. SVG is used to define vector-based graphics i...
Bouncing effect using CSS keyframes
There are various methods to bounce an element. We can bounce an element using jQuery, any plugin or by simple CSS.
To add the bouncing effect using CSS we use keyframes.
In keyframes the animation is done by changing the style in particu...
Hop Over Notification Badge
Hello Readers!
We web designer can give new look and feel to any content of the div, We have numerous style, effects and animation including keframes which will result to get a graceful ambience to the content, Here in this blog i used same effe...
Dropdown with Multiple checkbox select with jQuery
jQuery multiselect list with checkbox is used for making selection among the choices that user want to select. There are various pulgin used for converting simple dropdown list to multiple select dropdown with checkbox. It cant includes checkbox ...
Accordion in HTML
An accordion is used to show and hide the content on click or hover of button.
It looks similar to the dropdown.
There are some differences between accordion and dropdown:-
Width of an accordion is 100% by default, we can override it ...
An Overview to Map Tag in Html
Hello readers, Today in my blog I will discuss about Map tag which is less used but have various features.
As there are around 142 HTML elements that has been standardized by W3C. Below is the brief description about Map Tag in HTML ...
Custom Switchery using CSS
Sometimes we need a checkbox to verify that a user has check or uncheck to give answer to some question/statement in yes/no.
As we know that the default checkbox is not so attractive, so we add our style to make a custom checkbox.
So today ...
Circular Progress Bar
Hi Readers!
Progress bar, as the name says, is used to show a user's progress. The progress can be anything. For example, how far the user has completed a process,
Bootstrap provides many different types of progress bars. C...
Difference b/w Div and Span Tags
Hello readers, Toady in my blog I will discuss upon the difference b/w Div and Span tag in HTML.
For every beginner it is very confusing where to use which tag either Div or Span.
The <span> and <div> tags ar...
Dropdown Menu using PureCSS
Dropdown Menu is used where user has to show list of items for example in selecting countries and state name or finding this list of any latest technology , movies or it should be anything that gives us option to do a choice. This dropdown menu a...
HTML Anchor target Attribute
The target attribute is used in hyperlinks. It specifies the destination of the hyperlink.
The target attribute is used to determine where to open/load the current link, whether on the same tab, next tab, new window or new frame.
If we do n...
How to align checkboxes and their labels?
Hi there.
In this blog post, I will tell you the solution for one of the minor problems faced in CSS.
And that is, vertically aligning checkboxes and their respective labels consistently across browsers. Whenever I try to align them correct...
How to disable resizable property of textarea?
Hi all.
The <textarea> tag and the <input> are very much similar in terms of their usage. The only difference between the two is : <input> accepts a single line input where as <textarea> accepts a multi-line text input....
Creating Credit Card Form Using Bootstrap
Hello readers, Today in my blog I have tried to create credit card form using Bootstrap.
In the HTML, I need to create an outer div with the class name as credit card div and had 2 nested div inside it.
With the help of ...
Difference between find() and filter() methods
Both the methods are similar to each other.
It is hard to understand the difference between jQuery find() and filter() methods. The difference between the two is that find() method searches for all the elements in the selector while the filter...
How to find the next element in jQuery
Here we will learn how to find the next element of the current.
In jquery the .next() method is used find the immediate sibling of the given element in the DOM(Document Object Model).
In .next() method only the sibling elements will be sele...
Difference b/w Dreamweaver & Adobe Muse
Hello readers, Today in my blog I would like to discuss the difference b/w Dreamweaver and Adobe Muse.
Who should use which software b/w among the both ?
-: Dreamweaver this software is used by the web designers that loves to...
An Overview on Adobe Muse
Hello readers, today in my blog I will discuss about a software i.e Adobe muse that is used to built website in which the user does not need to write any code.
So, here is a good news for all web designers that literally hate coding ...
Tips To Increase The Website Speed
Hello readers, Today in my blog I will discuss some tips that would help the web designer to improve their website speed.
As many of us have visited various Online Shopping website and many of them take much time to load which losses...
How to remove the space between inline-block elements?
Hey Readers!
We must have all used the display property. One of the values for the property is inline-block. There is a certain problem with these. Inline Blocks have this weird space in-between them. The actual space is in the HTML.
I am p...
jQuery Traversing
Traversing means to select HTML element on the basis of their relationship with other elements. Begining with one element we move through the DOM(Document object Model) untill we achieve the element needed.
As we shift from one element to anot...
Why does CSS work with fake elements?
Hi Readers!
The other day I was experimenting a little with CSS and this is what I came up with.
<style>
imsocool {
color:blue;
}
</style>
<body>
<imsocool>HELLO</imsocool&g...
Customising bullets in UL/LI list
Hi Readers!
List items are very commonly used in webpages. Lists can be ordered or unordered. The ordering of the items is very simple, by default. This can be customised with standard CSS. Let us first talk about the ordering of the list item...
Simple slideshow using css3
A slider is possible using javascript but here in this blog we are using the pure css3 code for making transition to the images that is used in a slider. This is known as a magic of keyframe. CSS3 animation make it possible to animate transition ...
Customised Navigation in Owl Carousel
Hey there!
Carousels are one thing that attract a user's attention. On the same hand, they make the web page visually richer. Owl carousels are most widely and easy to use. Moreover, they are responsive. They do not need a customised CSS f...
What is the difference between HTML and XHTML?
1. HTML documents are made of elements that have three different components- element tags , start tag end tag; element attributes are given within tags. HTML element lies between and including tags.
XHTML documents has only one root element. A...
HTML Canvas element
The canvas is an HTML5 element used for graphics.
It was presented by Apple for their Mac OS in 2004. In 2005 it was introduced for other browsers.
The canvas is just a container, graphics is added through javascript in it.
Canvas is havin...
CSS Cursor Property
Hey Readers!
A cursor is a very important thing to be seen on a computer screen. By the name of a cursor, we usually get an image of an arrow in our mind. It is a movable arrow on a computer screen that identifies the point of the user (user&#...
3D Shapes Spinning Pyramids:-
Hello Reader's!
Today I am going to explain you about a spinning 3d pyramid, first thing comes to mind that what is this pyramid and how this is built so basically a pyramid is a polyhedron for which the base is a polygon and all lateral fac...
Responsive tooltip with auto position
Tooltip is a type of popup to give extra information which is shown when a user moves the mouse pointer or hover over an element.
Tooltips do not displayed on the mobile because mobile does not have pointer.
Tooltip content is just not a te...
Loader in HTML
We can design a loader using HTML/CSS.
In the below example the loader is designed using transition. Transition is used for animation in HTML.
To see the transition effect we have to use to things:-
1. CSS effect which we want to apply.
...
