Start WP/CSS/BLOG 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.

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

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

    postit

    Nun haben mich einige gefragt, wie ich das mache.

    Hier der Code:


    Anzeige




    /*----------------------------------*/
    /*	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

    -Anzeige- Post it per CSS erstellen

    Mehr verwandte Artikel laden

    Schreibe einen Kommentar

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

    Lies bitte auch

    Mac OS High Sierra läuft

    Seit Montagabend ist Mac OS 10.13 verfügbar. Die neue Betriebssystemversion für Apple-Comp…