Blog

How to Create CSS Shapes, Support All Modern Browsers

CSS Shapes

CSS Shapes By using this shapes we can make interesting and unique layouts of geometric shapes. In this article we’re going to go over the basics and creating some simple layouts using these new CSS  technologies. We can create SVG Shapes using Background-Clip-Path.

Background Clip Path CSS Shape

We will teach you how Background Clip Path create a mask in different shapes. In this section will create a one polygon shape with movie poster mask. 

Polygon Shape : SVG 

But let’s start with SVG a shape. Follow the below Example:

Background image clip path
Background image clip path

We are creating some Basic shapes like circle, triangle, rectangle, square,oval and some other shapes. We can make lots of shapes in CSS with only a single HTML element.  Apply CSS Shape to any HTML Button.

Rectangle : CSS Shape

To design a rectangle using CSS we have to add width and height so, that we have the exact size rectangle we need.

We are creating a class called .cssrectangle. In that we defined some properties like width:240px, height:120px and background:#1abc9b. By using this properties we created a Rectangle as shown below.

<div class="cssrectangle"></div>
 .cssrectangle {
	width:240px;
	height:120px;
	background:#1abc9b;
}

Square : CSS Shape

To design a Square using CSS we have to add width and height so, that we have the exact size Square we need.

we are creating a class called .csssquare. In that we defined some properties like width:120px, height:120px and background:#1abc9b. By using this properties we created a Square as shown below.

 <div class="csssquare"></div>
.csssquare {<br>
    width:120px;<br>
    height:120px;<br>
    background:#1abc9b;<br>
}

Circle : CSS Shape

To design a Circle using CSS we have to add border-radius and we can round that shape, and enough of it we can turn those rectangles into Circle.

we are creating a class called .csscircle. In that we defined some properties like width:120px, height:120px, background:#1abc9b, and border-radius:50%. By using this properties we created a Circle as shown below.

<div class="csscircle"></div>
 .csscircle {
	width:120px;
	height:120px;
	background:#1abc9b;
	border-radius:50%;
}

Oval : CSS Shape

To design a Oval using CSS we have to add border-radius and we can round that shape, and enough of it we can turn those rectangles into Oval.

we are creating a class called .cssoval. In that we defined some properties like width:120px, height:120px, background:#1abc9b, and border-radius:100px/50px. By using this properties we created a Oval as shown below.

<div class="cssoval"></div>
  .cssoval {
	width: 200px; 
   height: 100px; 
   background:#1abc9b; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

Triangle Up Arrow Shape

To design a Triangle upside using CSS we have to add border so,that we get the Triangle facing upwards.

we are creating a class called .cssarrowup In that we defined some properties like width:0, height:0,border-left:60px solid transparent, border-right:60px solid transparent,border-bottom:120px solid #1abc9b. By using this properties we created a Triangle up as shown below.

 <div class="cssarrowup"></div>
  .cssarrowup {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 120px solid #1abc9b;
}

Triangle Down Arrow Shape

To design a Triangle Downside using CSS we have to add border so,that we get the Triangle facing downwards.

we are creating a class called .cssarrowdown. In that we defined some properties like width:0, height:0 ,border-left:60px solid transparent, border-right:60px solid transparent, border-top:120px solid #1abc9b. By using this properties we created a Triangle down as shown below.

<div class="cssarrowdown"></div>
  .cssarrowdown {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 120px solid #1abc9b;
}

Triangle Right Arrow Shape

To design a Triangle right using CSS we have to add border so,that we get the Triangle towards Right.

we are creating a class called .cssarrowright. In that we defined some properties like width:0, height:0, border-left:120px solid transparent, border-top:60px solid transparent, border-bottom:60px solid #1abc9b. By using this properties we created a Triangle down as shown below.

 <div class="cssarrowright"></div>
  .cssarrowright {
	width: 0;
	height: 0;
	border-left: 120px solid #1abc9b;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Triangle Left Arrow Shape

To design a Triangle Left using CSS we have to add border so,that we get the Triangle towards left

we are creating a class called .cssarrowleft. In that we defined some properties like width:0, height:0, border-right:120px solid #1abc9b, border-top:60px solid transparent,and border-bottom:60px solid transparent. By using this properties we created a Triangle Left as shown below.

<div class="cssarrowleft"></div>
 .cssarrowleft {
	width: 0;
	height: 0;
	border-right: 120px solid #1abc9b;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Triangle Top Left Arrow Shape

To design a Triangle Top left using CSS we have to add border so,that we get the Triangle facing Top Left

we are creating a class called .css_triangle_topleft. In that we defined some properties like width:0, height:0 border-right:120px solid transparent, border-top:120px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_topleft"></div>
 .css_triangle_topleft {
	width: 0;
	height: 0;
	border-right: 120px solid transparent;
   border-top: 120px solid #1abc9b;
}

Triangle Top Right Arrow Shape

To design a Triangle Top Right using CSS we have to add border so,that we get the Triangle facing Top Right.

we are creating a class called .css_triangle_topright. In that we defined some properties like width:0, height:0 border-left: 120px solid transparent,border-top: 120px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_topright"></div>
  .css_triangle_topright {
	width: 0;
	height: 0;
	border-left: 120px solid transparent;
   border-top: 120px solid #1abc9b;
}

Triangle Bottom Right Arrow Shape

To design a Triangle bottom Right using CSS we have to add border so,that we get the Triangle facing bottom Right

we are creating a class called .css_triangle_bottomright. In that we defined some properties like width:0, height:0 border-left: 100px solid transparent, border-bottom: 100px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_bottomright"></div>
.css_triangle_bottomright {<br>
    width: 0;<br>
    height: 0;<br>
    border-bottom: 100px solid #1abc9b; <br>
   border-left: 100px solid transparent; <br>
}

Triangle Bottom Left Arrow Shape

To design a Triangle bottom Left using CSS we have to add border so,that we get the Triangle facing bottom Left.

we are creating a class called .css_triangle_bottomleft. In that we defined some properties like width:0, height:0 border-left: 100px solid transparent, border-bottom: 100px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

 <div class="css_triangle_bottomleft"></div>
 .css_triangle_bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid transparent; 
   border-left: 100px solid #1abc9b; 
}

It is very simple and easy to use, all major browsers Chrome, Mozilla, Safari, Internet Explorer are supported. Most common shapes created by CSS3, These chapter will give you the best and easy CSS3 shapes.

Browser Compatiblity:

Full Support of CSS Properties

Browser Compatibility
Browser Compatibility

Pretty Photo / Gallery photos

Pretty Photo

This demo is going to describe about the pretty photo / gallery photos.
Pretty Photo is a powerful jQuery Light box Plugin. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax contents. It’s a full blown media light box. It is very easy to setup, and very flexible if you want to customize it a bit. ”

“First include the jQuery library, java script link and the CSS link which refer to Pretty Photo in the head of the page(s) where you want to use pretty Photo.”

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/prettyphoto/3.1.6/js/jquery.prettyPhoto.js'></script>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/prettyphoto/3.1.6/css/prettyPhoto.css'>

In the body section we are using a id called main. and we defined a class called .gallery. and we defined the code in between the Unordered HTML List.
An unordered list starts with the tag. Each list item starts with the tag.

“Then, initialize pretty Photo. Put the following code before the closing tag of your body ()

<div id="main">
<ul class="gallery clearfix">
<li><a href="#" rel="prettyPhoto[gallery2]" title="some caption here">
<img src="#" width="160" height="160" alt="some caption here" /></a>
</li>
<li><a href="#" rel="prettyPhoto[gallery2]"><img src="#" width="160" height="160" alt="" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery3]"><img src="#" width="160" height="160" alt="" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery3]"><img src="#" width="160" height="160" alt="" /></a></li>					
</ul>			
</div>

Just add rel=”pretty Photo” to the link you want pretty Photo to be enabled on.

$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({			theme:'minimal'
});		
});

“ The script is compatible and support in every major browser, even IE6 also.”

Hamburger Menu using Jquery and CSS

Hamburger-Menu

We all are well known of the importance of menu icons on the website. They provide great navigation and user experience of the website to both, users as well as website owners.

In this demo, we will explain how to develop a hamburger-type menu that consists of a fixed button on the navigation bar that, when clicked, displays or hides the side menu containing a list of links.

Hamburger menu button is the button on your website which shows or hides the menu icons on the navigation bar.This menu is also responsive, so that on screens with width 100% it occupies the entire page, as follows.

HTML

