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
A Concentric Circle Clock Using JavaScript and Canvas
Hello readers, today in my blog I will discuss about canvas . Using canvas I have created a Concentric circle clock.
The HTML <canvas> element is used to draw graphics on a web page using JavaScript.
It basically u...
Notification Badge using in CSS
Hello Readers
Notification Badge is the most important part of the webpage. You have probably seen notification badges somewhere, such as on Ecommerce sites, and Social Media Sites like: Facebook, twitter, LinkedIn etc.
So, in this tutorial...
How to make Bootstrap columns all the same height?
Hello Readers!
Bootstrap is the most amazing HTML and CSS framework by far. Also, the grid system is near to perfect.
It has columns and rows to keep our content just in place perfectly. But everything has its weak point.
Bootstrap has i...
Create a HelloWorld application using angularJS
Generally any angularjs application requireds a following components:
1. ng-app - This component is required to make a links between the AngularJS application and the HTML.
2. ng-model - This component is required to bind the values of AngularJ...
Adding textbox dynamically and save the values in angularjs
To create textbox dynamically in angularjs, we have to declare an array named inputs in which we will push the textbox element dynamically. In input box, we have included ng-model to bind the property name to the input. so we ...
Types of Divider
Hello Reader
This blog post will tell you how to make different types of divider between two HTML elements. There are total 10 dividers I will be providing here. The very first is a single line divider which we most commonly use. The second d...
How to create simple Chatbox Speech Bubble
Hey all!
This blog post is about creating simple chatbox speech bubbles. There are 4 separate classes. One for the chatbox conversation, second for the speech bubble, third and fourth for the two persons interacting respectively. The spe...
CSS Linear gradient property
Hi,
This blog is continuation with my previous blogs in which I had discuss type of CSS gradient properties,
In this blog i am going share how to use css linear gradient property in different ways.
Go through the following examples below...
Shapes of CSS
Hello Readers!
In this blog post, let us learn how to create simple shapes that can be made even simpler using CSS. I am providing the code for 5 shapes we might be using then and now. Note that, all of the figures below use only a single HTML...
An Overview of javascript within a form
Hello everyone , Today in my blog with the help of an example i.e cake form I have illustrated the use of array, if and else statement and JavaScript functions .
Basically the form helps in calculating the price of the cake depending...
clone() method in jQuery
clone() Method:
Clone() method is used to make copy of selected html element including its child nodes, data and properties. It is useful when we need to duplicate html elements in a webpage.
Syntax:
$(selector).clone(true|fa...
Speech Bubbles on hover
Hello Readers
If you want to create speech bubbles using css3, here is the code that will help you.
This blog post will tell you how to make CSS speech bubble without using any image. You need a <div> element. Though I’m u...
CSS Parallax
Hello Readers!
Have you ever looked out of a car window while driving and noticed how fast the electricity poles move by, while the mountains in the background move really slowly. This is what we say, parallax motion, in real.
For a long ti...
Custom Checkbox and Radio Button
Hello all, In this blog today, I am going to show u how with the help of CSS, We can easily create custom checkbox and radio buttons. Following is the HTML and CSS code, which shows how to create your own checkbox and radio button.
...
Overriding The default text selection color with CSS
Hello Readers!
Browsers have a default text selection color (mainly, blue or orange). However, this setting can be overrided with the CSS pseudo-element ::selection. This overrides the browser-level text selection color with a color of ...
An overview of z-index property
The z-index property has caused a lot of confusion more than any other CSS property. It’s not complicated, the problem is that a few people understand how it really works. z-index is not a difficult property to understand. But due to false ...
Parallax Scrolling
Hello everyone!!
Parallax Scrolling is in which foreground content and background content are moved with different scrolling rate. In parallax scrolling we can use the different content in different scrolling position.
code:-
&...
SlideToggle using JQuery
Hello Readers
The slide Toggles (slideToggle()) method is use toggle between slideUp() and slideDown() for the selected elements like(div, paragraph, etc..).
This blog post will help you with displaying the navigation menu items in a ...
Attribute selector in jQuery
Attribute selector:
We usually use either Class or ID to find html elements in jQuery but we can also use attribute to find specific elements. Attribute selector is written inside square brackets [attribute].
Some of the common ...
Disable dragging of ghost image in CSS
Hey Readers!
Images are used in web pages to make them look more interactive and appealing. We must have surely noticed a thing about images. When you click on an image and drag it, there is a semi-transparent image that follows the mouse till...
Vertically center align text in CSS
Hello Readers.
Center aligning text obviously gives it a more appealing look. Horizontal center align is what we do each day. But when it comes to vertical center align, things get a bit messed up. This too is easier with a single word o...
How to stretch a background image to a div
Hey Readers!
This blog post is going to solve the problem you must have faced sometime while putting a background image. There are situations when we want the background image to fill the entire div (instead of the viewport) without distorting...
How can I install LESS?
LESS is a css pre processor which extends the css language with some additional new features like declaring variables, mixins, functions and other techniques that allow us to make CSS more maintainable and extendable.
Installation
...
Shadow with Glow Transition
Hello Readers
Box-shadow is a very interesting property of CSS3. It gives a glowing and blurring effect to the HTML elements. Box-shadow when used differently gives different visually appealing results. Some of them have been shown here. I hav...
Adding two columns value using jQuery
We can add the values of two columns and show the result in another column using jQuery easily.
Html code:
<div id="main">
<table>
<tbody>
<tr>
<th>Digit1</th>
<th>Operator</...
3D Text
Hello Readers!
We all know about the text-shadow property. It provides a shadow and a blurring effect to the text. The CSS3 text shadow can also be used to create 3D text. Just use multiple text shadows on any HTML element to create a 3D effec...
CSS image zoom effect
Hey Readers,
This is a fun image zooming effect. Zooming an image gives a closer look to it. Zoom effect can be achieved with CSS too. To zoom an image, we first specify the dimensions of the original image (optional) and then give the d...
When to use img or CSS background image?
Hello Readers.
There are situations when we have to decide to use either an <img> tag or a background-image. But then we think of the same visual outcome and choose at random among the two. Let us learn about the two and the ...
Changing the text color inputs placeholder
The placeholder attribute is a default text inside an input box. It usually appears in light gray color. It gives a short hint to the user describing the expected value in that input field. This hint appears in the field e...
How to make a text unselectable in an HTML page?
Hey people!
We developers, deal with HTML pages every second. Every HTML UI essentially has some text elements. It is very easy for a user to double-click this text and select it. And this makes them look bad. To solve the same, CSS pres...
Basic differences between Margin and Padding
Hey Readers!
This blog post will hopefully clear your doubts regarding the difference between CSS 'margin' and 'padding' properties.
CSS Margin: The CSS margin property is used to specify the space around HTML elements . It ...
Types of Bootstrap Pagination
Hello readers.
This blog post will clear your queries regarding the concept Pagination in Bootstrap. The need for pagination arises when you have a website with lot of web pages. Basically, Pagination is the process of organizing content by di...
An overview of Bootstrap Grid System
Bootstrap is one of the most popular front-end frameworks. In this blog post, I will be discussing one of the most important concepts in Bootstrap: The Grid System.
In web design, grids organise and structure content, and make the websites eas...
Web Security Vulnerabilities
Cross site scripting (XSS)
XSS is sending unfiltered data such as <script> or any other HTML data to the server, when the user needs any resource, the server sends unfiltered data to the client. The attacker may get private data.
Prev...
A simple home structure using CSS
Hello Readers!
This blog post will show you a really simple "home" structure. We all must've drawn such homes at some time in our childhood days, but it gets even easier with CSS. The position - absolute and relative, have the ma...
One image changes to another, on hover
Hello, readers.
This blog post will tell you how to get one image in place of the other on hover. The height and width of the images are 100% and the position is given absolute. Due to this, one image appears behind the other. The second thing...
Background Transitions
Hello readers
If you want to use Background Transition on your anchor tag, buttons, div, etc. then code below will be helpful for you.
According to the code the transition will occurs on hover or and will focus on when time is define...
Add twitter feed to website
If you want to embed multiple Tweets on our website in a compact, single-column view and want to display the latest Tweets from a single Twitter account for this a Twitter collection may be rendered in either a list or a responsive grid template....
CSS3 Perspective property
CSS3 perspective property is the most popular 3D transform property. As we know Perspective refers to the art of representing a 3D object on a 2D surface with right impact of their height, width, depth, and position in relation to each other.
...
Triangle Shape Images Using CSS3
Hello , reader's In my blog I have tried to make triangle images using CSS3 transform, translate and transition property.
I have used transform skew and rotate property for creating the images to look as triangle.
Ba...
Difference between HTML and XHTML
HTML and XHTML are both languages in which web pages are designed.
HTML-
HTML stands for Hypertext markup language. It is the main markup language which is used to design web pages.
HTML elements are not case sensitive.
e.g of HTML-
...
Difference between bootstrap and foundation
In web designing world, we define framework as a package made up of a files structures and folders of systematic code that include HTML, CSS, JS etc. which is used for the development of websites, as a base to start building a site. W...
Difference between HTML and XML
To know the difference between HTML & XML, first of all we need to know what is HTML and XML.
What is HTML :- HTML(Hyper Text Markup Language ) is a markup language used for describing web pages.
What is XML :...
How to add spining effect on social media buttons on mouse hover using css3?
Hello Readers, this is a small blog on spinning effect on mouse hover on social icons in css3. In this example , I have taken five icons when we hover the mouse , that particular icon will spin. Here I have used transition, whi...
How to Pop Out Social Icons on mouse hover using css3
Hello Readers, this is a small blog on how to pop out an image on mouse hover using css3. This is possible by animating the position of the image and the box shadow property of css3.
In this example, I have taken images of facebook, linkedin, ...
An Overview To The Position Property In CSS
Hello reader's ,In todays blog we will discuss about the position property used in CSS.
Basically the position property specifies which type of positioning method used for an element such as static, relative, absolute or fixed.
...
Multiple Ways To Create Equal Height Columns Using CSS
Hello reader's , Today in my blog I will discuss about multiple ways to create equal height columns using CSS.
As working over some website , I found an issue related to the equal height of columns .
To resolve this ...
Merging An Array Using JavaScript
Hello reader's, Today in my blog I will discuss about the merging an array using JavaScript.
Basically the term “Merge” means to combine or join two array into a single array.
In JavaScript , for merging ...
LightBox
LightBox is a plug-in we use to create image gallery with the image overlay effects. Like you must have Google for some images once in your life and on clicking on a particular image, the size of the image zooms out which we define as an overlay ...
Multiple Ways To Concatenate A string using JavaScript
Hello, readers . In today's blog I am trying to give multiple ways to concatenate a string using JavaScript.
Basically the term “Concatenate” means joining two or more strings and returns a new joined string .
&nbs...
