sudarshanReddykurri

<div class="rotate">TEST</div>

sudarshanReddykurri

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
	<option>Ada</option>
	<option>Java</option>
	<option>JavaScript</option>
	<option>Node.js</option>
	<option>Ruby on Rails</option>
</datalist>

sudarshanReddykurri

/* CSS Demo on unit em. 
Edit the font-size & number of em units to observe the effect */

body{
font-size: 24px;
}

.bi {
background: green;
color: white;

sudarshanReddykurri

/* CSS Demo on unit em. 
Edit the font-size & number of em units to observe the effect */

body{
font-size: 24px;
}

.bi {
background: green;
color: white;

sudarshanReddykurri

/*  CSS Border Image Demo using Gradients */

.bi{
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),    
        url("http://3.imimg.com/data3/HO/LB/MY-9934284/rainbow-and-teakwood-stone-mosaic-tiles-250x250.jpg");
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

sudarshanReddykurri

/*  CSS Random Backgrounds  using Gradients Demo */
/* It repeats after 240px since LCM OF 80*60*40=240 */
.r1{
background: hsl(20, 40%, 90%);
background-image:   
	             linear-gradient(90deg, #fb3 10px, transparent 0), 
                 linear-gradient(90deg, #ab4 20px, transparent 0),
                 linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 90px 100%, 40px 100%;
width: 200px;

sudarshanReddykurri

/*  CSS Dots & Checker Board  using Gradients Demo */

.g1{
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
width: 200px;
height:200px;
margin: 20px;
}

sudarshanReddykurri

/* 
CSS Grids using Gradients Demo */

.g1{
background: white;
background-image: linear-gradient(90deg,  
                  rgba(200,0,0,.5) 50%, transparent 0),
                 linear-gradient(rgba(200,0,0,.5) 50%,
                  transparent 0);
                  background-size: 30px 30px;

sudarshanReddykurri

/* Gradients Demo */

.g1{
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
background-repeat: no-repeat;
width: 200px;
height:200px;
margin: 20px;
}

sudarshanReddykurri

/* Border-Radius Demo */

.quart{
background: #655;
border-radius: 100% 0 0 0;
width: 100px;
height: 100px;
margin: 85px;
}