<header> 
<div class="navbar-header"> 
<div class="toggle-button" id="toggle"> 
<span class="menubar top"></span> 
<span class="menubar middle"></span> 
<span class="menubar bottom"></span> 
</div> </div> 
<nav class="overlay" id="overlay"> 
<ul> <li><a href="#">Home</a></li> 
<li><a href="#">Blog</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Portfolio</a></li> 
<li><a href="#">Contact</a></li> 
</ul> </nav> 
</header> 
<div class="container"> 
<h1>jQuery Overlay Menu Demo Page</h1> 
</div>

In the header section of our page we refer to our style sheet link.

  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

In the body section of the document, the main part is inside the and tags, which contain the hamburger button and the menu links list. And we have defined some classes like
.menubar, .toggle-button, .overlay, .nav-active.
respectively, as we can see below

body { font-family:'Roboto Condensed'}
    .container {
	  max-width: 728px;
	  margin: 100px auto;
	  padding: 100px auto;
	}	
	@import url(http://fonts.googleapis.com/css?family=Vollkorn|Roboto);
	.toggle-button {
		position: fixed;
		top: 8px;
		left: 15px;
		padding: 9px 10px;
		margin: 8px 15px 8px 0;
		height: 20px;
		width: 35px;
		cursor: pointer;
		z-index: 3;
	}
	.menubar {
		background-color: #ff5252;
		display: block;
		width: 100%;
		height: 5px;
		border: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
	}
	.menubar + .menubar {
		margin-top: 4px;
	}
	.middle {
		top: 11px;
	}
	.bottom {
		top: 22px;
	}
	.toggle-button:hover {
		opacity: .7;
	}
	.toggle-active .menubar {
		background-color: #fff;
	}
	.toggle-active .top {
		-webkit-transform: translateY(6px) translateX(0) rotate(45deg);
	}
	.toggle-active .middle {
	   opacity: 0;
	}
	.toggle-active .bottom {
		-webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
	}
	.overlay {
		position: fixed;
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
	}
	.nav-active {
		opacity: 1;
		visibility: visible;
		height: 100%;
	}
	.overlay ul {
		display: block;
		position: relative;
		top: 60px;
		left: 0;
		font-family: 'Vollkorn', serif;
		font-size: 50px;
		font-weight: 400;
		text-align: center;
		list-style: none;
		padding: 0;
	}
	.overlay ul li {
		display: block;
	}
	.overlay ul li a {
		color: #fff;
		text-decoration: none;
	}

The button that contains the burger icon, that is used to display or hide the menu is defined in the class .navbar-header.

The class .overlay have the list of navigation links that will be displayed or hidden when the button is clicked.

We define the position of the block as fixed which allows us to fix it at a certain point that is defined in the class .overlay. and also we define that when the properties of the element are changed, they will be animated for .35 seconds, causing the menu to smoothly appear.

.overlay {
		position: fixed;
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
	}
	.overlay ul li {
		display: block;
	}
	.overlay ul li a {
		color: #fff;
		text-decoration: none;
	}

To activate the menu, displaying or hiding the navigation list when it is clicked, we use the jQuery library. Here is the click event of the button that contains the class top and jQuery “toggleClass” function, adding or removing the “nav-active” class from the menu, making it visible or invisible.

 $('#toggle').click(function() {
		$(this).toggleClass('toggle-active');
		$('#overlay').toggleClass('nav-active');
	});

“ The script is compatible and support in some browsers like google chrome, and not support in IE6 .”

How to create a Mouse Interaction using Java script ?

Mouse Interact

This demo will describe about Mouse Interaction. Mouse Interaction is nothing but Animate a Container on Mouse Over Using Perspective and Transform. (or)
if you wanted to move the background-image on an element as you mouse over it. The container will animate or move

To achieve this we are using CSS and java script. The JavaScript language was initially created for web browsers. While as CSS language for describing the presentation of a document written in a markup language like HTML.

HTML

<div class="moving-zone">
    <div class="popup">
        <div class="popup-content">
            <div class="popup-text">
                I'm a new kind of <b>popup</b>.<br/>
                Move your <b>mouse</b> around !
            </div>
        </div>
    </div>

In this demo we created class like .moving-zone, .popup, .popup-content, .popup-text.

CSS

.moving-zone {<br>
    position: absolute;<br>
    top:50%; left:50%;<br>
    width:300px; height:120px;<br>
    margin: -60px 0 0 -150px;<br>
    perspective: 800px;<br>
}<br>
.popup {<br>
    position: absolute;<br>
    width:300px;<br>
    padding:2px;<br>
    box-sizing: border-box;<br>
    cursor: pointer;<br>
    transform-style: preserve-3d;<br>
    background: -webkit-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:    -moz-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:     -ms-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:      -o-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:         linear-gradient(top left, white 50%, #bccbff 50%);<br>
}<br>
.popup:before {<br>
    content: '';<br>
    position: absolute;<br>
    left:5%; top:5%;<br>
    width:90%; height:90%;<br>
    border-radius: inherit;<br>
    background: rgba(0,0,0,.2);<br>
    box-shadow: 0 0 40px 20px rgba(0,0,0,.2);<br>
    transform: translateZ(-100px);<br>
}<br>
.popup-content {<br>
    background: #586697;<br>
    padding: 20px;<br>
    box-sizing: border-box;<br>
}<br>
.popup-text {<br>
    color: white;<br>
    font-family: 'Roboto', sans-serif;<br>
    font-size: 20px;<br>
    line-height: 30px;<br>
    font-weight: 100;<br>
    text-align: center;<br>
    transform: translateZ(15px);<br>
}<br>
.popup-text b {<br>
    color:#bccbff;<br>
    font-weight: 300;<br>
}

In .moving-zone class we defined properties like top, width, margin, perspective, height. The position is absolute for both class moving-zone and popup. Those classes are used to create a box which is in the middle of the demo.

Handler Functions

These functions handle the events as they happen. We want to decide what happens when the cursor enters, moves over, and leaves the container, so each of those has a handler.

Event

This is a JavaScript object that describes the event that occurred.

Java Script

var moveForce = 30; // max popup movement in pixels
var rotateForce = 20; // max popup rotation in deg

$(document).mousemove(function(e) {
    var docX = $(document).width();
    var docY = $(document).height();

    var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;

    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);

    $('.popup')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
});

If you do not interact with the iframe, you will see only a box on the screen. As soon as you start moving your mouse or your finger, you can see the animation.
finally,
In this demo we uses an box / container to animate, but this can be used for other things besides container including forms, modals, images.

9 Things You Need to Know to Be a Successful Web Designer

Design a world with a web designer

To design any program we must have it:

1) HTML :

HTML is one of the most important things a web designer or web developer can learn. HTML stands for HyperText Markup Language, which is the coding language used to put content on a web page and give it structure. All HTML elements are the building blocks of HTML pages.

2) CSS :

Cascading Style Sheets handle their visual appearance.

To build structure & style of web page.

With CSS, you can adjust the colors, change the fonts, or add a background —etc..

the two languages are really the combination that builds the structure and style basis for any web page.

3) Designing:

For every designer they must have an idea regrading the basic design to implement on it.

You must have the knowledge of the elements of design . as well as the basic design principles . as well as typography best practices, how to use images, layout principles, and more.

4) PHP, ASP, Java, Perl:

To create a web page, we must learn atleast one or two programming languages.

5) Mobile support:

Now a days mobile applications are very mergefull & attractive to the users.

6) Customer support:

If we work for house resource (or) agent,they must communicate with present design ideas &manage connectivity between them.

7) Web server domain:

By knowing which server responds to the things. we can run our program more better.

8) Time management:

It will ensure that to keep in time.

Good web designers need to manage their schedules and follow up on project needs.

9) Digital marketing:

Digital marketing refers to advertising the products and services through digital channels such as search engines, websites, social media, email, and mobile apps.

Conclusion:

A good understanding of mix trends & techniques will help to be a good web designer. Keep learning and improving your Web designer skills, that’s the only secret to becoming a good web designer.

How to create a fixed div on scroll down jquery

The concept of this demo is the sidebar that should appears on right side of the page .and the left side is contain with the content .while the user is scrolling down and also, when they are scrolling the page up then the side bar should follow/scroll the page. To achive, this we are using jquery.

The <html> element is the root element of an HTML page,the <head> element contains meta information and <title> element specifies a title for the document. The <style> tag is used to define style information for an HTML document.

HTML

<div class="container">
	<div class="text">
		<h1>Scroll Container A</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
	
	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
	condimentum a.</p>
	</div>

	<div class="scroll">
		<h2>Scroll Element A</h2>
		Scroll down/up to see me smoothly reposition myself and keep in view.<br><br>
		
	</div>

	<div class="clear"><!-- clear --></div>
</div>

CSS

