-Anzeige-
#ss#
-Anzeige-


Post it per CSS erstellen

Post it per CSS erstellen

In meinem Bestatterweblog setze ich für Kurznachrichten ein Artikelformat ein, das wie Post-it-Notizen aussieht.

Eine überarbeitete Version der Post its mit mehr Effekten wird hier beschrieben:

//dreibeinblog.de/css-post-it-ohne-bilder-mit-effekten-erstellen/

postit

Nun haben mich einige gefragt, wie ich das mache.

Hier der Code:

/*----------------------------------*/
/*	Post-it fuer Kurznotizen
/*----------------------------------*/

.post-it {
background:#fefabc; 
padding:15px; 
font-family: 'Architects Daughter';
font-size:15px; 
color: #0d20aa; 
width:500px; 

-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

Dazu habe ich mir die Schrift „Architects Daughter“ über die Google-Webfonts installiert.
Wie schräg die „Post it“_Nachrichten dargestellt werden, wird über den Code rotate(-2deg); beeinflußt. (Achtung: Häufigster Fehler ist, daß zwischen rotate und der Klammer ein Leerzeichen eingegeben wird!)
Negative Werte oder positive Werte sorgen dafür ob sich das Post-it gegen oder im Uhrzeigersinn dreht. Einfach etwas herumexperimentieren!

Im WordPress-Editor gebe ich dann meine Nachricht wie folgt ein:

postit2

Dir gefällt das? Schenke mir 1 Sekunde und unterstütze mich auf Patreon

Peter Wilhelm

Peter Wilhelm

Fachjournalist Peter Wilhelm schreibt hier über die Nebensächlichkeiten der Welt.
Er liebt Technik und testet Produkte, Service und Angebote.
Der Bestsellerautor ist Chefredakteur einer Branchenzeitschrift, Sachverständiger und Fernsehexperte.
Der Satiriker veröffentlicht seine Satiren hier und eine Kolumne hier.
Der Psychologe und Dozent wurde in der Halloweennacht geboren und lebt mit seiner Familie bei Heidelberg.
Mehr über ihn erfahren Sie u.a. hier und hier.


Alle Angaben nach bestem Wissen, keine Rechts- Steuer- oder Medizinberatung! Fragen Sie einen Fachmann!


peter wilhelm autorenlesung
-Anzeige-

Keine Kommentare

Schreibe einen Kommentar
Noch keine Kommentare Du kannst der erste sein, der einen Kommentar schreibt!

Schreibe einen Kommentar

Deine Mailadresse wird nicht weitergegeben.
Erforderliche Felder sind markiert*

Lesen Sie weiter:
Weinlaub

Weinlaub leuchtet im Herbst in wunderschönen Rottönen. Vermutlich ist das der Grund, warum man unterschiedlich...

Schließen