-Anzeige-
#ss#
-Anzeige-


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


Nun haben mich einige gefragt, wie ich das mache.

Hier der Code:

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. }

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:

  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>

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-
  1. riepichiep
    riepichiep 11 September, 2015, 18:54

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

    Antwort auf diesen Kommentar
  2. riepichiep
    riepichiep 11 September, 2015, 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 auf diesen Kommentar

Schreibe einen Kommentar

Deine Mailadresse wird nicht weitergegeben.
Erforderliche Felder sind markiert*

Lesen Sie weiter:
Sicherheitslücke in WhatsApp – Du kannst jeden überwachen

Große Sicherheitslücke in WhatsApp durch Online-Status Die Anwender des Messengerdienstes WhatsApp könnten mit einem ganz...

Schließen