b.olzplatz für e.learning, me.diensachen und o.nlinekram

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 ...

... und ein Link

Notiz mit Pin

Ein wenig Text ...

... und ein Link

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

Headline

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 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:

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:

Headline

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);

 

Headline

Ein wenig Text ...

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:

Headline

Ein wenig Text ...
und ein Link

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;
}

Headline

Ein wenig Text ...
und ein Link

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);
}

Headline

Ein wenig Text ...
und ein Link

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 {
  [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: -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:

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 pixelgenaue Positionierung rechts unten (bottom, right) und die Stärke des Weichzeichner-Filters tun dann das Übrige, damit der Effekt funktioniert:

Headline

Ein wenig Text ...
und ein Link

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:

Headline

Ein wenig Text ...
und ein Link

Beispiele

Mehrere Post-Its, arrangiert als CSS-Flexbox, und eine Erweiterung zu Notizzetteln (auf einer Pinnwand mit farbigen Pins statt Klebestreifen) gibt es hier. Das genutzte Hintergrundbild (für lokale Tests) ist cork.png. Eine Umsetzung findet man außerdem in der Hall of Fame. 🙂

Gerne herunterladen, experimentieren, weiterverwenden. Das BTS-Video gibts hier:

Klicke auf den Button "Inhalt laden", um den externen Inhalt von YouTube nachzuladen. Damit stimmst Du den Datenschutzhinweisen von YouTube zu. Diese findest Du in meiner Datenschutzerklärung im Abschnitt 2.5 verlinkt.
Inhalt laden

PHA+PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL19BSDRDdHp2bTRFP3JlbD0wIiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

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.

Zustimmung zur Datenverarbeitung

Einstellungen zu Cookies

Bitte treffe eine Auswahl. Weitere Informationen zu den Auswirkungen Deiner Auswahl findest Du unter Hilfe, in der Datenschutzerklärung und im Impressum.

Treffe bitte eine Auswahl um fortzufahren.

Deine Auswahl wurde gespeichert!

Weitere Informationen

Erläuterung

Um fortfahren zu können, musst Du eine Cookie-Auswahl treffen. Bitte wähle zwischen

  • Alle Cookies zulassen:
    Alle Cookies dieser Seite ("First-Party-Cookies") sowie z.B. Tracking- und Analyse-Cookies, auch von Drittanbietern ("Third-Party-Cookies") sind zugelassen und können auf Deinem Endgerät gespeichert werden.
  • Nur absolut notwendige Cookies zulassen:
    Es werden keine Cookies gesetzt, es sei denn, es handelt sich um technisch notwendige Cookies.

Details zu Cookies und die Option, Deine Einstellungen nachträglich zu ändern gibt es in der Datenschutzerklärung. Die Anbieterkennzeichnung findest Du im Impressum

Zurück zur Auswahl