body{background-color: #f9f7fc;
padding: 6rem 0;}
.container { 
background-color: #fff; 
margin: 0px 50px 100px 50px; 
padding: 50px;
}	
.text {float: left;width: 70%;}
.scroll {float: left; width: 21%; padding: 0% 2% 2%; margin-left: 4%; 
margin-top: 85px; border: 2px solid #32d296;background-color:#FFEEEE;
background:#edfbf6;color: #32d296;}		
.clear {clear: both;}

To create this type of demo we are using a class container and text and scroll.To create left side content we used a class called text and to create right side we are using a class called scroll . In that scroll we defined some properties like width:21%; margin-left, float, background-color. we are calling a function scroll in jquery .

$().ready(function() {
     $(".scroll").jScroll();
});   

By using this function we created the follow/scroll side bar.

Output:

we the user scrolling the page from top to bottom or bottom to top the sidebar will scroll/follow the page.

 

Dot waving Animation

Dot waving animation, we are going to create a circle with sonar effect using css.

The concept is quite simple. To create a circle with sonar effect . we defined two classes called (.dot ) and (.wave). The class (.wave) is the child of class (.dot).

Position : absolute is applied to both parent class and child class.

First we are going to create a circle by using

HTML

<div style="max-width:500px;margin:auto;margin-top:10vw;">
			<h1 style="display:inline-block;">This is a Heading</h1>
			<div style="position:relative;display:inline-block;vertical-align:top;">
			  <div class="dot"></div>
			  <div class="wave"></div>
			</div>
        </div>

CSS

.wave {
  width: 10px;
  height: 10px;
  border: 5px solid #1abc9b;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #37964b;
  z-index: 10;
  position: absolute;
}

.dot {
  border: 10px solid #1abc9b;
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: wave 3s ease-out;
  -moz-animation: wave 3s ease-out;
  animation: wave 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index:1;
  opacity:0;
}

Now we are creating anther circle. The shape, size, displaying position, and color are the same as the first circle. Note that we set z-index to 1 to make sure it lies underneath its parent.

we wanted it to go from 0% semi-transparent to completely transparent while spreading to the scale of 1 time. So here is how we designed the animation keyframe:

css keyframes

@-moz-keyframes wave {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

This Keyframe is applied to second circle called wave class

Demo

Different types of Box shadows using CSS

Box Shadow

Defines the Box Shadow of the element. The box-shadow property attaches one or more shadows to an element.

the property box-shadow:none; is used to Removes any box-shadow that was applied to the element.

the property box-shadow: 2px 6px; is used to two values the first is the horizontal offset the second is the vertical offset The shadow color will be inherited from the text color.

the property box-shadow: 2px 6px red; is used to define a color as the last value. As with color, you can use color names, hexadecimal, rgb.

HTML

<div class="split">
	<h1>1. Shadows </h1>
	<div class="shape box-shadow1">   
	</div>
	<div class="shape box-shadow1">	   
	</div>
	<div class="shape box-shadow1">	   
	</div>
</div>
<div class="split">
	<h1>2. Shadows </h1>
	<div class="shape box-shadow2">	   
	</div>
	<div class="shape box-shadow2">	   
	</div>
	<div class="shape box-shadow2">	   
	</div>
</div>
<div class="split">
	<h1>3. Shadows </h1>
	<div class="shape box-shadow3">	   
	</div>
	<div class="shape box-shadow3">	   
	</div>
	<div class="shape box-shadow3">	   
	</div>
</div>
<div class="split">
	<h1>4. Shadows </h1>
	<div class="shape box-shadow4">	   
	</div>
	<div class="shape box-shadow4">	   
	</div>
	<div class="shape box-shadow4">	   
	</div>
</div>
<div class="split">
	<h1>5. Shadows </h1>
	<div class="shape box-shadow5">	   
	</div>
	<div class="shape box-shadow5">	   
	</div>
	<div class="shape box-shadow5">	   
	</div>
</div>
<div class="split">
	<h1>6. Shadows </h1>
	<div class="shape box-shadow6">	   
	</div>
	<div class="shape box-shadow6">	   
	</div>
	<div class="shape box-shadow6">	   
	</div>
</div>

<div class="split">
	<h1>7. Shadows </h1>
	<div class="shape box-shadow7">	   
	</div>
	<div class="shape box-shadow7">	   
	</div>
	<div class="shape box-shadow7">	   
	</div>
</div>

the property box-shadow: 2px 4px 10px 4px red; The optional fourth value defines the spread of the shadow.

The spread defines how much the shadow should grow it enhances the shadow. we used a Properties position:absolute, box-shadow: 0 15px 10px #777; transform: rotate(-3deg).

CSS

.split{margin-left:50px;margin-bottom:50px;}
.split:after{content:'';clear:both;display:block;}
.shape{width:250px;height:300px;float:left;margin-right:40px;background:#fff !important;}
.box-shadow1{box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);}

.box-shadow2{-webkit-box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
-moz-box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
border-radius:7px;}

.box-shadow3{box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);}

.box-shadow4{
     background:#f1f1f166;
     box-shadow: 0 10px 6px -6px #777;
}

.box-shadow5
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow5:before, .box-shadow5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.box-shadow5:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.box-shadow6
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow6:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}

.box-shadow7
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow7:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(3deg);
}

The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.

The vertical offset (required) of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.

On hover line filling color

when you start scrolling the web page The arrow will appears at the bottom right corner of a web page . When clicked, it brings you back to the top of the page.

When we hover over a button the cursor changes to a pointer, and the background becomes a red. In order to make the transition smooth, we assign the transition of 400ms ease all to the background-color property. Also, when we click the button, the background color also changes . When you click button, this page scroll to top of the position.

onclick="$('html,body').animate({scrollTop:0},'slow'); .animate() method is the list of properties which we should animate. we used a property called scrollTop, and we want it to have a value of 0.

HTML

<div class="container">
    <div  class="hidden123" id="top-link-block" style="position:absolute;bottom:30px;right:30px;cursor:pointer;">
	    <p class="gotop" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
		  <span class="text-center mbn"> TOP </span>
		</p>
	</div>
 </div>

we are using anthor parmeter the speed with which we want our animation to run. It is measured in milliseconds and the higher the number, the slower the animation. Finally, we apply the animate method to the HTML and body elements on our web page.

Now each time when we click the button, it will take us to the top of the page.

CSS

.gotop {
    left: 49.5%;
    bottom: 45px;
    margin-bottom: 0px;
    height: 80px;
}
.gotop span {
    margin-top: 0;
    display: block;
    transition: 400ms ease all;
    text-transform: uppercase;
    color: #f5006f;
    z-index: 9;
    position: relative;
    top: 0px;
}
.gotop:after {
    content: '';
    width: 2px;
    height: 50px;
    background-size: 100% 200%;
    background-image: linear-gradient(to top, #f5006f 50%, #585858 50%);
    position: absolute;
    left: 11px;
    bottom: 0px;
    transition: 400ms ease all;
}
.gotop:hover span {
    top: -25px;
    display: block;
    transition: 400ms ease all;
}
.gotop:hover:after {
    content: '';
    background-position: 0 100%;
    transition: 400ms ease all;
    height: 70px;
}

How does it works ?

step1: copy css and paste in style.csss page or paste under head tag.

step2: Add div structure in body page

Output

This “top-link-block” link allows users to smoothly scroll back to the top of the page.

How to create a cursor typing animation using css

Animation

Cursor Typing Animation is something which changes styles of an element. We can change the properties of CSS as we want according to the requirements. To use CSS animation, you must first specify some key frames for the animation.

STEPS

Firstly we take doctype tag which is used to defines the document type then in that we open html tag which is used to Define an HTML document.lang and class are the attributes used in html tag. Next we take head tag which is used for defining information about the document. Meta is used for defining metadata(data about data) about an HTML document.

In the body part Defines the document’s body in h1 tag we used a class “cd-headline clip is-full-width” for defining heading.

Inside that we use span tag which defines a section in a document. Span tag prints “my favorite food is” then by using the class called cd-words-wrapper.

HTML

<section class="cd-intro">
		<h1 class="cd-headline clip is-full-width">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">Pizza</b>
				<b>Biryani</b>
				<b>Burger</b>
			</span>
		</h1>
	</section>

Inside span tag we again declare another tag called bold by using class is-visible which is declared inside the cd-words-wrapper is-visible class is used styles like 

opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;

with this animation is created. In the animation we get an alternatives like pizza, burger, biryani as our favorite food.

OUTPUT:

My favorite food is pizza(or)Burger(or)Biryani.

Background image (blur) revealed with mouse action

Background image revealing is the excellent feature from CSS animation

The focus event is called on focusing, and blur – when the element loses the focus.

In this Post, I am trying to create a background image opacity / blur hover effect. I have the image as a background in the CSS, but it also blurs and fades the text. We are using a properties like position:relative;height:100%; for the image.

The id attribute of the <filter> element defines a unique name for the filter. and By using <feGaussianBlur> element we defined blur effect.

when we creating a blurred background from a give image using SVG filters, with a fade in/out, Animation based on velocity.js or jQuery animate() method. In this we are using jQuery , for mouse action so, that Background Blur image revealed with mouse action.

Lean how to create a revealing background blur image, Moving with mouse positioning and it will get appropriate order. We seen before, a bunch of code written on the paper, will erase after we will write. Similarly always mouse position clears blur.

You can add any image and set the image size with css.

Example

overlay:

Here we set the position by using absolute property and place it where you want.

pic:

Here we manage the placing with position relative.

blue:

set height with 100%

change image and replace with new path.

Follow the below function

mousemove function used and set ‘x’ position and ‘y’ position. You can change the attribute

<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="female.jpg" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="40" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="female.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", (upX) + 'px');
});
</script>

