PostIt – mit HTML5 und CSS3

Durch ein Video-Tutorial habe ich gesehen wie man mit reinem HTML und CSS in modernen Browsern ein PostIt bzw. einen angeklebten Zettel  designen kann.

Ich habe dann den Quellcode nachgeschrieben und auf meine Bedürfnisse angepasst. Der HTML-Code ist recht einfach.

Wie ihr seht wird das PostIt durch einen DIV-Tag präsentiert in dem 2 Absätze vorhanden sind.

In der CSS-Datei wird als erstes der Div-Container formatiert. Interessant an der Formatierung ist die Gestaltung der Grundlinien. Über einen Verlauf, der sich alle 40 Pixel wiederholt erreiche ich ein Linienmuster.

Weiterhin habe ich die Ecken asymmetrisch abgerundet, so dass der Eindruck des Biegens entsteht.

Zum Schluss bekam der DIV-Container noch einen Drop-Shadow. Dadurch wirkt das Ganze etwas plastischer.

Um dann die Absätze den Hintergrund-Linien anzupassen, habe ich den Zeilenabstand und die Schriftgröße verändert. Auch habe ich die Grundeinstellungen für margin und padding angepasst.

Zum Schluss noch der Klebestreifen am oberen Rand des Zettels. Dieser wird mit der Pseudo-Klasse :before und einem Leerzeichen realisiert. Durch die absolute Positionierung und einer kleinen Rotation wirkt das Ganze doch recht realistisch. Hinzu kommt dass die Farbe der Streifens durch einen Transparenzwert und einen leichten, radialen Verlauf diese Wirkung unterstützt.

Ein kleiner Wermutstropfen bleibt trotz des beeindruckenden Ergebnis übrig, leider funktioniert dieses Beispiel nur in Standardkonformen Browsern, also nicht wirklich im IE8.

Natürlich habe ich diese kleine Demo auch online gelegt und ihr bekommt noch den Download dazu.

Schreib einen Kommentar

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