1. Worum gehts?

Selten habe ich einen so dermaßen treffenden Beitragstitel geschrieben 🙂 Hier geht es also um die reine CSS-seitige Gestaltung von Post-Its und/oder Notizzetteln, die dann z.B. so aussehen können:

2. Der Zettel

Das Ganze gibts jetzt hier zum Nachbasteln, Schritt für Schritt. Beginnen wir mit dem HTML. Das gesamte Design hängt an einer CSS-Klasse und den zwei dazugehörigen Pseudo-Elementen :before und :after. Die nennen wir der Einfachheit halber class="postit". Ob die nun einem <div> oder einem anderen Objekt zugewiesen wird, ist erst einmal egal. Wenn ich mehrere Zettelchen auf einer Seite nutze, benutze ich auch gerne Listen, wobei jedes <li> ein Post-It bildet.

<div class="postit">
  <h1>Headline</h1>
  <p>Ein wenig Text ...</p>
</div>

Das sieht ja einigermaßen unspektakulär aus. Also schnell zum Design: Als erstes wird der Zettel quadratisch, und gelb. Entsprechend dem CSS-Boxmodel addieren sich die Breite von 170 und die beiden Seitenabstände von je 15 Pixeln ebenso zu 200 Pixeln wie die Höhe von 150 + 2*25 Pixeln 🙂

.postit {
  margin:20px;
  width:170px;
  height:150px;
  padding:25px 15px;
  background:#fefabc;
}

Um das Ganze noch ein wenig hübscher zu machen, kann als Hintergrundbild ein Verlauf angelegt werden. Dieser linear-gradient benötigt eine Richtung (hier: Degree, deg), mind. eine Startfarbe samt Startpunkt (in %) sowie eine Endfarbe incl. Endpunkt. So wird ein Verlauf von links oben nach rechts unten (heller werdend) generiert. Und ja, den minimalen Farbunterschied sieht man nur, wenn man genau hinschaut. Solche Details sind es aber, die nachher den Gesamteindruck machen:

