Post-Its und Notizzettel in CSS gestalten

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:

Post-It

Ein wenig Text …

mehr Text …

Link nach irgendwo

Notiz mit Pin

Ein wenig Text …

mehr Text …

Link nach irgendwo

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 Pseudoklassen :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>&Uuml;berschrift</h1>
  <p>Ein wenig Text ...</p>
</div>

Überschrift

Ein wenig Text …

Der Zettel

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 220 und die beiden Seitenabstände von je 15 Pixeln ebenso zu 250 Pixeln wie die Höhe von 200 + 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:

  background-color: #fefabc;
  background-image: linear-gradient(150deg, #efec88 0%, #fefabc 100%);

oder kurz

  background: #fefabc linear-gradient(150deg, #efec88 0%, #fefabc 100%);

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

Überschrift

Ein wenig Text …

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 🙂

  border: 1px solid #cccccc;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
  transform:rotate(4deg);

 

Überschrift

Ein wenig Text …

Schriftarten

Yay. Das ist schon nah dran, oder? Als nächstes style ich die Schriften. Dafür verwende ich Google Fonts, möglichst Handschriften; für Überschriften Gloria Halleluja und für den Text z.B. Kalam, Caveat oder Reenie Beanie:

.postit h1 {
  font-family: "Gloria Hallelujah", cursive;
  font-size: 1.5em;
  text-align:center;
  margin: 0;
  line-height:1em;
  font-weight:bold;
}

.postit p {
  font-family: 'Caveat', cursive;
  font-size:1.6em;
  margin: 12px 0;
  line-height: 1em;
  text-align: center;
}

Das Ganze sieht dann so aus:

Überschrift

Ein wenig Text …

mehr Text …

und ein Link

Klebestreifen und Eselsohr

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. 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. Als Farbe nehme ich Schwarz (RGB: 0,0,0) mit einer Deckkraft von 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%;
  border: 0;
  left: 0px;
  top: 0;
  height: 40px;
  z-index: -1;
}

Überschrift

Ein wenig Text …

mehr Text …

und ein Link

Ich find’s cool.

Die Ecke unten rechts ist eine Kombination aus einem border-radius (60px breite, 5px hohe Abrundung der unteren rechten Ecke) des Zettels einerseits …

.postit {
  [bisheriges CSS, s.o.]
  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: -1px;
  width: 100%;
  height: 140px;
  background-image: linear-gradient(173deg, rgba(0,0,0,0) 92%, rgba(0,0,0,0.4) 100%);
  transform: rotate(4deg);
  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 eingefärbt:

A: Abgerundete Zettelecke | B: :after-Element, abslolute bottom right | C: background-image: linear-gradient | D: Drehung | E: Weichzeichner

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:

Überschrift

Ein wenig Text …

mehr Text …

und ein Link

Schon fertig 🙂

Beispiele

Mehrere Post-Its, arrangiert als CSS-Flexbox, und eine Erweiterung zu Notizzetteln (auf einer Pinnwand mit farbigen Pins statt Klebestreifen) gibt es hier (Dass hier keine Grafiken, sondern nur HTML/CSS zum Einsatz kommt, kann man kaum glauben, finde ich :-)) und in meiner Hall of Fame.

Gerne herunterladen, experimentieren, weiterverwenden. Wie immer, steht das gesamte HTML und CSS in einer Datei, lediglich die Datei cork.png wird optional für den Hintergrund benötigt.

Quellen

Kann Spuren von

enthalten.

Browser-Kompatibilität

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

Firefox gradient & transform ab v.16 ohne Prefix,
filter ab v.35 ohne Prefix.
Chrome gradient ab v. 26, transform ab v.36,
filter ab v.53 ohne Prefix
Opera gradient ab v. 12.1, transform ab v.23,
filter ab v.40 ohne Prefix
Safari gradient ab v. 6.1, transform ab v.9,
filter ab v.9.1 ohne Prefix
Edge gradient & transform ab v.12,
filter ab v.13 ohne Prefix
Internet Explorer gradient ab v. 10, transform ab v.11 ohne Prefix
CSS-Filter werden nicht unterstützt.
Mobile Safari gradient ab iOS 7.1, transform ab iOS 9.2,
filter ab iOS 9.3 ohne Prefix
Android Browser Android 4.4 benötigt das -webkit-Prefix,
danach gehen gradient, transform & filter ohne Prefix

vgl. caniuse.com & shoudiprefix.com.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.