Diese CSS Vorlage platziert ein ‘Post-It’ auf der Webseite, schräg versetzt mit 3D Schatteneffekt. Fährt man mit der Maus drüber zoomt es etwas grösser hoch und richtet sich horizontal aus.

Eingebunden wird es im HTML in einem DIV.

<div class="info-panel">
<p>Hier der Text für das Post-It.</p>
</div>

Das dazugehörige CSS besteht aus 2 Definitionen für den Normalzustand und den Hoverzustand.

.info-panel{
   width: 75%;
   margin: 0px 0px 0px 80px;
   background: #fdc300;
   padding: 10px 10px 10px 20px;
   color: #000000;
   font-weight: bold;
   font-style: italic;
   -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
   -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
   box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
   transform: rotate(-4deg);
   -webkit-transform:rotate(-4deg);
   -o-transform:rotate(-4deg);
   -moz-transform:rotate(-4deg);
   transition: -moz-transform 1.0s linear;
   -moz-transition: -moz-transform 1.0s linear;
   -o-transition: -o-transform 1.0s linear;
   -webkit-transition: -webkit-transform 1.0s linear}

.info-panel:hover{
   -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
   -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
   box-shadow:3px 3px 10px rgba(0, 0, 0, .7);
   transform:scale(1.25);
   -webkit-transform:scale(1.25);
   -moz-transform:scale(1.25);
   -o-transform:scale(1.25);
   position:relative;
   z-index:5;
   transition: -moz-transform .0.5s linear;
   -moz-transition: -moz-transform 0.5s linear;
   -o-transition: -o-transform 0.5s linear;
   -webkit-transition: -webkit-transform 0.5s linear}

width: Breite innerhalb des Content, als relative oder absolute Angabe möglich.
margin: definiert die Abstände ausserhalb des DIV, also vom Post-It zur Umgebung.
background: Farbe des Post-It.
padding: Abstände innerhalb des DIV (Rand des Post-It) zum Text.
color: Textfarbe.
font-weight: Schrift fett.
font-style: Schrift kursiv.
box-shadow: Schatten, muss für unterschiedliche Browser mehrfach definiert werden.
transform: gibt an wie das DIV gedreht werden soll.
transition: gibt an in welcher Zeit zum ‘hover’ und zurück bewegt werden soll. Je kleiner die Zahl um so schneller.