Follow below style properties

   <style>
 body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height:600px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
 </style>

Follow below div structure

Browser support

Supports across the all standard browsers with latest versions.

Here you will find complete guide about background blur, which tags and style properties we used.
Add more beauty to your site by using this, use this simple code follow the below steps.

When we hover over on a image then the original image is revealed.

How to create a CSS Sticky footer – on body scrolling – Amazing effect

CSS Sticky footer is going to show you, how to create a sticky footer on scrollable content and its reveal effects on page scroll down using CSS. Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages.

Beautiful website design comes from each and every element, a single element works with the right property. Small animations and good color combination give a beautiful website. Here

We need to create a footer that appears from the bottom of the page while the user is scrolling down. Also, when they are scrolling the page up the footer needs to be hidden bottom of the page again.

To achieve this goal, first, we have to create a footer with a fixed position at the bottom of the screen and add some content and a footer to the page.

HTML

 <div class="container" style="margin-bottom:370px;position:relative;z-index:10;background:#fff;">
   <div class="content" style="padding:30px;">  
    Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down	<br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/> 
   </div>
   <div>
	  <img src="content.png" width="100%" style="display:block;" />
	</div>
 </div>
 <div class="content-footer">
  <img src="footer.png" width="100%" style="display:block;" />
 </div>

Give width and height to the footer, and fix its position to the bottom of the screen with the position:fixed; and bottom:0; properties.

Set the margin-bottom of the <body> tag equal to the height of the footer.

CSS

 <style>
 body{margin:0px;}
 .content-footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    padding: 0px 0 0;
    z-index:1;
    -webkit-transform: translate3d(0,0,0);
    background: #fff;
}
 </style>

In this code, we used two images. In the body, we used one image and in the footer, we used another image.

Executed By using position property, Here we will apply position fixed and position relative.

How does it work?

It’s very easy to use follow the below steps.

step1

copy CSS and paste in style.css page or paste under the head tag.

step2

add div structure in body page

OutPut

This way there will be enough space at the bottom for the footer to be visible when the user scrolls down the page.

Visibility:hidden vs Display:none

Hidden and None both will show empty result .

First we are creating a box with the help of properties like width, float, marign, padding.

and in that <div> we defined a tag <h5> (heading) to create another box in that we used a properties like width, height, border and visibility:hidden.

The relationship between visibility:hidden & display:none, both will show empty result.

visibility:hidden; will not display the element on the page but will allot space on the page. Whereas, If we take display:none in place of visibility:hidden. then, display:none; Will not display the element and it will not allot space for the element on the page

visibility:hidden simply hides the element but it will occupy space and affect the layout of the document.
display:none also hides the element but will not occupy space. It will not affect the layout of the document.

visibility:hidden the tag is not visible,but space is allocated for it on the page.
display:none the tag in the question will not appear on the page at all, but no space is allocated between the other tags

visibility:hidden the object still takes up vertical height on the page, text will remain in the same location.
display:none it is completely removed, if you have text beneath an image – then the text will shift up to fill the space where image was.

visibility:hidden will hide the element & preserve elements space.
display:none will hide the element & collapse the space is taking up.

visibility:hidden is hidden, the browser will take space on the page even it is invisible. display:none doesn’t allocate space on the page.

visibility:hidden works in old browsers.
display:none doesn’t.

Visibility: Hidden Display:None
hidden simply hides the element but it will occupy space and affect the layout of the document. none also hides the element but will not occupy space. It will not affect the layout of the document.
hidden the tag is not visible,but space is allocated for it on the page. none the tag in the question will not appear on the page at all,but no space is allocated between the other tags
hidden the object still takes up vertical height on the page,text will remain in the same location. none it is completely removed ,if you have text beneath an image -then the text will shift up to fill the space where image was.
hidden will hide the element & preserve elements space. none will hide the element & collapse the space is taking up.
hidden is hidden, the browser will take space on the page even it is invisible. none doesn’t allocate space on the page.
hidden works in old browsers. none doesn’t.
<div style="margin:50px;">
 <div style="background:#f9cc9d;border:1px solid #000;padding:30px;width:200px;float:left;">
     <h5 style="margin-top:0px;"> No style apply </h5>
	 <div style="background:#c3d08b;border:1px dashed #000;padding:20px;">
	   Lorem Ipsum Content
	 </div>	 
  </div>
  <div style="background:#f9cc9d;border:1px solid #000;padding:30px;width:200px;float:left;margin-left:20px;">
     <h5 style="margin-top:0px;"> Visibility : Hidden</h5>
	 <div style="background:#c3d08b;border:1px dashed #000;padding:20px;visibility:hidden;">
	   Lorem Ipsum Content
	 </div>	 
  </div>
  
  <div style="background:#f9cc9d;border:1px solid #000;padding:30px;width:200px;float:left;margin-left:20px;">
     <h5 style="margin-top:0px;"> Display : None</h5>
	 <div style="background:#c3d08b;width:150px;height:150px;border:1px dashed #000;display:none;">
	   Lorem Ipsum Content
	 </div>	 
  </div>
  
  <div style="clear:both;"></div>
</div>

the above example is help to you and save some time when implementing it.

Output

visibility:hidden; will not display the element on the page but will allot space on the page. display:none; will neither display the element nor will it allot space for the element on the page

Demo

How to create an Awesome Particle Animation

In this post will show you how to create an animated particle background. Particle animation is a great alternative to standard hero sections on a web page; you might have seen them used on sites

we are defining a class called slide and we are using a property display : none.

The main concept here is that there are some particles on the canvas which start attracting other when they come close to each other. Also, they’ll start drawing lines between them as they come closer to each other and the opacity of the lines depends upon the distance between them when we mouse hover .

Amazing particle animation now is in your hand. Finally i brought the code after long search.
you can put your own image/logo in this place, apply the above code.

HTML5 & CSS3 has introduced number of possibilities for UX designers and UI developers.
Awesome Transition effects, Two lines of code give you Reliance of happiness when executed.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Particle Animation </title>
  <style>
  html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .slides,
body .slides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}
</style>  
</head>  
<script  src="js/index.js"></script>
</html>

Colors & Settings

You can change / apply any color to the particles. you can manage speed and distance of particles.

CSS

html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .slides,
body .slides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}

index.js

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  var isSmall = window.innerWidth < 1000;
  
  var ps = new ParticleSlider({
    ptlGap: isMobile || isSmall ? 3 : 0,
    ptlSize: isMobile || isSmall ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
    
  var gui = new dat.GUI();
  gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'restless');
  gui.addColor(ps, 'color').onChange(function(value){
    ps.monochrome = true;
    ps.setColor(value);
	  ps.init(true);
  });
  
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}

var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
	psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
    
(window.addEventListener
  ? window.addEventListener('load', initParticleSlider, false)
  : window.onload = initParticleSlider);

How does it works ?

Very simple to use this code.

Step1

a. Convert your image to svg.
b. SVG to Data URI converter
source:https://codepen.io/elliz/pen/ygvgay

Step2

Apply code and Move mouse on image.

Bootstrap Hamburger Menu

Simple Hamburger Menu navigation using javascript only, Menu icon active/inactive identification is very simple now. Just using this snippet. Finally i get easy code.

I’m trying to make a custom javascript toggle function differentiate with active and inactive. Now, How can I shuffle these functions to make them toggle

In Html5 we have one new element known as <nav> tag. It is used to define a block of navigation links.

The classes are define with in the <div> tag. In that tag we defined a class called nav-toggle.

nav-toggle class defined another class called nav-toggle-bar. This class used to display toggle icon on the screen. We are also using java script because it is used to click event function.

HTML

<div class="nav-toggle">
	<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
	<ul>
	    <li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

CSS

