-Anzeige-
#ss#
-Anzeige-


CSS: Tesa-Film Streifen erstellen

CSS: Tesa-Film Streifen erstellen

Mit reinem CSS, ohne die Notwendigkeit für Grafiken, läßt sich auch ein Tesafilmstreifen, z.B. für unsere Post-it-Zettel erstellen.
Das sieht dann so aus:

css-drase

Auf dem Titelbild dieses Beitrags habe ich das Ergebnis mit etwas zu starkem Kontrast dargestellt, damit man deutlicher sieht, um was es geht.

Der Tesa-Streifen wird so erzeugt:

.tape {
 	    position:absolute;
 	    top:-15px; right:80px;
 	    width: 130px;
 	    height: 35px;
 	    background-color:#fff;
 	    opacity:0.7;
 	    border-left: 1px dashed rgba(0, 0, 0, 0.1);
 	    border-right: 1px dashed rgba(0, 0, 0, 0.1);
 	    -webkit-box-shadow: 0px 0px 1px 0px #cccccc;
 	    -moz-box-shadow: 0px 0px 1px 0px #cccccc;
 	    box-shadow: 0px 0px 1px 0px #cccccc;
 	    -webkit-transform: rotate(6deg) skew(0,0) translate(0%,-5px);
 	    -moz-transform: rotate(6deg) skew(0,0) translate(0%,-5px);
 	    -o-transform: rotate(6deg) skew(0,0) translate(0%,-5px);
 	    transform: rotate(6deg) skew(0,0) translate(0%,-5px);
            z-index: 3; /****** Erklaerung z-index siehe unten ******/
}

Bei der Darstellung des gelben Zettels ist noch folgendes zu berücksichtigen: Da die beiden Elemente Pin und Tape über dem Background „Yellow“ liegen sollen, ist es erforderlich mit der Anweisung:

     z-index: WERT;

dafür zu sorgen, daß die Elemente vor dem gelben Zettel und nicht dahinter auftauchen.

Jedes Element bekommt einen Z-Index und zwar:

  • 1 Background
  • 2 Pin
  • 3 Tape

Aufgerufen wird das Ganze so:

<div class="tape"></div>

Mit der CSS-Anweisung:

rotate (6deg)...

wird die Rotation, also wie schräg das Tape aufklebt ist, eingestellt.
Da kann man gerne noch etwas spielen.

Wie durchsichtig der Tesa-Film-Streifen ist, wird mit dieser Zeile in obigem Beispiel eingestellt:

 	    opacity:0.7;

0.1 ist ziemlich undurchsichtig, 0.9 fast durchsichtig.

Wie man Lange und Breite des Streifens einstellt, muß ich wohl nicht erklären, das ergibt sich aus dem Code oben.

Wenn’s genützt hat, einfach mal einen Kommentar hinterlassen.

CSS: Tesa-Film Streifen erstellenCSS: Tesa-Film Streifen erstellen

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 15 September, 2015, 09:22

    Ich würde ja den tesa-effekt gerne mit einem Bild verbinden, so dass es es wirkt, als wäre das Bild festgeklebt. Hat das schon jemand geschafft?

    Antwort auf diesen Kommentar
    • Peter Wilhelm
      Peter Wilhelm Autor 15 September, 2015, 11:12

      Aber klar geht das.
      Du hast in meinem Beitrag alle Werkzeuge dazu.
      Für die Postits hast Du den Container und das Tape bereits definiert.
      Setze in den Code statt des yellow-Elements und des Pins einfach nur das img ein:

      <div class="quote-container">
        <div class="tape"></div>
      <img src="http://deineurl.de/bild.jpg"/>
      </div>

      Das klebt Dir den Tesastreifen schon mal aufs Bild.
      Wichtig: Nicht nur .tape aufrufen, sondern das Ganze in den quote-container packen.
      Wenn das Ergebnis Deinen Wünschen noch nicht entspricht, dann kannst Du Dir ja ein neues .tapeimg schreiben, mit etwas anderen Werten, was Positionierung und Drehung anbetrifft.

      Antwort auf diesen Kommentar
      • riepichiep
        riepichiep 15 September, 2015, 18:30

        @Peter Wilhelm: Stimmt, hat funktioniert. Allerdings passte es nicht so gut zusammen, wie ursprünglich gehofft. Deswegen lasse ich den Effekt erstmal „außen vor“ ….

        Trotzdem danke, ich komme sicher darauf zurück!

        Antwort auf diesen Kommentar
        • Peter Wilhelm
          Peter Wilhelm Autor 15 September, 2015, 20:00

          @riepichiep: Du kannst ja auch noch mit der Größe, der Durchsichtigkeit und der Farbe des Randes spielen. Man bekommt auch schmalere und schrägere Tesastreifen hin.
          Aber Du hast Recht, es muß auch passen.

          Mir hatte noch jemand einen Tip für umgeknickte Ecken beim Postit gegeben, das sei z.B. in meinen Augen nicht gut aus.

          Antwort auf diesen Kommentar
  2. Martin
    Martin 15 September, 2015, 20:02

    Toller tip den ich gut umsetzen konnte. Einfach zu befolgen. Vielen Dank.

    Antwort auf diesen Kommentar

Schreibe einen Kommentar

Deine Mailadresse wird nicht weitergegeben.
Erforderliche Felder sind markiert*

Lesen Sie weiter:
20 Prozent auf alles

Was will uns die Praktiker-Baumarktkette damit eigentlich sagen? Welche Wirkung soll es haben, wenn die...

Schließen