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
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....
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...
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...
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 ...
CSS3 Dropdown menu
Hello reader's in this blog we are making a css3 dropdown menu with custom html. We dont use <select> element for creating it. I have used list <li> element for making the dropdown of the menu.
HTML:-
In the html...
Pure CSS3 mobile menu
Hello reader's, in this blog we are going to create a navigation menu for mobile with CSS3 and HTML. I am using the Javascript for the clicking function. Here i used "+" Adjacent sibling combinator selector to make click function fo...
Animating Multi Color CSS3 Loader Tutorial
In this tutorial we will going to discuss about CSS3 Loader. Loader are useful to show in website when there is no content visible for long time while the content is loading. For making loader i have used CSS3 properties and used different colors...
How to make your divs to display horizontally not Vertically
Hello Readers, this is a small blog on making divs display horizontally not vertically. Here is a very simple and easy code that will make divs to stack horizontally.
To achieve this we will make HTML page and CS...
How to display video background in html
In this post, you will learn about video display in background using html and css. There is video tag in HTML5 which you can use to embed a video in your web page.
<video width=450" height=340" controls autoplay>
<source src=abc....
Checkbox and Radio Buttons using Bootstrap(Touch Friendly)
Hello Readers,In my example I have simply created Radio and Checkbox buttons using Bootstrap framework.
We basically use checkboxes when we need to select one or several options from a given list while radio buttons are used for selecting one ...
Flipping Effect using CSS3
Introduction to CSS3
CSS3 is the successor of CSS2 which comes with various new modules such as selectors, borders and background, 2D/3D Transformations, text-effects, box-model, Animation and Multiple column layouts etc.
Flipping...
What is css gradients ?
Hello All,
Earlier, we have used image for gradients effect but now we will use gradient using css3 and we will see how to use many colors in gradient and only one color in gradient.
Gradients are declared by background-color but according ...
What is semantic elements ?
Hello all,
Semantic elements clearly defines its content. It means that elements which are recognize by their name in html for example <hedaer > , <nav> , <footer>. You can say it helps understand what is happening on the pag...
What is grid system ?
What is grid system ?
Grid usage to guide design and page layout is in practice for around 100 years now
Rationalism and New Objectivity came into picture in 1910s and 1920s due to ornamental design
This shift in design was responsib...
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>...
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;
...
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...
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...
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 <...
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...
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...
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...
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...
Screen sliding using css
Hi all,
Below is an example of slide screen using css.
HTML:-
<input type="checkbox" id="opci" />
<div class="baseM">
<label for="opci" class="nombre"></label>
<div class="nextSlide "></div&g...
CSS filters
Hi all,
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an expe...
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="...
Creative navigation using css
Hi all,
Here is an example of awesome navigation. mainly we use css transition to move the element with help of radio button.
css:-
<div class="wrap">
<input id="nav0" name="foo" type="radio" /><label for="nav0">...
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...
Sticky positioning using pure css
Hi all,
Sticky is a new attribute of position property. It is work like relative but it does not effect to any other element or parent element. It decrease your script code you can say, It work like a magic :)
Below is some example which sh...
Bootstrap versus Foundation
*{margin:0;padding: 0;}
.mdUP table{border-collapse: collapse;width: 100%;margin:10px 0;}
.mdUP table thead{background: #ccc;}
.mdUP table th, .mdUP table td{padding: 5px;text-align:center;border:1px solid #ccc;}
...
Guide to Flexbox
pre{padding:4px;margin:5px 0;border-radius:0;color:#fff;background:#333;border:none;}
Introduction :
The flexible box called as flexbox is an powerful idea to give the container ability to alter their items
You can adjust child eleme...
stylish check box using pure css
Hi all,
Below is an example of custom check box, using pure css here is no any script.
You can use this example many type, like to select some image or theme. I hope it will helps you somewhere.
HTML:-
<div class="wrap">
...
CSS3 Selectors
pre{padding:4px;border-radius:0px;}
Hi all,
Selector are the basic component in the CSS. Here's a definition of the selector from W3C documentation -
A Selector represents a structure. This structure can be used as a condition (e.g. in...
Switch list/grid view using jQuery
Hi all,
Below is an example of switching between list and grid view using jQuery.
$( document ).ready(function() {
$('.show-list').click(function(){
$('.wrapper').addClass('list-mode');
});
$('.hide-list').c...
How to make responsive navigation pure CSS
Hello folks,
Here is an example of responsive navigation without javascript using pure css.
HTML:-
<nav>
<a href="#" class="logoNAv">Logo </a>
<input type="checkbox" id="nav" /><label for="nav"><...
How nth-child Works ?
Hi folks,
The :nth-child(n) selector is a pseudo element. which show the position on there parents element.
You can use (even) and (odd) for all even or odd child element.
:nth-child(odd)
For example:-
tr:nth-child(2n+1)
Rep...
Flipping a div by css3
Hello Readers
Here is the example of
Flipping a div with css3 transitions and 3d transforms.
<div id="container">
<div id="card">
<div class="frontFace">
<h2>Hover Me to view effect</h2>...
CSS support guide
Hello all,
below is a list of
a complete CSS support for every mobile, web and desktop email.
*{margin:0;padding:0;}
.mybox table{font-size: 13px;font-family:'arial';border-collapse: collapse;}
tr.header{height:auto;}
...
How to Develop Game Using Pure CSS3 ?
Hello all,
Below is an example of pure CSS3 game using CSS3 animation. This example show efficiency of CSS3.
Below is the sample of flying plane game.
CSS:-
* {margin: 0;padding: 0;}
.board {width: 300px;height: 600px;margin:20px aut...
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...
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...
Smoke Font Animation
Hello Friends,
The following codes below is an animation effect of css3 by implementing this code the fonts will comes in smoke style.
HTML
<h1><span>C</span><span>S</span><span>S</span><span&g...
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...
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...
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...
Creating logo using SVG in HTML 5
Hell Readers,
If you want to create a logo using SVG in HTML 5, it's not a big deal, you can refer below simple example
<!doctype>
<html>
<head>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
...
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 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 ...
