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
How CSS triangles work?
Hello folks,
How css triangle works ? actually when we create css triangle, its means we are just showing and hiding borders of any element.
The angle intersects at (45) so the intersection edge is used by border here and we can also skew a...
Pre loader using pure css
Hi All,
Below is some example of pure css loader. Using css animation. All are single element loader.
Please, check the below code for details.
section{
margin: 10px 0;
}
.loader {
position: absolute;
z-index: 1;
left: 0;
...
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 <...
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...
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...
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...
Multiple column using CSS3
Hello all,
Here I am sharing some information about how to get multiple columns layout using css3.
By using css3 column-count property we can divide an element into number of columns.
Here is an example:
div {
-webkit-column-count:...
How to Create a Responsive Image Slider in jQuery
By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.
Step-1. Link files
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
&l...
How to inherit a class in stylus
Hello all,
In prior tutorial I have explained you about Stylus and Creating Syntax in Stylus. Now in this Tutorial I have demonstrated examples to inherit a class in stylus.
@extend
We can use @extend for inherit the css class check the...
CSS3 child and combinators selectors
CSS3 child selector :
CSS3 nth child selector, selects the child element of its parent.
The common syntax: :nth-child(n)
There are many other syntax related to nth-child. Few of them are:
1. :nth-child(odd)
For selecting the odd child elemen...
CSS counters
CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are a...
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...
CSS Units
pre{padding:4px 8px;border-radius:1px;}
Hi all,
It is always challenge to manage the size (mainly font size) in css. usually we use media query to measure all that. But here is some other CSS Unit which helps to manage sizes, so I am goin...
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...
What is Stylus ?
Stylus is a dynamic style-sheet language, it's design influenced by Sass and LESS. It makes your development more faster, smarter and more powerful then ever before. you can change your all color scheme in just a single line of code.
Quick and...
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...
CSS Pseudo-elements and Pseudo-classes
Hello Friends,
As we already knows that, CSS reach to next level (CSS3.0). There are lots of elements in css which help us to build different style and UI behavior. Today, I am going to talk about Pseudo-elements and Pseudo-class...
Create Horizontal Accordion Using CSS3 and HTML
It is a simple horizontal accordion built in CSS3 and HTML. Copy CSS3 code and paste it between style tag.
CSS
body, button, input, select, textarea { font-family: sans-serif;}
/*Define Accordion box*/
.accordion { width:830px; overflow...
CSS3 Display Table Property
In this blog you come to know about making of HTML table by div tag. It shows how display: table-cell and display: table in CSS3 works. The styling is used to make elements, such as tags behave like and tags. so tags should be reserved for d...
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...
Responsive Web Design and Responsive Frameworks
In this session, we will learn about Responsive Design and will check out some of the popular frameworks related to it. So, without much further ado, let's begin:
What is Responsive Design?
"Responsive web design (...
Css3 transition effect
Hello Readers
This blog will describe about, what is transition property in CSS3.
transition property
The transition property specifies the name of the CSS property, the transition effect starts when the specified CSS property changes). CSS3 ...
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...
website css3 Triangles for website
<section class="col-2 ss-style-triangles"></section>
<section class="color"></section>
<section class="col-3 ss-style-doublediagonal"></section>
*,
*:after,
*::before {
-webkit-box-sizing: borde...
Keyframe animation example using CSS3
Hello Readers!
The below code is an example of Keyframe animation using CSS3-
HTML-
<div class="parent">
<div class="circle bulge"></div>
</div>
CSS-
.parent {
display: flex;
justify-content: c...
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...
Use of prefix in css3
Hello Readers,
As we all knows that The CSS3 property allows you to add depth to your website's design without the need for images or extra container elements but when we use these property.
For Css3 it is vital that it works on all browser...
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...
what is clearfix?
Hello readers !
Today We will discuss about clearfix
If you have any floating div inside a container and want to clear the floats normally you may are using clear:both class because this is simplest and most common way to solve this. But it...
SVG Shapes
Hello Readers,
Today's topic is how to create a SVG?- Every shapes in SVG are based on coordinates (x and y axis). So if you want to edit ,create and script, you have to know about coordinates.
SVG has pre define shape like,
1) Circle ...
