Source code of my CSS3 beanie. For details and demo go to http://okonet.ru

bbd4.css

/* Blue Beanie */

.with-blue-beanie .beanie {
  position: absolute;
  top: -25px;
  left: 0px;
  width: 64px;
  height: 40px;
  
  -webkit-border-top-left-radius: 40px;
  -webkit-border-top-right-radius: 40px;
  -moz-border-radius-topleft: 40px;
  -moz-border-radius-topright: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  
  background-color: rgb(106,170,242);
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.21, rgb(26,63,128)),
      color-stop(0.3, rgb(50,105,207)),
      color-stop(0.82, rgb(106,170,242))
  );
  background-image: -moz-linear-gradient(
      center bottom,
      rgb(26,63,128) 21%,
      rgb(50,105,207) 30%,
      rgb(106,170,242) 82%
  );
  
  -webkit-box-shadow: 0 0 10px #FFF inset;
  -moz-box-shadow: 0 0 10px #FFF inset;
  -o-box-shadow: 0 0 10px #FFF inset;
  box-shadow: 0 0 10px #FFF inset;
  
  -webkit-transform: rotate(-12deg) scale(0.85);
  -moz-transform: rotate(-12deg) scale(0.85);
  -o-transform: rotate(-12deg) scale(0.85);
  transform: rotate(-12deg) scale(0.85);
  
  -webkit-transform-style: preserve-3d;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: .35s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: .35s;
  -moz-transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
  -o-transition-property: -o-transform;
  -o-transition-duration: .35s;
  -o-transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
  transition-property: transform;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
}
  .with-blue-beanie .beanie i {
    position: absolute;
    left: -3px;
    bottom: -6px;
    width: 70px;
    height: 15px;
    background-color: rgb(106,170,242);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(rgb(26,63,128)),
        to(rgb(106,170,242))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(26,63,128),
        rgb(106,170,242)
    );
    border-radius: 4px;
    
    -webkit-box-shadow: 0 4px 8px #000;
    -moz-box-shadow: 0 4px 8px #000;
    -o-box-shadow: 0 4px 8px #000;
    box-shadow: 0 4px 8px #000;
  }

.with-blue-beanie:hover .beanie {
  -webkit-transform: rotate(-15deg) scale(0.85) translateY(-10px);
  -moz-transform: rotate(-15deg) scale(0.85) translateY(-10px);
  -o-transform: rotate(-15deg) scale(0.85) translateY(-10px);
  transform: rotate(-15deg) scale(0.85) translateY(-10px);
}