HTML

	Supported Funcationalities
Control	Paging	Data Grouping	Provide Flexible Layout	Update,Delete	Insert	Sorting
ListView	supported	supported	supported	supported	supported	supported
GridView	supported	Not supported	Not Supported	supported	Not Supported	supported
DataList	Not supported	supported	supported	Not supported	Not supported	Not supported
Repeater	Not supported	Not supported	supported	Not supported	Not supported	Not supported

#circle {
   width: 140px;
   height: 140px;
   background: red;
   -moz-border-radius: 70px;
   -webkit-border-radius: 70px;
   border-radius: 70px;
}
#square {
   width: 140px;
   height: 140px;
   background: blue;
}
#oval {
   width: 200px;
   height: 100px;
   background: purple;
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px;
   border-radius: 100px / 50px;
}#up-triangle {
   width: 0;
   height: 0;
   border-bottom: 120px solid green;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}#down-triangle {
   width: 0;
   height: 0;
   border-top: 80px solid pink;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid orange;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid red;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
#trapezium {
   height: 0;
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}
#diamond {
   width: 80px;
   height: 80px;
   background: purple;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}#rectangle {
   width: 140px;
   height: 80px;
   background: green;
}#parallelogram {
   width: 130px;
   height: 75px;
   background: pink;
   /* Skew */
   -webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
   -o-transform: skew(20deg);
   transform: skew(20deg);
}
=========================
#twelve-point-star {
   height: 100px;
   width: 100px;
   background: orange;
   position: absolute;
}

#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}
=================
#six-point-star {
   position: absolute;
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 80px solid red;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 80px solid red;
   margin: 30px 0 0 -50px;
}
==============================
#octagon {
   width: 100px;
   height: 100px;
   background: blue;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute;
   border-bottom: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute;
   border-top: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
   margin: 70px 0 0 0;
}
=====================
#speech-bubble {
   width: 120px;
   height: 80px;
   background: purple;
   position: absolute;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid purple;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}
===============================
#egg {
   display:block;
   width:126px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:green;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
============================
#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid navy;
  /* 104 = 120 * 0.866 */
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

===========================
.pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

===========================
.biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
}======================
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
  content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
=======================
http://westciv.com/tools/textStroke/index.html



-webkit-text-stroke: 2.0px #000000;
-webkit-text-fill-color: #FF293E
text-shadow:2px 9px 4px #333333
box-shadow:2px 2px 2px #333333

background-color:#ab0919;
background-image: radial-gradient(43% 58%, ellipse contain, #ab0919, #0000ff 73%)

text

#demo {
  font-weight: normal;
  text-align: right;
  background-color: #FFFFFF;
  color: #666666;
  font-size: 30px;
  line-height: 140%;
  text-shadow: 2px 2px 2px #333333;
  column-count:2;
  column-width:10px;
  column-gap:0px
}

<form>
  <input type="text" placeholder="Enter your full name" required><br/>
  <input type="email" placeholder="Enter email address" required><br/>
  <input type="url" placeholder="Enter your website URL"><br/>
  <input type="number" value="1" min="1"
               max="5" placeholder="Enter no. of attendees">
  <br/><br/>
  <input type="submit" value="Submit">
</form>

   cloumn
{
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #f00;
}
Relecttions

 {
    -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
}
text stoke
{
-webkit-text-fill-color: #fff;
    -webkit-text-stroke-color: #d78965;
    -webkit-text-stroke-width: 1px;
    text-fill-color: #fff;
    text-stroke-color: #d78965;
    text-stroke-width: 1px;

   font-size:40px;
}

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}



.result-animations {
    -webkit-animation-name: bounceball;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: none;

    -moz-animation-name: bounceball;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: none;

    animation-name: bounceball;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: none;
}

@-webkit-keyframes bounceball {

    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }

}

@-moz-keyframes bounceball {

    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }

}

@keyframes bounceball {

    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }

}
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(5% + 10px);
  width: calc(100% - 100px);
}

 .btn.btn-link:hover {
background-color: #008cba;
color: #fff;
outline-offset: 10px;
outline-color: rgba(0, 140, 186, 0);
}
.btn.btn-link {
font-weight: 300;
font-size: 13px;
background-color: transparent;
color: #008cba;
border: 0;
border-radius: 0;
outline: 1px solid;
outline-offset: 1px;
outline-color: rgba(0, 140, 186, 1);
margin: 20px 0 0 0;
padding: 8px 13px;
text-decoration: none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


/*media query*/

@media only screen and (max-width:320px)
{

}
@media (min-width: 321px) and (max-width: 480px)
{

}
@media (min-width: 481px) and (max-width:581px)
{

}
@media (min-width: 582px) and (max-width:680px)
{
     
}
@media (min-width: 682px) and (max-width:768px)
{
 
}
@media (min-width: 769px) and (max-width:1024px)
{
 
}
@media (min-width: 1025px) and (max-width:1150px)
{
 
}

http://designscrazed.org/free-responsive-html5-css3-templates/