<style>
  .nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width:2rem;
  z-index: 2; }
  .nav-toggle:hover {
    opacity: 0.8; }
  .nav-toggle .nav-toggle-bar,
  .nav-toggle .nav-toggle-bar::after,
  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#000;
    content: '';
    height:2px;
    width: 100%; }
  .nav-toggle .nav-toggle-bar {
    margin-top: 0; }
  .nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; }
  .nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; }
  .nav-toggle.expanded .nav-toggle-bar {
    background: transparent; }
  .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: white;
    margin-top: 0; }
  .nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

/* nav */
.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #000;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -25rem;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  width: 20rem;
  z-index: 1; }
  .nav.expanded {
    left: 0; }
  .nav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0; }
.nav.expanded li a{color:#fff;text-decoration:none;font-size:32px;}
.nav.expanded li{margin-bottom:20px;}
 </style>

Java script

<script>
 (function() {
	var hamburger = {
		navToggle: document.querySelector('.nav-toggle'),
		nav: document.querySelector('nav'),

		doToggle: function(e) {
			e.preventDefault();
			this.navToggle.classList.toggle('expanded');
			this.nav.classList.toggle('expanded');
		}
	};

	hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
 </script>
Hamburger menu icon
after Active Hamburger menu

Finally out put will when we click on the toggle icon that will open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the side nav is opened.

How does it works,
Its very simple use this

Step1

copy and paste style properties in your style file

<style>
  .nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width:2rem;
  z-index: 2; }
  .nav-toggle:hover {
    opacity: 0.8; }
  .nav-toggle .nav-toggle-bar,
  .nav-toggle .nav-toggle-bar::after,
  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#000;
    content: '';
    height:2px;
    width: 100%; }
  .nav-toggle .nav-toggle-bar {
    margin-top: 0; }
  .nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; }
  .nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; }
  .nav-toggle.expanded .nav-toggle-bar {
    background: transparent; }
  .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: white;
    margin-top: 0; }
  .nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

/* nav */
.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #000;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -25rem;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  width: 20rem;
  z-index: 1; }
  .nav.expanded {
    left: 0; }
  .nav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0; }
.nav.expanded li a{color:#fff;text-decoration:none;font-size:32px;}
.nav.expanded li{margin-bottom:20px;}
 </style>

Step2

Follow the below div structure where you want in header

<div class="nav-toggle">
	<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
	<ul>
	        <li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Background image using as a Text color with background clip

Bring your own styles and apply own background images, videos and gif to text !!!

Background-clip: Text is used to apply a background, to the text and defined how far the background (color or image) should extend within an element.

HTML5 & CSS3 has introduced number of possibilities for UX designers and UX developers.

Awesome Transition effects, Two lines of code give you Triliance of happiness when executed.

9 Hours of difficulties overlaps with the happiness in last 9 seconds. Its only happen in Web Design & Development.

You have to apply background-clip property to the page background which you want to clip

Step by Step process. How to add background clip text css effect animation to my web page.

Steps:

The class attribute is used to define equal styles for elements with the same class name.So, all HTML elements with the same class attribute will have the same format and style.

The classes are defined with in <div> tag

We used a class called bg_image in that class we defined some properties like background-size:cover; background-clip:text; and background image by using those properties we will get background to the text.

We defined another class called fg_text that class fg_text is used to defined the font-size, font-weight, text-align, and color of the text(This is some text). The class fg_text is defined inside the class bg_image.

CSS

.bg_image {
  background: url('https://www.clovetech.com/uploads/slider/careers.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  text-align:center;
}

.fg_text { 
  font-size:6em;
  font-weight: bold;
  text-align: center;
   color: transparent;
}

HTML

<div class="bg_image">
  <div class="fg_text">This is some text</div>
</div>
By Using Background image,
<img>
By Using Background Video
<video>
By Using Background Gif
<gif>

How does it works?

It’s very simple to integrate & easy to use, Follow the below steps order

Step1

Copy the below style properties and paste any where in the page

.bg_image {
  background: url('https://www.clovetech.com/uploads/slider/careers.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  text-align:center;
}

.fg_text { 
  font-size:12em;
  font-weight: bold;
  text-align: center;
   color: transparent;
}

Step2

Copy and paste div structure under body tag.

<div class="bg_image">
 <div class="fg_text">This is some text</div>
</div>

How to freeze first column of table in html

How to freeze first column of table in html, If the table content is more and adding number of columns, Many web designers creating responsive HTML tables. 

It is very uncomfortable to scroll horizontally to see the table rows.

By adding this, You can see all columns of div without any frustration. So fixed the column of table using only CSS. 

Description:

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag, it is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

The <html> element is the root element of an HTML page, the <head> element contains meta information and <title> element specifies a title for the document. The <style> tag is used to define style information for an HTML document.

The <body> tag defines the document’s body, it contains all the contents of an HTML document.

The <div> tag defines a division or a section in an HTML document and the div element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
}

In HTML, table is defined with the <table> tag where each table row is defined with the <tr> tag.

A table header is defined with the <th> tag and table data/cell is defined with the <td> tag.In the Table we defined a <tr> tag.<tr>tag is defined a class called headcol. headcol class is defined with styles like

position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;

By using this style we can freeze first column of the table.<td> tag defined a class called long. long class defined the background color in CSS.

HTML

<div>
<table>
        <tr><th class="headcol">1</th>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        </tr>
        <tr><th class="headcol">2</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">3</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">4</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">5</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">6</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
</table>
</div>

How does it works –

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
}
</style>
</head>
<body>

<div>
<table>
        <tr><th class="headcol">1</th>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        </tr>
        <tr><th class="headcol">2</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">3</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">4</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">5</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">6</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
</table>
</div>
</body>
</html>

Output

A table with rows and columns with a scroll bar and freezing first column of table using CSS.

CSS Transition Animation

CSS Transition animation is more simple and easy to use in any where on page more effectable.

CSS animation is a method of animating certain HTML elements without having to use JavaScript.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property. You can also add CSS Tratsition on page scroll down.

Name: animation-name

Declares the name of the @keyframes at-rule to manipulate.
animation-name: none;
animation-name: fadeIn;
animation-name: moveRight;

Duration : animation-duration:

Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-duration: 0s;
animation-duration: 1.2s;
animation-duration: 2400ms;

Timing : animation-timing-function:

Defines how the values between the start and the end of the animation are calculated.
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(4, end);

Timing Delay: animation-delay:

Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-delay: 0s;
animation-delay: 2400mss;
animation-delay: -500ms;

Direction : animation-direction:

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

Iteration : animation-iteration-count:

the number of times the animation should be performed. you can also specify infinite to repeat the animation indefinitely.
animation-iteration-count: 1;
animation-iteration-count: infinite;

Fill Mode : animation-fill-mode:

Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

Play State : animation-play-state

Specifies whether the animation is running or paused
animation-play-state: running;
animation-play-state: paused;

CSS Transition Example

.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation.

Example:

 div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}

The main concept of this demo is once the page is loaded, the page should “appear” three DIVs one after another by using animations. For this creation we are creating 3 boxes. Those three boxes are created by specified height,weight,background.For the creation of three boxes we defined 3 classes like .one, .two, .three. for that each class we created some properties like animation,animation-delay,animation-iteration-count,animation-fill-mode.

The animation-delay property specifies a delay for the start of an animation.
for class .one we defined animation-delay as 2s.
for class .two we defined animation-delay as 3s.
for class .three we defined animation-delay as 4s.
The animation-iteration-count property sets the number of times the animation plays, either as an integer or infinite.in this we specified only one time if we want n no.of time it is possible.
The animation-fill-mode property preserves an animation’s start state before a delayed animation executes (backwards),its end state after its final iteration (forwards), or both.animation-fill-mode is forwards.

