bhargav2785

.ani-box-shadow-2{
	position: relative;
	margin: 50px;
	width: 200px;
	height: 200px;
	background-color: steelblue;
	-webkit-animation: myAnimation 1s infinite alternate;
}

@-webkit-keyframes myAnimation{

bhargav2785

.ani-box-shadow-3{
	position:relative;
	margin: 50px;
	height: 200px;
	width:200px;
	background-color: steelblue;
	-webkit-animation: myAnimation 1s infinite alternate;
}

@-webkit-keyframes myAnimation{

bhargav2785

.ani-box-shadow-4{
	position:relative;
	margin: 50px;
	height: 200px;
	width:200px;
	background-color: steelblue;
	background-image: -webkit-radial-gradient(100% 100%, circle cover, black, transparent);
	-webkit-animation: myAnimation 1s infinite alternate;
}

bhargav2785

.ani-border-width{
	position: relative;
	margin: 50px;
	width:200px;
	height: 200px;
	background-color: steelblue;
	line-height: 200px;
	text-align: center;
	font-size: 28px;
	display: block;

bhargav2785

/**
 * transform::skew effect 
**/
.ani-border-width{
	position: relative;
	margin: 50px;
	width:200px;
	height: 200px;
	background-color: steelblue;
	line-height: 200px;

bhargav2785

/**
  * box shadow demo
  **/

.demo{
	position: relative;
	margin: 50px;
	width:200px;
	height: 200px;
	background-color: steelblue;

bhargav2785

/**
  * box shadow demo
  **/

.demo{
	position: relative;
	margin: 50px;
	width:200px;
	height: 200px;
	background-color: steelblue;

bhargav2785

/**
  * box shadow demo 2 (door close effect)
  **/

.demo{
	position: relative;
	margin: 50px;
	width:200px;
	height: 200px;
	background-color: steelblue;

bhargav2785

/**
  * transform: translate effect to mimic 'inccorect input or access denied' 
  **/

.demo{
	position: relative;
	margin: 50px 100px;
	width:400px;
	height: 100px;
	background-color: steelblue;

bhargav2785

/**
* Article from MDN explaning css flex
**/
body {
   font: 24px Helvetica;
   background: #999999;
}
 
  #main {
       min-height: 800px;