{"id":11544,"date":"2015-09-13T13:26:39","date_gmt":"2015-09-13T11:26:39","guid":{"rendered":"http:\/\/dreibeinblog.de\/?p=11544"},"modified":"2015-09-13T23:21:30","modified_gmt":"2015-09-13T21:21:30","slug":"css-tesa-film-streifen-erstellen","status":"publish","type":"post","link":"https:\/\/dreibeinblog.de\/css-tesa-film-streifen-erstellen\/","title":{"rendered":"CSS: Tesa-Film Streifen erstellen"},"content":{"rendered":"<p class=\"opener\">Mit reinem CSS, ohne die Notwendigkeit f\u00fcr Grafiken, l\u00e4\u00dft sich auch ein Tesafilmstreifen, <a href=\"\/\/dreibeinblog.de\/css-post-it-ohne-bilder-mit-effekten-erstellen\/\">z.B. f\u00fcr unsere Post-it-Zettel erstellen.<\/a><br \/>\nDas sieht dann so aus:<\/p>\n<p><img decoding=\"async\" src=\"\/\/dreibeinblog.de\/wp-content\/uploads\/css-drase.jpg\" alt=\"css-drase\" width=\"383\" height=\"255\" class=\"alignnone size-full wp-image-11545\" \/><\/p>\n<p>Auf dem Titelbild dieses Beitrags habe ich das Ergebnis mit etwas zu starkem Kontrast dargestellt, damit man deutlicher sieht, um was es geht.<\/p>\n<p>Der Tesa-Streifen wird so erzeugt:<\/p>\n<pre lang=\"css\">\r\n.tape {\r\n \t    position:absolute;\r\n \t    top:-15px; right:80px;\r\n \t    width: 130px;\r\n \t    height: 35px;\r\n \t    background-color:#fff;\r\n \t    opacity:0.7;\r\n \t    border-left: 1px dashed rgba(0, 0, 0, 0.1);\r\n \t    border-right: 1px dashed rgba(0, 0, 0, 0.1);\r\n \t    -webkit-box-shadow: 0px 0px 1px 0px #cccccc;\r\n \t    -moz-box-shadow: 0px 0px 1px 0px #cccccc;\r\n \t    box-shadow: 0px 0px 1px 0px #cccccc;\r\n \t    -webkit-transform: rotate(6deg) skew(0,0) translate(0%,-5px);\r\n \t    -moz-transform: rotate(6deg) skew(0,0) translate(0%,-5px);\r\n \t    -o-transform: rotate(6deg) skew(0,0) translate(0%,-5px);\r\n \t    transform: rotate(6deg) skew(0,0) translate(0%,-5px);\r\n            z-index: 3; \/****** Erklaerung z-index siehe unten ******\/\r\n}\r\n<\/pre>\n<p>Bei der Darstellung des gelben Zettels ist noch folgendes zu ber\u00fccksichtigen: Da die beiden Elemente Pin und Tape \u00fcber dem Background &#8222;Yellow&#8220; liegen sollen, ist es erforderlich mit der Anweisung:<\/p>\n<pre lang=\"css\">\r\n     z-index: WERT; \r\n<\/pre>\n<p>daf\u00fcr zu sorgen, da\u00df die Elemente vor dem gelben Zettel und nicht dahinter auftauchen.<\/p>\n<p>Jedes Element bekommt einen Z-Index und zwar:<\/p>\n<ul>\n<li>1 Background<\/li>\n<li>2 Pin<\/li>\n<li>3 Tape<\/li>\n<\/ul>\n<p>Aufgerufen wird das Ganze so:<\/p>\n<pre lang=\"html\">\r\n<div class=\"tape\"><\/div>\r\n<\/pre>\n<p>Mit der CSS-Anweisung:<\/p>\n<pre lang=\"css\">\r\nrotate (6deg)...\r\n<\/pre>\n<p>wird die Rotation, also wie schr\u00e4g das Tape aufklebt ist, eingestellt.<br \/>\nDa kann man gerne noch etwas spielen.<\/p>\n<p>Wie durchsichtig der Tesa-Film-Streifen ist, wird mit dieser Zeile in obigem Beispiel eingestellt:<\/p>\n<pre lang=\"css\">\r\n \t    opacity:0.7;\r\n<\/pre>\n<p>0.1 ist ziemlich undurchsichtig, 0.9 fast durchsichtig.<\/p>\n<p>Wie man Lange und Breite des Streifens einstellt, mu\u00df ich wohl nicht erkl\u00e4ren, das ergibt sich aus dem Code oben.<\/p>\n<p>Wenn&#8217;s gen\u00fctzt hat, einfach mal einen Kommentar hinterlassen.<\/p>\n<div class=\"image-sources\"><strong>Bildquellen:<\/strong><ul><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Mit reinem CSS, ohne die Notwendigkeit f\u00fcr Grafiken, l\u00e4\u00dft sich auch ein Tesafilmstreifen, z.B. f\u00fcr unsere Post-it-Zettel erstellen. Das sieht dann so aus: Auf dem Titelbild dieses Beitrags habe ich<\/p>\n<div class=\"bd-more-btn\"><a href=\"https:\/\/dreibeinblog.de\/css-tesa-film-streifen-erstellen\/\" class=\"readmore\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/weiterlesen.webp\" alt=\"weiterlesen\" width=\"185\" height=\"103\" class=\"readmore\" \/><\/a><\/div>\n","protected":false},"author":1,"featured_media":11546,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"wp-worthy-pixel":{"ignored":false,"public":"b3d0cf6bc9cb4affbc31d20770e79cb2","server":"vg09.met.vgwort.de","url":"https:\/\/vg09.met.vgwort.de\/na\/b3d0cf6bc9cb4affbc31d20770e79cb2"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/posts\/11544"}],"collection":[{"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/comments?post=11544"}],"version-history":[{"count":0,"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/posts\/11544\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/media\/11546"}],"wp:attachment":[{"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/media?parent=11544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/categories?post=11544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dreibeinblog.de\/wp-json\/wp\/v2\/tags?post=11544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}