CSS: Tesa (transparent tape) look for a div
Normal rectangle div-elements or other html-containers are mostly boring. That is why I want to create a transparent tape (adhesive foil) on each corner to have a kind of fancy style. The tape look was of course inspired by the brands Tesafilm ® and Scotch tape ®.
To generate that look a wrapper html element is needed, e.g a div. Important is that the position is relative position: relative; in that container. The child elements, in my example the em needs to be absolute positioned position: absolute;.
The class tape-container is assign to a div, the additional styles are defined with an inline css style notation. The em child elements are marked with teh class tape and for each corner the additional class top-left, top-right, bottom-right or bottom-left. If you want to use less tape, just omit the corners which are not needed.
<div class="tape-container"
style="min-height: 150px; border: 2px solid; background-color: silver;">
<em class="tape top-left">Top Left</em>
<em class="tape top-right">Top Right</em>
<em class="tape bottom-right">Bottom Right</em>
<em class="tape bottom-left">Bottom Left</em>
</div>
Here is the CSS file, the output was generated from a SCSSfile, see below.
The rotation with 15° fits best for my purpose. The tape look will extend the area of the container element, so you have to handle some margin, I used 1.5rem. With the light yellow (#f3eda9) color, together with the opacity of 0.5, the tape is a bit more highlighted. The short edge border-left and border-right of the tape gets an dashed border look 2px dashed. Finally check the z-order (what is laying on each other), I picked the value 3.
div.tape-container{position:relative;margin:1.5rem}div.tape-container .tape{position:absolute;width:8rem;height:2rem;min-width:1px;min-height:1px;background-color:#f3eda9;opacity:0.5;z-index:3;text-align:center;line-height:2em;margin:auto;-webkit-box-shadow:0px 0px 5px gray;-moz-box-shadow:0px 0px 5px gray;box-shadow:0px 0px 5px gray;border-left:2px dashed rgba(0,0,0,0.2);border-right:2px dashed rgba(0,0,0,0.2)}div.tape-container .tape.top-left{top:0px;left:0px;margin-left:-1.5rem;-webkit-transform:rotate(-15deg) skew(0, 0) translate(0%, -5px);-moz-transform:rotate(-15deg) skew(0, 0) translate(0%, -5px);-ms-transform:rotate(-15deg) skew(0, 0) translate(0%, -5px);-o-transform:rotate(-15deg) skew(0, 0) translate(0%, -5px);transform:rotate(-15deg) skew(0, 0) translate(0%, -5px)}div.tape-container .tape.top-right{top:0px;right:0px;margin-right:-1.5rem;-webkit-transform:rotate(15deg) skew(0, 0) translate(0%, -5px);-moz-transform:rotate(15deg) skew(0, 0) translate(0%, -5px);-ms-transform:rotate(15deg) skew(0, 0) translate(0%, -5px);-o-transform:rotate(15deg) skew(0, 0) translate(0%, -5px);transform:rotate(15deg) skew(0, 0) translate(0%, -5px)}div.tape-container .tape.bottom-right{bottom:0px;right:0px;margin-right:-1.5rem;-webkit-transform:rotate(-195deg) skew(0, 0) translate(0%, -5px);-moz-transform:rotate(-195deg) skew(0, 0) translate(0%, -5px);-ms-transform:rotate(-195deg) skew(0, 0) translate(0%, -5px);-o-transform:rotate(-195deg) skew(0, 0) translate(0%, -5px);transform:rotate(-195deg) skew(0, 0) translate(0%, -5px)}div.tape-container .tape.bottom-left{bottom:0px;left:0px;margin-left:-1.5rem;-webkit-transform:rotate(195deg) skew(0, 0) translate(0%, -5px);-moz-transform:rotate(195deg) skew(0, 0) translate(0%, -5px);-ms-transform:rotate(195deg) skew(0, 0) translate(0%, -5px);-o-transform:rotate(195deg) skew(0, 0) translate(0%, -5px);transform:rotate(195deg) skew(0, 0) translate(0%, -5px)}
The SCSS below show the code to get the CSS. The include mixins (e.g. box-shadow and transform) are not included in the example below, but all the mixins can be found on this blog post.
If you want to customize the look, just change the variables
$tape-rotation-degrees: Rotation of the tape, relative to the container$tape-rotation-margin: Margin (top, right, left, bottom) of the containerbackground-colorandopacity: Look of the tape
div.tape-container {
$tape-rotation-degrees: 15deg;
$tape-rotation-margin: 1.5rem;
$tape-transform-postfix: skew(0, 0) translate(0%, -5px);
position: relative;
margin: $tape-rotation-margin;
.tape {
position: absolute;
width: 8rem;
height: 2rem;
min-width: 1px;
min-height: 1px;
background-color: #f3eda9; // #fff
opacity: 0.5;
z-index: 3;
text-align: center;
line-height: 2em;
margin: auto;
@include box-shadow(0px, 0px, 5px, gray);
border-left: 2px dashed rgba(0, 0, 0, 0.2);
border-right: 2px dashed rgba(0, 0, 0, 0.2);
}
.tape.top-left {
top: 0px;
left: 0px;
margin-left: -$tape-rotation-margin;
@include transform(
rotate(-1 * $tape-rotation-degrees) $tape-transform-postfix
);
}
.tape.top-right {
top: 0px;
right: 0px;
margin-right: -$tape-rotation-margin;
@include transform(
rotate($tape-rotation-degrees) $tape-transform-postfix
);
}
.tape.bottom-right {
bottom: 0px;
right: 0px;
margin-right: -$tape-rotation-margin;
@include transform(
rotate(-180 - $tape-rotation-degrees) $tape-transform-postfix
);
}
.tape.bottom-left {
bottom: 0px;
left: 0px;
margin-left: -$tape-rotation-margin;
@include transform(
rotate(180 + $tape-rotation-degrees) $tape-transform-postfix
);
}
}
TIP: Maybe make a bit of randomness to the 15° rotation and vary the width from static 8rem to 6rem to 10rem, so it looks more real.
Examples
Compare border and no-border
Set or omit the border style border: 2px solid to see the differences.
To keep the paper look, I would always use a small css-border on all for edges of the parent container element. Maybe also you need a bit of padding inside the container.
Rotate the parent container
Rotation e.g. transform: rotate(2deg), it is fine from -10° to 10° for containers with small height (think about mobile devices, when height will maybe extend). When the rotation is too big the margin will causes some issues. Take care on additional margin after and before the container! Here an example with a container rotation of 2°.
<div class="tape-container"
style="text-align: justify;
border: 1px solid gray;
transform: rotate(2deg);
margin: 2.5rem 1.5rem !important;">
<em class="tape top-left"></em>
<em class="tape top-right"></em>
<em class="tape bottom-right"></em>
<em class="tape bottom-left"></em>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
Just use tape on top corners
Omit the em elements bottom-right and bottom-left, do just have tape on the top.
<div class="tape-container"
style="min-height: 100px;
border: 2px solid;
background-color: silver;">
<em class="tape top-left"></em>
<em class="tape top-right"></em>
</div>