.one {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove 1s;
  animation-delay: 2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.two {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove2 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove2 1s;
  animation-delay: 3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.three {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove2 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove2 1s;
  animation-delay: 4s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
div{
opacity:0;
margin-bottom:20px;
}

By using all this 3 classes we created 3 boxes with width: 100px; height: 100px; background: red; and
for animation we used
animation: mymove 1s;
animation-delay: 2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
By using all this poperties the animation will start one after one .

<p>  the animation will start one after one </p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p><strong>Note:</strong> The animation-delay property is not supported in Internet Explorer 9 and earlier versions.</p>

The animation-delay property is not supported in Internet Explorer 9 and earlier versions.
To support animation in safari we used @-webkit-keyframes mymove,@keyframes mymove , @-webkit-keyframes mymove2 ,@keyframes mymove2, -webkit-animation: mymove2 1s, -webkit-animation-delay: 2s .

How to show div on hover jquery mouseover

Show div on hover using  JQuery, hiding and showing a div in HTML is really simple. In this demo will show div on hover  when mouse hover on a particular  button or span.
The main concept is here we will add  ‘show div’ outside of inner div, one is inside and rest of the div is outside. The outer div will always be displayed. The inner div will be hidden by default and once the mouse is hovered on the outer div , the inner div will be shown.

We will use the CSS for hover. If we want to hide the div once the user has moved their mouse over it.

First we need to add the HTML. We create a div, show div on hover .mega-menu inside it we add another div  #menu-dropdown , which is hidden at first. Once the user moves their mouse over the .mega-menu div, the inside div is hidden.

<span class="menu-item mega-menu">Home</span>

<div id="menu-dropdown">
  <p class="paragraph">Phoenix</p>
</div>

Next we have to add some CSS. we creating one class and one ID.
The Id is #menu-dropdown. In that Id we defined some properties like display:none; position:absolute; width:50%; height:50%; and the class is .mega-menu and when mouseenter the child it show  background:grey color.

body{
  margin:0px;
}
.mega-menu {
  border: 1px solid black;
}
#menu-dropdown {
  display:none;
  background: grey;
  color:white;padding:10px;
  width:150px;margin:auto;
}

finally we using jquery for action performance.
jQuery .hover() specifies two functions: one for the mouseEnter event and one for the mouseLeave event.

jQuery mouseenter( )

The mouseenter( ) method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.
The syntax for using mouseenter( ):
mouseenter()

jQuery mouseleave( )

The mouseleave( ) method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.
The syntax for using mouseleave( ):
mouseleave()

jQuery mouseover( )

The mouseover( ) event occurs when the mouse pointer is over the selected element.
The syntax for using mouseover( ):
mouseover()

 $(document).ready(function(){
      $(".mega-menu").mouseenter(function() {
          $('#menu-dropdown').stop().show();
      });
      
      $(".mega-menu, #menu-dropdown").mouseleave(function() {
        if(!$('#menu-dropdown').is(':hover')){
          $('#menu-dropdown').hide();
        };
      });
});

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
That’s all you need to make this work. Now, it’s up to you; style it and make it look nice with some CSS coding.

Demo

Jquery-MouseOver-Event

When we hover over a button on the menu the cursor changes to a pointer, and mouse pointer moves over the selected elements.
when we move the mouse out from the button then mouse should leave the selected element.

The main concept is we will add two divs, one inside the other. The outer div will always be displayed. The inner div will be hidden by default and once the mouse is hovered on the outer div, the inner div will be shown.and when mouse leaves the outer div then inner div should be hidden.

First we need to add the HTML. We create a div, .mega-menu inside it we add another div #menu-dropdown , which is hidden at first. Once the user moves their mouse over the .mega-menu div, the inside div is hidden.

<div id="menu">
  <ul class="menu-wrapper" style="padding:0px;margin:0px;">
    <li class="menu-item mega-menu">Home</li>
    <li class="menu-item">About</li>
    <li class="menu-item">Contact</li>
  </ul>
</div>
<div id="menu-dropdown">
  <div class="dropdown-content">
    <p class="paragraph">Phoenix</p>
  </div>
</div>

To implement this method we are using css and Jquery.
we creating one class and one ID. The Id is #menu-dropdown. In that Id we defined some properties like  display:none;  position:absolute;  width: 50%;  height:50%; and the class is .menu-item and properties are like display:inline-block;  background:#ddd;  padding:10px; and in HTML we used List order to show them in a menu header. the menu buttons have background:#ddd; and when mouseenter the child have background:grey.

body{
  margin:0px;
}
#menu {
  border: 1px solid black;
}
#menu-dropdown {
  display:none;
  position:absolute;
  background: grey;
  color:white;
  width: 50%;
  height:50%;
}
.menu-item{
  display:inline-block;
  background:#ddd;
  padding:10px;
}

jQuery .hover( ) specifies two functions: one for the mouseEnter event and one for the mouseLeave event.

JQuery Mouseenter( )

The mouseenter( ) method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.
The syntax for using mouseenter( ):
mouseenter()

JQuery Mouseleave( )

The mouseleave( ) method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.
The syntax for using mouseleave( ):
mouseleave()

JQuery Mouseover( )

The mouseover event occurs when the mouse pointer is over the selected element.
The syntax for using mouseover( ):
mouseover()

The .hover( ) method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

 $(document).ready(function(){
      $(".mega-menu").mouseenter(function() {
          $('#menu-dropdown').stop().show();
      });
      
      $(".mega-menu, #menu-dropdown").mouseleave(function() {
        if(!$('#menu-dropdown').is(':hover')){
          $('#menu-dropdown').hide();
        };
      });
});

This method is working in the following browsers like,
Google Chrome,Mozilla Firefox,Safari ,Microsoft Internet Explorer – v.11.

How to create a Background image Clip-Path

The clip-path property can reference an SVG graphics element or use a specified basic shapes as clipping path.

clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle or inset keywords, which are part of the CSS exclusion module.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

In this demo we are creating some shapes like triangle,trapezoid,parallelogram,rhombus.

Triangle

To create a Traingle we are using a property like clip-path: polygon(50% 0%, 0% 100%, 100% 100%).

.triangle{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
</div>

Trapezoid

Clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); is used to create trapezoid.

.trapezoid{
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
</div>

parallelogram

To create a parallelogram we are using a property called clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%).

