CSS3

by Joe Saad

HTML

<div class="section">
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse nisi lectus, vulputate in laoreet quis, dignissim ac elit. Pellentesque nunc lectus, pellentesque non sodales quis, luctus pretium velit! Proin mauris nulla, malesuada vel pellentesque nec, porttitor eget nisl. Curabitur porta aliquet convallis. Nam sit amet rutrum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
  </div>

<div class="section">
    Donec id nunc nec libero consequat congue. Nullam dictum gravida dapibus. Nulla sem enim, congue eu mollis sit amet, mollis quis eros. Pellentesque habitant morbi tristique senectus 
  </div>

<div class="section">
   Pellentesque in quam at nisl iaculis sollicitudin vel id metus. Aenean posuere laoreet felis, ut tempor eros sodales et! Mauris turpis nibh; venenatis vel aliquam quis, tempor vitae nibh. Quisque tincidunt, sem in bibendum ullamcorper, elit urna scelerisque sem, id pellentesque arcu sapien sit amet m
  </div>

CSS

body {font-family:arial; font-size:11px;}

.section {
    margin:10px;
    padding:15px;
    
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
    transition: background 0.5s linear;
background-color:olive;
}

.section:hover {
background-color:yellow;
    -moz-box-shadow:   2px 1px 2px 2px rgba(23, 23, 23, 0.2);
  -webkit-box-shadow:  2px 1px 2px 2px rgba(23, 23, 23, 0.2);
  box-shadow:        2px 1px 2px 2px rgba(23, 23, 23, 0.2);
}