Grains Of Sand | Web Design, CSS Demos & HTML5 Templates by tupence

Sticky Tape - Step By Step Guide

What We're Aiming For

You can add a sticky tape effect to a element using :before and/or :after
Note: This does not work in IE8 or lower.

Step One
First create and style the box and the text

Code

HTML
  • <div id="tape"><!--in this case the element requiring sticky tape is enclosed in a <div> but you could also use other selectors like <section> <head> <footer> <aside> <article> etc, you also use this method on images by adding the id to the <img> tag (eg. <img id="tape" src="myimage.jpg" width="200" height="200" alt="some text">) -->
  • <p>You can add a sticky tape effect to a element using <code>:before</code> and/or <code>:after</code><br>
    Note: This does not work in IE8 or lower.</p>
  • </div>
CSS
  • #tape{
  • position: relative; /*lets us later position the tape relative to the box*/
  • width:200px;
  • margin:20px; /*you need enough margin to accomodate the tape*/
  • background:#832436;
  • padding:30px;
  • /*add a small drop shadow to the box*/
  • -webkit-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
  • -moz-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
  • box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
  • }
  • #tape p{
  • color:#fff;
  • }

Result

You can add a sticky tape effect to a element using :before and/or :after
Note: This does not work in IE8 or lower.


Step Two
The basic styling of the tape strips

Code

CSS
  • #tape:before, #tape:after{
  • content: ''; /*create a blank psuedo element, if you wanted something written on the tape, place it between the ' '*/
  • display: block;
  • position: absolute; /*positions the tape relative to the box created above rather than the whole page*/
  • background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us make the tape a little transparent*/
  • height: 25px; /*height of the tape*/
  • }

Result

You can add a sticky tape effect to a element using :before and/or :after
Note: This does not work in IE8 or lower.


Step Three
Position the sticky tape strips - first the left strip

Code

CSS
  • #tape:before { /*using :before places the tape on the left of the box*/
  • left:-5px; /*position from the left edge of the #tape div - a negative value moves the tape 5px to the left of the box's edge*/
  • top: -15px; /*position from the top edge of the #tape div - a negative value moves the tape 15px above of the box's edge*/
  • width: 45px; /*width of the tape*/
  • /*rotate the tape 12 degrees anti-clockwise*/
  • -webkit-transform: rotate(-12deg);
  • -moz-transform: rotate(-12deg);
  • -o-transform: rotate(-12deg);
  • -ms-transform: rotate(-12deg);
  • }

Result

You can add a sticky tape effect to a element using :before and/or :after
Note: This does not work in IE8 or lower.


Step Four
Now position the right strip of tape

Code

CSS
  • #tape:after { /*using :after places the tape on the right of the box*/
  • left:198px; /*position from the left edge of the #tape div*/
  • top: -10px; /*position from the top edge of the #tape div - a negative value moves the tape 10px above of the box's edge*/
  • width: 70px; /*width of the tape*/
  • /*rotate the tape 20 degrees clockwise*/
  • -webkit-transform: rotate(-20deg);
  • -moz-transform: rotate(-20deg);
  • -o-transform: rotate(-20deg);
  • -ms-transform: rotate(-20deg);
  • }

Result

You can add a sticky tape effect to a element using :before and/or :after
Note: This does not work in IE8 or lower.

Back to the demo More CSS3 Demos This Way