.parallelogram{
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
</div>

Rhombus

And finally clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
is used to create rhombus.

.rhombus{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
</div>

we are using another property is display :inline-block.
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

Amonge all this Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path.
You can also clip images into different shapes with this property and arrange them together in best ways with the help of a CSS.

Select-Dropdown

The main concept of this demo is no placeholder attribute in ‘select’ tag but it can make the placeholder for a ‘select’ box.
I am using placeholders for text inputs . But I’d like to use a placeholder for my selectboxes.

I am creating a class like option[value=””][disabled] in that i used a property called display:none; if the property is disabled, its value will be either true or false.i like to write selected disabled in the first option so that the first value will disable when we click real options.

I am creating some properties like color:#516a8a; for the placehloder and color: #444; for the real options.and when we click the real options its color is #fff. using a transparent as background , outline:none; height:35px ;and border: 1px solid #516a8a; for the select option.

option[value=""][disabled] {
display:none;
}
 select:invalid {
 color:#516a8a;
 }
 select option {
 color: #444;
  }
 select{
  border: 1px solid #516a8a;
  background: transparent;
  outline:none;
  height:35px;
 }
select:valid {
color:#fff;
}
<div style="background: rgba(3, 41, 90, 0.8);display: inline-block;padding: 100px;">
  <div style="background:#03295a;display: inline-block;padding: 50px;">
  <select required>
   <option value="" selected disabled>Select your option</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Sapota">Sapota</option>
    <option value="Banana">Banana</option>
  </select>
  </div>
</div>

When the select element is required it allows use of the :invalid CSS class which allows you to style the select element when in it’s “placeholder” state. :invalid works here because of the empty value in the placeholder option.
so,that selected value always being disable when we selecting a real option

This method is working in the following browsers like,
Google Chrome,Mozilla Firefox,Safari ,Microsoft Internet Explorer – v.11

Page-Loaders

Now a days, if a website takes more than 4 seconds to load,
a visitor might think your site is being unresponsive and
simply close the page and find something else. so, creative page-loaders were created by designers to overcome this problem.

A page loader is any kind of animation that visually communicates to a visitor and also used to keep visitors entertained while the page is still loading.

“spinners” can be used to show the loading state in your projects.you can create loaders with the help of HTML and CSS and there is no need of JavaScript.

You can set different sizes different types and different speed of loaders.And use CSS or inline styles to change the dimensions as needed.

Use spinners within buttons to indicate an action is currently processing or taking place.

The size of the loader is specified with the width and height properties.we add an animation that makes the border-color, spin forever with a 2 second animation speed.

Create a DIV with your page loader in it. Add this DIV to every page on your website that links to the page you need a loader for. Then make sure to add display: none; to your CSS for this DIV, this will make it not show up at all on these pages under normal circumstances.

Making use of a regular UI library, You can assign
diameter of an inner circle;
the speed of animation;
range and density;
color and background color.
you can also choose several standard shapes including oval, square, rectangle, spiral, and rounded rectangle.

Dual-Ring-Loader

.lds-dual-ring {
          display: inline-block;
          width: 64px;
          height: 64px;
      }

          .lds-dual-ring:after {
              content: " ";
              display: block;
              width: 46px;
              height: 46px;
              margin: 1px;
              border-radius: 50%;
              border: 5px solid #0009f8;
              border-color: #0009f8 transparent #ff3366 transparent;
              animation: lds-dual-ring 1.2s linear infinite;
          }

      @keyframes lds-dual-ring {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }
<div class="lds-dual-ring"></div>

Roller -Loader

.lds-roller {
           display: inline-block;
           position: relative;
           width: 64px;
           height: 64px;
       }

           .lds-roller div {
               animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
               transform-origin: 32px 32px;
           }

               .lds-roller div:after {
                   content: " ";
                   display: block;
                   position: absolute;
                   width: 6px;
                   height: 6px;
                   border-radius: 50%;
                   background: #ff3366;
                   margin: -3px 0 0 -3px;
               }

               .lds-roller div:nth-child(1) {
                   animation-delay: -0.036s;
               }

                   .lds-roller div:nth-child(1):after {
                       top: 50px;
                       left: 50px;
                   }

               .lds-roller div:nth-child(2) {
                   animation-delay: -0.072s;
               }

                   .lds-roller div:nth-child(2):after {
                       top: 54px;
                       left: 45px;
                   }

               .lds-roller div:nth-child(3) {
                   animation-delay: -0.108s;
               }

                   .lds-roller div:nth-child(3):after {
                       top: 57px;
                       left: 39px;
                   }

               .lds-roller div:nth-child(4) {
                   animation-delay: -0.144s;
               }

                   .lds-roller div:nth-child(4):after {
                       top: 58px;
                       left: 32px;
                   }

               .lds-roller div:nth-child(5) {
                   animation-delay: -0.18s;
               }

                   .lds-roller div:nth-child(5):after {
                       top: 57px;
                       left: 25px;
                   }

               .lds-roller div:nth-child(6) {
                   animation-delay: -0.216s;
               }

                   .lds-roller div:nth-child(6):after {
                       top: 54px;
                       left: 19px;
                   }

               .lds-roller div:nth-child(7) {
                   animation-delay: -0.252s;
               }

                   .lds-roller div:nth-child(7):after {
                       top: 50px;
                       left: 14px;
                   }

               .lds-roller div:nth-child(8) {
                   animation-delay: -0.288s;
               }

                   .lds-roller div:nth-child(8):after {
                       top: 45px;
                       left: 10px;
                   }

       @keyframes lds-roller {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }
<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

Spinner

.lds-spinner {
          color: official;
          display: inline-block;
          position: relative;
          width: 64px;
          height: 64px;
      }

          .lds-spinner div {
              transform-origin: 32px 32px;
              animation: lds-spinner 1.2s linear infinite;
          }

              .lds-spinner div:after {
                  content: " ";
                  display: block;
                  position: absolute;
                  top: 3px;
                  left: 29px;
                  width: 5px;
                  height: 14px;
                  border-radius: 20%;
                  background: #ff3366;
              }

              .lds-spinner div:nth-child(1) {
                  transform: rotate(0deg);
                  animation-delay: -1.1s;
              }

              .lds-spinner div:nth-child(2) {
                  transform: rotate(30deg);
                  animation-delay: -1s;
              }

              .lds-spinner div:nth-child(3) {
                  transform: rotate(60deg);
                  animation-delay: -0.9s;
              }

              .lds-spinner div:nth-child(4) {
                  transform: rotate(90deg);
                  animation-delay: -0.8s;
              }

              .lds-spinner div:nth-child(5) {
                  transform: rotate(120deg);
                  animation-delay: -0.7s;
              }

              .lds-spinner div:nth-child(6) {
                  transform: rotate(150deg);
                  animation-delay: -0.6s;
              }

              .lds-spinner div:nth-child(7) {
                  transform: rotate(180deg);
                  animation-delay: -0.5s;
              }

              .lds-spinner div:nth-child(8) {
                  transform: rotate(210deg);
                  animation-delay: -0.4s;
              }

              .lds-spinner div:nth-child(9) {
                  transform: rotate(240deg);
                  animation-delay: -0.3s;
              }

              .lds-spinner div:nth-child(10) {
                  transform: rotate(270deg);
                  animation-delay: -0.2s;
              }

              .lds-spinner div:nth-child(11) {
                  transform: rotate(300deg);
                  animation-delay: -0.1s;
              }

              .lds-spinner div:nth-child(12) {
                  transform: rotate(330deg);
                  animation-delay: 0s;
              }

      @keyframes lds-spinner {
          0% {
              opacity: 1;
          }

          100% {
              opacity: 0;
          }
      }
<div class="lds-spinner">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       </div>

circular-Loader

.loader {
           border: 3px solid #0009f8;
           border-radius: 50%;
           border-top: 3px solid #ff3366;
           width: 40px;
           height: 40px;
           -webkit-animation: spin 2s linear infinite; /* Safari */
           animation: spin 2s linear infinite;
       }

       /* Safari */
       @-webkit-keyframes spin {
           0% {
               -webkit-transform: rotate(0deg);
           }

           100% {
               -webkit-transform: rotate(360deg);
           }
       }

       @keyframes spin {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }
<div class="loader" style="margin:auto;"></div>

Cube-Grid

.sk-cube-grid {
      width: 40px;
      height: 40px;
      margin: 100px auto;
    }

          .sk-cube-grid .sk-cube {
              width: 33%;
              height: 33%;
              background-color: #ff3366;
              float: left;
              -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
              animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          }

          .sk-cube-grid .sk-cube1 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

          .sk-cube-grid .sk-cube2 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
          }

          .sk-cube-grid .sk-cube3 {
              -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
          }

          .sk-cube-grid .sk-cube4 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
          }

          .sk-cube-grid .sk-cube5 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

          .sk-cube-grid .sk-cube6 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
          }

          .sk-cube-grid .sk-cube7 {
              -webkit-animation-delay: 0s;
              animation-delay: 0s;
          }

          .sk-cube-grid .sk-cube8 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
          }

          .sk-cube-grid .sk-cube9 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

    @-webkit-keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    @keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }
<div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div> 
  
    </div>

Line-Loader

.line_loader {
           height: 4px;
           width: 600px;
           position: relative;
           overflow: hidden;
           background-color: #dddeff;
           margin: auto;
       }
      
           .line_loader:before {
               display: block;
               position: absolute;
               content: "";
               width: 200px;
               height: 4px;
               background-color: #0009f8;
               animation: loading 2s linear infinite;
           }

       @keyframes loading {
           from {
               left: -200px;
               width: 30%;
           }

           50% {
               width: 30%;
           }

           to {
               left: 100%;
           }
       }
<div class="line_loader" style="margin-top:100px;"></div>

You should also include a -webkit- prefix for browsers that do not support animation and transform properties.

CSS spinner uses CSS Animation, which is wildly supported by all modern browsers such as Google Chrome and Mozilla Firefox. However, Microsoft Internet Explorer version earlier than 10 don’t support CSS Animation.

To support older IE, you have to use GIF format image.

Demo

CSS-Animations-when-scroll-down

Animations

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width.

In this demo i am going to show different types of animations when we scroll the page . First, we are using a image having width 350px and height 218px. When you scroll the page from top to bottom it will move with nice animation effect.

   <div id="page">
        <section class="page-section">
            <div class="container">
                <div class="content">
                    <div class="section-title text-left" data-animation="fadeInLeft">
                    <h2 class="title">Bounce Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounce" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Pulse Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="pulse" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Shake Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="shake" />
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Tada Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="tada" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Swing Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="swing" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Wobble Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wobble" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">Wiggle Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wiggle" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">BounceIn Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceIn" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">BounceInUp Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInUp" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                    <h2 class="title">BounceInDown Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInDown" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                     <h2 class="title">BounceInLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInLeft" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">BounceInRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInRight" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                <h2 class="title">FadeIn Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeIn" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                 <h2 class="title">FadeInUp Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUp" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">FadeInDown Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDown" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
               <h2 class="title">FadeInLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeft" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
             <h2 class="title">FadeInRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRight" />
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">FadeInUpBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUpBig" />
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                <h2 class="title">FadeInDownBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDownBig" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
               <h2 class="title">FadeInLeftBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeftBig" />
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">FadeInRightBig Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRightBig" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">RotateIn Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateIn" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                    <h2 class="title">RotateInUpLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpLeft" />
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">RotateInDownLeft Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownLeft" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
                  <h2 class="title">RotateInUpRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpRight" />
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                    <div class="section-title text-left" data-animation="fadeInLeft">
               <h2 class="title">RotateInDownRight Animation</h2>
                    </div>
                    <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownRight" />
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
                    <br />
                    <br />
                </div>
            </div>
        </section>
  </div>

Bounce Animation

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.

To animate an element, simply use data-animation="bounce" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounce" />

Pulse Animation

It Provides a single vibration or short burs to an element when we scroll the page.

To animate an element, simply use data-animation="pulse" as given below.

 <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="pulse" />

Shake Animation

It provides to move (an object) up and down or from side to side for an element.

To animate an element, simply use data-animation="shake" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="shake" />

