Head Buoy skin by AO3 

Please DO copy and reuse and modify this code any way you like!
# Pure CSS3 skin, slides the header up out of sight 
and slides down on hover 
Webkit (like Chrome or Safari) or Gecko (like Firefox) 
browsers only right now, but have added in all the alts 
for the future
Role:
Media:
screen
Condition:
Normal

CSS

#header {
  margin-top: -7.75em;
  -moz-transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

#greeting {
  -moz-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -o-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
  -moz-transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

#header:hover,
#header *:active,
#header *:focus,
#header:hover #greeting,
#header:active #greeting {
  margin-top: 0;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#header:hover #greeting,
#header:active #greeting {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}