</div><div><section id="article">  </div><div>  <dl class="menu">  </div><div>  <dt class="btnRot">Закладки</dt>  </div><div>  <dd><a href="http://twize.ucoz.ru/">Всё для uCoz</a></dd>  </div><div>  <dd><a href="Ваша ССЫЛКА">Закладка №3</a></dd>  </div><div>  <dd><a href="Ваша ССЫЛКА">Закладка №2</a></dd>  </div><div>  <dd><a href="Ваша ССЫЛКА">Закладка №1</a></dd>  </div><div>  </dl>  </div><div>  <div class="masque"></div>  </div><div>  <div class="ombre"></div>  </div><div></section>

* {  </div><div>  margin: 0;  </div><div>  padding: 0;  </div><div>  border: none;  </div><div>  }  </div><div>  #article {  </div><div>  height: 360px;  </div><div>  width: 586px;  </div><div>  font-family: "TeXGyreReg",sans-serif;  </div><div>  font-size: 17px;  </div><div>  }  </div><div>  #article dl {  </div><div>  position: relative;  </div><div>  top: 15px;  </div><div>  left: 50%;  </div><div>  margin-left: -75px;  </div><div>  width: 150px;  </div><div>  height: 155px;  </div><div>  color: #324040;  </div><div>  text-align: center;  </div><div>  background: #04b3d2;  </div><div>  background: -moz-linear-gradient(top,#04b3d2,#48dfff);  </div><div>  background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));  </div><div>  -webkit-border-radius: 4px;  </div><div>  -moz-border-radius: 4px;  </div><div>  border-radius: 4px;  </div><div>  -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);  </div><div>  -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);  </div><div>  box-shadow: 0px 0px 6px rgba(0,0,0,0.7);  </div><div>  -webkit-transform-origin: 50% 120px;  </div><div>  -moz-transform-origin: 50% 120px;  </div><div>  -o-transform-origin: 50% 120px;  </div><div>  -moz-transition: -moz-transform 0.7s ease-in-out;  </div><div>  -o-transition: -o-transform 0.7s ease-in-out;  </div><div>  -webkit-animation: bounceOut 0.7s ease-in-out;  </div><div>  }  </div><div>  #article dt {  </div><div>  position: absolute;  </div><div>  bottom: 0px;  </div><div>  width: 100%;  </div><div>  height: 27px;  </div><div>  padding-top: 5px;  </div><div>  }  </div><div>  #article dd {  </div><div>  -webkit-transform: rotate(180deg);  </div><div>  -moz-transform: rotate(180deg);  </div><div>  -o-transform: rotate(180deg);  </div><div>  }  </div><div>  #article dd a {  </div><div>  display: block;  </div><div>  height: 22px;  </div><div>  padding: 3px 0px;  </div><div>  color: #324040;  </div><div>  text-decoration: none;  </div><div>  }  </div><div>  #article dd a:hover {  </div><div>  background: rgba(255,255,255,0.1);  </div><div>  }  </div><div>  #article dl:hover {  </div><div>  -webkit-transform: rotate(-180deg);  </div><div>  -moz-transform: rotate(-180deg);  </div><div>  -o-transform: rotate(-180deg);  </div><div>  -moz-transition: -moz-transform 0.5s ease-in-out;  </div><div>  -o-transition: -o-transform 0.5s ease-in-out;  </div><div>  -webkit-animation: bounceIn 0.7s ease-in-out;  </div><div>  }  </div><div>  @-webkit-keyframes bounceIn {  </div><div>  from {-webkit-transform: rotate(0deg);}  </div><div>  75%{-webkit-transform: rotate(-200deg);}  </div><div>  90%{-webkit-transform: rotate(-175deg);}  </div><div>  to {-webkit-transform: rotate(-180deg);}  </div><div>  }  </div><div>  @-webkit-keyframes bounceOut {  </div><div>  from {-webkit-transform: rotate(-360deg);}  </div><div>  0% {-webkit-transform: rotate(-180deg);}  </div><div>  10%{-webkit-transform: rotate(-160deg);}  </div><div>  to {-webkit-transform: rotate(-360deg);}  </div><div>  }  </div><div>  #article .masque {  </div><div>  position: absolute;  </div><div>  z-index: 50;  </div><div>  width: 585px;  </div><div>  height: 135px;  </div><div>  top: 0;  </div><div>  left: 0;  </div><div>  background: #fff;  </div><div>  }  </div><div>  #article .ombre {  </div><div>  position: absolute;  </div><div>  z-index: 40;  </div><div>  width: 300px;  </div><div>  height: 6px;  </div><div>  top: 133px;  </div><div>  margin-top: -103px;  </div><div>  left: 142px;  </div><div>  -webkit-box-shadow: 0px 100px 3px black;  </div><div>  -moz-box-shadow: 0px 100px 3px black;  </div><div>  box-shadow: 0px 100px 3px black;  </div><div>  -webkit-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;  </div><div>  -moz-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;  </div><div>  border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;  </div><div>  }