Start WP/CSS/BLOG CSS: Post it ohne Bilder mit Effekten erstellen
  • CSS: Post it ohne Bilder mit Effekten erstellen

    In meinem Bestatterweblog setze ich für Kurznachrichten ein Artikelformat ein, das wie Post-it-Notizen aussieht.
    In diesem Artikel habe ich schon einmal beschrieben, wie ich das mache.Inzwischen habe ich den Code noch einmal überarbeitet und weitere Effekte hinzugefügt.

    Im Unterschied zum bisherigen Post-it gibt es nun einen gradienten Verlauf im Hintergrundgelb und eine Stecknadel zur „Befestigung“ des Post-it.

    post it

    [white_box] Nun haben mich einige gefragt, wie ich das mache.

    Hier der Code:


    Anzeige




    CSS: Post it ohne Bilder mit Effekten erstellenCSS: Post it ohne Bilder mit Effekten erstellen
    1. /*===================================*/
    2. /*       POST IT MIT NADEL           */
    3. /*===================================*/
    4.  
    5. /* Zuerst der Container der Post it und Nadel umschliesst */
    6.  
    7. .quote-container {
    8.   margin-top: 50px;
    9.   position: relative;
    10. }
    11.  
    12. /* Die eigentliche Textnachricht */
    13. .note {
    14. color: #0d20aa; 
    15.   position: relative;
    16.   width: 500px;
    17.   margin: 0 auto;
    18.   padding: 20px;
    19. font-family: 'Architects Daughter';
    20.   font-size: 15px;
    21.   box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
    22. }
    23.  
    24. /* Wahlweise kann noch ein Autor mit angegeben werden */
    25.  
    26. .note .author {
    27.   display: block;
    28.   margin: 40px 0 0 0;
    29.   text-align: right;
    30. }
    31.  
    32. /* Die eigentliche gelbe Box */
    33.  
    34. .yellow {
    35. /* Der Hintergrund */
    36.     background: #fefabc; /* Old browsers */
    37.     background: -moz-linear-gradient(top, #fefabc 0%, #f9f593 100%); /* FF3.6+ */
    38.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefabc), color-stop(100%,#f9f593)); /* Chrome,Safari4+ */
    39.     background: -webkit-linear-gradient(top, #fefabc 0%,#f9f593 100%); /* Chrome10+,Safari5.1+ */
    40.     background: -o-linear-gradient(top, #fefabc 0%,#f9f593 100%); /* Opera11.10+ */
    41.     background: -ms-linear-gradient(top, #fefabc 0%,#f9f593 100%); /* IE10+ */
    42.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefabc', endColorstr='#f9f593',GradientType=0 ); /* IE6-9 */
    43.     background: linear-gradient(top, #fefabc 0%,#f9f593 100%); /* W3C; A catch-all for everything else */
    44. /* Hintergrund Ende */
    45.  
    46. /* Wer einen durchgehend gefaerbten Hintergrund will kommentiert das obige aus und aktiviert die folgende Zeile */
    47. /* background:#fefabc;  fefdca zu f7f381*/
    48.  
    49. /* Die Drehung des Post it */
    50.  
    51.   -webkit-transform: rotate(-2deg);
    52.   -moz-transform: rotate(-2deg);
    53.   -o-transform: rotate(-2deg);
    54.   -ms-transform: rotate(-2deg);
    55.   transform: rotate(-2deg);
    56. }
    57.  
    58. /* Die Stecknadel */
    59. .pin {
    60.   background-color: #aaa;
    61.   display: block;
    62.   height: 32px;
    63.   width: 2px;
    64.   position: absolute;
    65.   left: 50%;
    66.   top: -16px;
    67.   z-index: 1;
    68. }
    69.  
    70. .pin:after {
    71.   background-color: #A31;
    72.   background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
    73.   border-radius: 50%;
    74.   box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
    75.               inset 3px 3px 3px hsla(0,0%,100%,.2),
    76.               inset -3px -3px 3px hsla(0,0%,0%,.2),
    77.               23px 20px 3px hsla(0,0%,0%,.15);
    78.   content: '';
    79.   height: 12px;
    80.   left: -5px;
    81.   position: absolute;
    82.   top: -10px;
    83.   width: 12px;
    84. }
    85.  
    86. .pin:before {
    87.   background-color: hsla(0,0%,0%,0.1);
    88.   box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
    89.   content: '';
    90.  
    91.   height: 24px;
    92.   width: 2px;
    93.   left: 0;
    94.   position: absolute;
    95.   top: 8px;
    96.  
    97.   transform: rotate(57.5deg);
    98.   -moz-transform: rotate(57.5deg);
    99.   -webkit-transform: rotate(57.5deg);
    100.   -o-transform: rotate(57.5deg);
    101.   -ms-transform: rotate(57.5deg);
    102.  
    103.   transform-origin: 50% 100%;
    104.   -moz-transform-origin: 50% 100%;
    105.   -webkit-transform-origin: 50% 100%;
    106.   -ms-transform-origin: 50% 100%;
    107.   -o-transform-origin: 50% 100%;
    108. }
    [/white_box]

    Damit das Ganze funktioniert, habe ich mir die Schriftart „Architects daughter“ aus den Google-Fonts 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:

    [white_box]
    1. <div class="quote-container">
      
    2.   <i class="pin"></i>
      
    3.   <div class="note yellow">
      
    4.  
    5. HIER KOMMT DER TEXT, DER ANGEZEIGT WERDEN SOLL HIN.
      
    6.   </div>
      
    7. </div>
    [/white_box]

    -Anzeige- CSS: Post it ohne Bilder mit Effekten erstellen

    Mehr verwandte Artikel laden

    3 Kommentare

    1. riepichiep

      11. September 2015 at 18:54

      Sieht gut aus. Ich glaub, ich werde es mir in einer ruhigen Stunde intensiver angucken und dann ggfs. Teile übernehmen …

      Antwort

    2. riepichiep

      11. September 2015 at 19:14

      Ich habe nun Teile kopiert – den Schatten und die Drehung. Vorher waren es einfach gelbe Kästen mit Umrandung, die neue Version gefällt mir besser:
      Beispiel 1
      Beispiel 2

      Von daher vielen Dank für den coolen Tipp!

      Antwort

    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…