.postit {
  ... /* s.o. */
  background-color: #fefabc;
  background-image: linear-gradient(150deg, #efec88 0%, #fefabc 100%);
}

oder kurz

.postit {  
  ... /* s.o. */
  background: #fefabc linear-gradient(150deg, #efec88 0%, #fefabc 100%);
}

Das Ergebnis sieht schon ein wenig mehr nach Post-It aus:

3. Drehung und Schatten

Als nächstes kommt ein dezenter Rahmen via border, ein Schatten via box-shadow und eine leichte Drehung mittels transform:rotate(); hinzu. Die Angaben zum Rahmen geben Liniendicke, -art und -farbe an. Die Angaben zum Schatten sind der Versatz horizontal, der Versatz vertikal und die Schattenfarbe (hier incl. Transparenz via Alpha-Angabe). Und die Drehung liegt hier übrigens gerade einmal bei 4 Grad im Uhrzeigersinn 🙂

.postit {
  ... /* s.o. */
  border: 1px solid #cccccc;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
  transform:rotate(4deg);
}

4. Schriftarten

Yay. Das ist schon nah dran, oder? Als nächstes style ich die Schriften. Hier verwende ich "DP Dork Diary":

.postit h1, .postit p {
  font-family: 'DPDorkDiary', cursive;
  font-size: 1.4em;
  text-align:center;
  margin: 0.5em 0 0;
  line-height:1em;
  font-weight:bold;
}
.postit p {
  font-size:1.1em;
  margin: 0.5em 0;
}

Das Ganze sieht dann so aus:

5. Klebestreifen, Pins und Eselsohren

Und als Letztes kommen noch zwei Details ins Spiel, die man – ebenso wie den Farbverlauf im Hintergrund – für völlig übertrieben halten kann. Ich tu‘s trotzdem: Weil ich es kann 🙂 Einerseits versuche ich die Optik des Klebestreifens an der Oberkante nachzuempfinden, der ist bei "echten" Post-Its ja auch von der Vorderseite sichtbar. (Notizzettel können dagegen einen Pin / eine Reißzwecke bekommen.) Das geschieht mit Hilfe des Pseudoelements :before. Andererseits soll das Post-It eine aufgerollte Ecke (ein Eselsohr?) incl. Schatten – mit Hilfe des Pseudoelements :after – bekommen.

Der Klebestreifen ist einfach nur eine Farbfläche, welche mit Hilfe des z-index zwischen dem gelben Farbverlauf und dem Text angeordnet wird. Farbe: Schwarz (RGB: 0,0,0), Deckkraft: 2,5% (0.025), um den Bereich des Post-Its ein wenig abzudunkeln, als ob der Zettel unterhalb ein wenig geknickt wäre und hier mehr Licht auftrifft (der untere Teil des Zettels also heller erscheint). Die Fläche soll so breit sein wie das .postit-Element (width:100%), allerdings nur eine height:40px; haben. Es wird absolut positioniert und an der oberen linken Ecke ausgerichtet (position:absolute;, top:0;, left:0;).

.postit::before {
  content: "";
  background-color: rgba(0,0,0,0.025);
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0;
  height: 40px;
  z-index: -1;
}

Ich find’s hübsch. 🙂

Notizzettel bekommen mit dem :before-Pseudo-Element keinen Klebestreifen, sondern einen Reißzwecken-Kopf. Der besteht aus einem 24px * 24px großen Kreis (border-radius: 50%;) mit Farbverfauf und Schatten:

.notes::before {
  background: #ff8c00 radial-gradient(at 8px 8px, rgba(255,255,255,0), rgba(0,0,0,0.5));
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: calc(50% - 12px);
  box-shadow: 4px 4px 3px rgba(0,0,0,0.5);
}

Die Ecke unten rechts ist sowohl bei Post-Its als auch bei Notizzetteln eine Kombination aus einem border-radius (60px breite und 5px hohe Abrundung der unteren rechten Ecke) des Zettels einerseits …

.postit {
  ...
  border-bottom-right-radius:60px 5px;
} 

… und einem Farbverlauf im :after-Pseudoelement andererseits. Das ebenfalls via z-index im stacking context positionierte :after-Element ist wie das :before-Element absolut positioniert, 100% breit, diesmal aber 140px hoch. Gefüllt wird es mit einem Farbverlauf im Winkel von 173 Grad, welcher auf den letzten 8% (Startpunkt 92%, Endpunkt 100%) von transparent (Startfarbe: Schwarz mit Deckkraft = 0: rgba(0,0,0,0)) nach Schwarz mit einer Deckkraft von 40% (rgba(0,0,0,0.4)) verläuft. Das ganze Element wird um 4 Grad gedreht (transform:rotate(4deg);) und um 2px weichgezeichnet (filter:blur(2px);):

.postit::after {
  content:"";
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 100%;
  height: 140px;
  background-image: linear-gradient(173deg, rgba(0,0,0,0) 92%,
  rgba(0,0,0,0.4) 100%);
  transform: rotate(6deg);
  z-index: -1;
  filter: blur(2px);
}

Das klingt fummelig, ist es auch. Vielleicht hilft diese Abbildung, das Vorgehen zu verdeutlichen (zum Vergrößern klicken). Das :after-Element habe ich mal rot eingefärbt:

Die angegebenen Werte funktionieren in dieser Kombination ganz gut. Wenn sie feinjustiert werden, sollte beachtet werden, dass

• die Höhe des :after-Elements die Start- und Endpunkte des Verlaufs beeinflusst, und
• die Richtung des Verlaufs in Verbindung mit der Drehung des :after-Elements zur Rundung der Zettelecke passen muss.

Die pixelgenaue Positionierung rechts unten (bottom, right) und die Stärke des Weichzeichner-Filters tun dann das Übrige, damit der Effekt funktioniert:

Schon fertig 🙂

Ach nee, doch nicht. Um das ganze noch ein wenig dynamischer zu machen, könnte dem .postit:hover noch ein "Zoom" (transform:scale(1.2);) mitgegeben werden. Dadurch, dass die :hover-Klasse kein rotate-Attribut hat, dreht sich das Post-It beim Mouse-Over in die Standard- sprich: 'gerade' – Position:

Gerne herunterladen, experimentieren, weiterverwenden.

Browser-Kompatibilität

Kritisch könnten hier CSS3-Funktionen sein: Verläufe, 2D Transformationen und Filter-Effekte: Vgl. caniuse.com & shoudiprefix.com.