Tada Animation

It provides to move an element from side to side.

To animate an element, simply use data-animation="tada" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="tada" />

Swing Animation

The swing animation effect move or cause to move back and forth or from side to side while suspended or on an axis to an element.

To animate an element, simply use data-animation="swing" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="swing" />

Wobble Animation

It provides to move (an object) up and down or from side to side for an element.

To animate an element, simply use data-animation="wobble" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wobble" />

Wiggle Animation

It provides to move or cause to move up and down or from side to side with small rapid movements.

To animate an element, simply use data-animation="wiggle" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="wiggle" />

BounceIn Animation

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.

To animate an element, simply use data-animation="bounceIn" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceIn" />

BounceInUp Animation

Bounce Animation effect is used to move the element from bottom to top of the surface.

To animate an element, simply use data-animation="bounceInUp" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInUp" />

BounceInDown Animation

Bounce Animation effect is used to move the element from top to bottom of the surface.

To animate an element, simply use data-animation="bounceInDown" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInDown" />

BounceInLeft Animation

Bounce Animation effect is used to move the element from left side of the surface.

To animate an element, simply use data-animation="bounceInLeft" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInLeft" />

BounceInRight Animation

Bounce Animation effect is used to move the element from right side of the surface.

To animate an element, simply use data-animation="bounceInRight" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="bounceInRight" />

FadeIn Animation

The image come or cause to come gradually into (or) out of view, (or) to merge into another shot.

To animate an element, simply use data-animation="fadeIn" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeIn" />

FadeInUp Animation

The image come gradually from bottom to top.

To animate an element, simply use data-animation="fadeInUp" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUp" />

FadeInDown Animation

The image come gradually from top to bottom.

To animate an element, simply use data-animation="fadeInDown" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDown" />

FadeInLeft Animation

The image come gradually from left.

To animate an element, simply use data-animation="fadeInLeft" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeft" />

FadeInRight Animation

The image come gradually from right.

To animate an element, simply use data-animation="fadeInRight" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRight" />

FadeInUpBig Animation

The image gradually move from bottom to top in the page.

To animate an element, simply use data-animation="fadeInUpBig" as given below.

 <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInUpBig" />

FadeInDownBig Animation

The image gradually move from top to bottom in the page.

To animate an element, simply use data-animation="fadeInDownBig" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInDownBig" />

FadeInLeftBig Animation

The image gradually move from left.

To animate an element, simply use data-animation="fadeInLeftBig" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInLeftBig" />

FadeInRightBig Animation

The image gradually move from right.

To animate an element, simply use data-animation="fadeInRightBig" as given below.

 <img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="fadeInRightBig" />

RotateIn Animation

It provides to move or cause to move in a circle round an axis or center.

To animate an element, simply use data-animation="rotateIn" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateIn" />

RotateInUpLeft Animation

The image will rotate from top to left in a circle round motion. (or) in anti clock direction.

To animate an element, simply use data-animation="rotateInUpLeft" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpLeft" />

RotateInDownLeft Animation

The image will rotate from bottom to left in a circle round motion.

To animate an element, simply use data-animation="rotateInDownLeft" as given below.

 <img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownLeft" />

RotateInUpRight Animation

The image will rotate from top to right in a circle round motion. or in clock direction.

To animate an element, simply use data-animation="rotateInUpRight" as given below.

<img class="img-responsive pull-left" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInUpRight" />

RotateInDownRight Animation

The image will rotate from bottom to right in a circle round motion.

To animate an element, simply use data-animation="rotateInDownRight" as given below.

<img class="img-responsive pull-right" src="http://www.techdezine.com/wp-content/uploads/2019/04/default.jpg" width="350" height="218" data-animation="rotateInDownRight" />

Animate Once:

Adding this will make sure the item only animates once and will not reset when it leaves the view-port.

We are using java script

var appMaster = {
                   dataAnimations: function() {
                   $('[data-animation]').each(function() {
	var element = $(this);
	element.addClass('animated');
	element.appear(function() {
                   var delay = ( element.data('delay') ? element.data('delay') : 1 );
	if( delay > 1 ) element.css('animation-delay', delay + 'ms');				element.addClass( element.data('animation') );
	setTimeout(function() {
	element.addClass('visible');
	}, delay);	
                   });
	});
                    },
                    }; 
  $(document).ready(function() {
	appMaster.dataAnimations();
	});	

The animation property is not supported in Internet Explorer 9 and earlier versions.

Number of Columns in a row using flex box and column count

Container is used to set the content’s margins dealing with the responsive behaviors of your layout.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The columns have been created by wrapping four DIV elements into one container DIV.

In this we are using a class called card in that we defined a property called

HTML

<div class="container">
<br/><br/>
<section>
  <div class="row">      
	  <div class="card">		 
	    <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  
  </div>
 </section>

css

body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:0 25%;margin-bottom:30px !important;padding:15px;border:none;}
.profile{margin-top:80px;padding:5px;}
.profile a{position: absolute; bottom: 20px;}
.card-cp{background-color: #fff;background-clip:border-box;
border:1px solid rgba(0,0,0,.125);border-radius:.25rem;padding:15px;}
@media(max-width:1000px){.card{flex:0 50%;}}
@media(max-width:768px){.card{flex:0 100%;}}

 

the property flex:0 25% will defineds the first value must be a <number> and it is interpreted as <flex-grow>. The second value must be one of:

a <number>: then it is interpreted as <flex-shrink>. (or) a valid value for width: then it is interpreted as <flex-basis>.

flex:0 25% ; is used to create  four div elements (or) four flex boxes.
flex:0 33.33% is used to create  three flex boxes.
flex:0 50%    is used to create  two flex boxes.
flex:0 100%   is used to create one flex box.

Demo Download

 

How to create an Equal height grids using flex

You can easily create a equal height blocks. Flex box layout using a set of CSS properties designed for this task. Flex box is used to add padding, border, and margin to the child elements without needing to worry about a column spelling over to the next row.

In this demo we are creating three columns of equal width, equal height, and fixed-pixel margin between them, as well as any amount of padding by using flex.

HTML

<div class="container">
<br/><br/>
<section>
  <div class="row">      
	  <div class="card">		 
	    <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 
	  <div class="card">		 
		 <div class="card-cp">
		  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of   </p>
		</div>  
	  </div> 	  
  </div>
 </section>
</div>

CSS

body{background:#f1f1f1;}
section{background:#fff;padding:40px;}
.card{flex:1;}
.row .card{margin:0 15px;}	
.profile{margin-top:80px;}
.profile a{position: absolute;
bottom: 20px;}
@media(max-width:768px){
.card{flex:100%;}
}

 

equal blocks
Equal blocks/boxes using flex without height

 

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

we created classes like .card, .profile. In class (.card) we defined flex:1 to diplay equal height boxes. In class (.profile) we defined properties like margin-top : 80px; we also created a button and we used properties like position : absolute and bottom : 20px;.

 

Footer is always stays at bottom

The container div that surrounds everything. Inside that are three more divs; a header, a body and a footer.

When an HTML page contains a small amount of content, the footer can sometimes display on half of the page and leaving a blank space below. This can look bad, particularly on a large screen.

So, to avoid that problem

The footer has a set height in pixels (or rem). The div is absolutely positioned bottom:0; this moves it to the bottom of the container div.

When there is small content on the page the container div is exactly the height of the browser view port (because of the min-height:100%;) and the footer display neatly at the bottom of the screen.

When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport – the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.

HTML

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head> 
<body>
 <div class="container">
   <div class="content">
    content	
   </div>
   <footer class="footer">footer</footer>
 </div>
</body>
</html>

Of course, Which method you choose is entirely up to you, and the specifics of your design.

Mostly, we will face this type of problem in our own product applications,

When we are creating the static templates, we already have minimum required content of every page so we didnt face,

So what is this doing?
Container – sets its minimum height to 100% of the view port height (VH)

Content – sets minimum or maximum content of div and we give a space to div initially. Its having same height of footer is equal to padding-bottom of content.
footer – sets the height of div.

Compatible browsers

Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8

Cross Devices

works in all devices Mobile,Tab and Desktop

w3c standard css

100% valid css

No javascript and Jquery required

Free Demo & Download

How does it works ?

Its very easy to use follow the below steps.

Step1

copy CSSand paste in style.css page or paste under head tag.

<style>
 .container {
  position: relative;
  min-height: 100vh;
}
.content {
  padding-bottom: 2.5rem;    /* Footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
 </style>

Step2

Add div structure in body page

<div class="container">
   <div class="content">
    content	
   </div>
   <footer class="footer">footer</footer>
 </div>

The above example is help to you and save some time when implementing it.

Output

The footer is placed at the bottom of the page.