Um den ordentlich unordentlichen Eindruck einer Zettelsammlung zu generieren, sind die Post-Its mal mehr, mal weniger gedreht und mit dem CSS-Flexbox Grid angeordnet. Der Farbverlauf funktioniert unabhängig von der Hintergrundfarbe. Alle Post-Its haben einen abgedunkelten Klebestreifen und ein "Eselsohr", welches natürlich auch den obligatorischen Schatten wirft. Bei Mausberührung wird (via :hover) der Zettel gedreht und gezoomt, wahlweise das Icon aus- und ein Text eingeblendet. Die Zettel können natürlich als Links fungieren.
Das ganze Tutorial gibts auf http://bemeo.de/CSSPostIt, ein Einsatzszenario ist z.B. hier zu sehen. Weitere Möglichkeiten könnten ein Social Media Menu, Linksammlungen, Projektlisten, evtl. Portfolio-Übersichten sein.
Back to Top