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.