DIREKTKONTAKT

WP/CSS/BLOG

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

WordPress – CSS – Blog

Alles zum Thema Bloggen, Blogtechnik und -programmierung.

Lesezeit ca.: 1 Minute | Tippfehler melden | © Revision: 10. September 2015 | Peter Wilhelm 10. September 2015

Lesen Sie bitte auch:


Abonnieren
Benachrichtige mich zu:
guest
0 Kommentare
Inline Feedbacks
View all comments



Rechtliches


0
Would love your thoughts, please comment.x
Skip to content