10

Update 3

I updated the code (http://codepen.io/anon/pen/VYRJLp) and now the edges look really like torn paper effect. It uses SVG by the way.

The only problem is I don't know how to make the image as the background of the svg AT THE SAME TIME maintain the torn-paper-like edges.

Please have a look it. Any efforts are appreciated.


Update 2

It seems that it is impossible to achieve this effect without the help of PhotoShop(PS), so I would like to add PS as a part of solution.

I am not a PS expert, but from a quick thought, I think there are a few steps I need to do:

  • Use PS to create a torn paper "shell", let's say it's shell.png It should only have color on its edges and the color should be white; the inner area is transparent, so that we can place the picture in it.
  • Place shell.png on top of the picture, let's say banner.jpg, which means set the z-index of the div which uses shell as its background image to 1.
  • Use another div to contain the banner.jpg and set the z-index below the shell div.

Questions for this approach:

  • Is it responsive?

  • If not, is it possible to make it responsive? As I have to make it work properly on mobile devices.


I remember that I saw a beautifully designed website, there is a picture in the background and the edges of this picture look like torn paper effect which is fantastic!

I searched the similar questions here but it turns out that the effects in the answers are primitive, which are very simple rugged black lines.

What I want:

  1. I want this picture to be as wide as the device screen which means responsive.
  2. The edges of this picture look like torn paper.
  3. I will place this picture as a banner after the Top Navigation bar but before the content.

It should look like the white area in this picture. But in my case, I will need to fill in my picture to replace the white area.

enter image description here

Here is my code: Notice: in this code, the css uses an image as the edge, BUT that is not want I want. I just want the edges to be pure CSS effects.(Is this possible?) So it will look like this one(the one on the right side, you can see that there is no white rugged edges) enter image description here

<div class="row">
    <div id="letter" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

    </div>
</div>

#letter { /*torn paper border*/
    height:450px;
    position:relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image:url('img/background.jpg');
    background-size:cover;
    opacity:0.8;
    border-style: solid; 
    border-width: 40px 40px 40px; 
       -moz-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
    -webkit-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
         -o-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
            border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat;
}

Update

I think I found something quite similar to what I am imagine. Here is the effect I want: enter image description here

10
  • 1
    maybe this pen can help codepen.io/chipChocolate/pen/yyaGWx
    – web-tiki
    Mar 30, 2015 at 15:23
  • hi @web-tiki thank you for your help, but it looks more like erosion rather the edges of torn paper.
    – Franva
    Mar 30, 2015 at 23:36
  • hi @web-tiki I looked at the effect again and found that it is really close to the effect I want. Only one thing ruins the whole effect which is all torn edges end very clearly at a line. So if somehow we could remove that line, then it will look really like a torn paper effect. Do you have any ideas about it?
    – Franva
    Mar 31, 2015 at 0:42
  • hi @web-tiki I use the pen you provided and tweaked and now it looks really similar to the torn paper. Please have a look the Update 3. Thanks
    – Franva
    Mar 31, 2015 at 6:49
  • 3

4 Answers 4

20

I was able to do this with CSS using border image slicing.

Here's the code:

body {
    background-image: url("https://i.postimg.cc/jdRfmPxv/1-2-OKX1nhs-Z3-CB2-Cid-Edh-Jw.png");
}
.border {
  border-width: 20px 0 20px 0;
  border-style:solid;
  border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  -webkit-border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  -moz-border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  border-image-slice: 50 0 50 0 fill;
  border-image-width: 20 0 20 0;
  width: 100%;
  height: 60px;
}
.p {
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<div class="border" style="text-align:center;">
  <br />
  <span class="p">Coming soon...</span>
  <br />
  <br />
</div>

This gives me a height re-sizing div that always has the torn paper effect along the top and bottom. It's great for full width, but I wasn't able to figure out a decent way of doing the side edges at the same time as the top and bottom (easy to do the side edges if the top and bottom edges are straight).

I made the image in Photoshop - it's basically yellow in the middle, then torn and then transparent on the outer.

If you're not familiar with image slicing, the four numbers basically define (in order): the height in pixels of the top of the image that you want to use as the top border strip, the width in pixels for the right strip, then the bottom strip, then the left strip. The fill tells it to take the center part (which is discarded by default) and use it to fill the div between the borders.

Depending on your preferences you can have the border repeat (and get cut off at the end), round (repeat to the nearest number of full repetitions, which either compresses or stretches depending on which number it is nearer to) or stretch (stretches... although that distorts the image for this example).

It took some fiddling for me to get it to work correctly but I'm chuffed with the results. I couldn't find anyone with the same answer so thought I'd post it.

UPDATE

This feature IS supported in IE11 provided border-style:solid is specified. I use media queries to provide an alternative (shadows etc.) for IE10 and below where border-image is not supported (example on my website).

UPDATE 04/2020

It's now 2020 and it's been a few years since my original answer (I've learned a lot in 5 years). I recently did this on another project for wooden watches and stuff using a simpler method. I find the div I want to apply the border to and use either :before or :after to add the border as below. Again, the image I made in Photoshop but this time it's white > torn edge > transparent rather than coloured.

To add to the bottom:

.targetdivclass:after{
     content:" ";
     display:block;
     height: 45px;
     background-image:url('https://ecorelos.com/wp-content/uploads/2020/04/torn-border2.png');
     position:absolute;
     bottom:-15px;
    width:300%;
left:-500px;    
}

To add to the top (note that you need a flipped version of the image unless you want to transform/rotate it in CSS as well):

    .targetdivclass:before{
        content:" ";
     display:block;
     width:300%;
     height: 65px;
     background-image:url('https://ecorelos.com/wp-content/uploads/2020/04/torn-border2upside.png');
     position:absolute;
     margin-top:-80px;
     left:-500px;
       z-index:1;
}

Adjust the height, bottom, width and left to suit the image and the website. Note that if you apply this to the footer you can cause issues having a width greater than 100%, in which case you need to keep the left at zero.

This is responsive, but you can use media queries to specify different sizes and margins for mobile if necessary.

The result is the same effect that was originally requested:

enter image description here

4
  • That's correct - I'm using it as a 'coming soon' website and that's the text I put. The images aren't hosted online yet so they're not showing, I'll put them online later so you can see (I can't at the moment). I didn't know about the 'run code snippet' feature when I posted the code, sorry!
    – Lyall
    Jul 14, 2015 at 10:41
  • Images added so the snippet works now :) but not in IE still
    – Lyall
    Jul 14, 2015 at 11:07
  • 2
    I notice the effect I have is the opposite to what you wanted - I have the photo being torn to reveal the background, and you want the photo to have torn edges on top of the background. This is fairly easy to reverse by swapping the top and bottom edges of your border image file, so the shadows fall on the outside rather than the inside, and the inside is transparent instead of a solid colour like mine. Hopefully this will all be of some help.
    – Lyall
    Jul 14, 2015 at 17:45
  • hi Lyall, your last comment seems is what I want, could you please update your code to demonstrate what you mentioned in the comment? Also, I found it's confusing to find out where the torn edges are when viewing the repeated images, could you please make only one image surrounded by torn edges? thank you :)
    – Franva
    Jul 15, 2015 at 2:19
8

Try this:

clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
1
  • Sadly this becomes a tad more difficult once you realize that Edge (of course) doesn't support this and that you must clip-path inside an svg to make it work.
    – Highspeed
    Jun 16, 2019 at 5:02
7

I used some pen I found to come up with my own solution that has rips on all four sides. You can change it to have rips on only the top, bottom, left, right, or any combination thereof.

The key ingredients:

  1. Use clip-path: polygon(…) to "cut" the object you want to have the rip effect.
  2. Use filter: drop-shadow(…) on the container to give the thing a shadow.

Not only does this give a shadow, but that shadow follows the pattern of the rip so that it looks more realistic.

Live action:

https://codepen.io/carterpape/pen/rNjJKbM

2
  • Gosh after 6 years, still this question gets a lot of loves~! Amazing ! :) I checked our your solution, the effect looks great~! thanks for sharing this!
    – Franva
    Apr 12, 2021 at 8:52
  • how did you generate those long paths? you can't manually type it, right?
    – Franva
    Apr 12, 2021 at 8:53
1

You could probably achieve this effect with a png image.

The top part should be black (or whatever the color of your header), the bottom is partly transparent to create the "torn effect", and your real image will be on a lower layer (z-index) to be partly hidden.

Reply to Update2 this is what I meant

Instead of creating a complete shell (a "square" hole), you can split the four edges in four images: top, right, bottom and left.

You can make it responsive by simply repeating the image on the whole length (the "start" and "end" of the four edges must be the same) *

2
  • 1
    Thanks Oliver, could you please provide a demo?
    – Franva
    Mar 30, 2015 at 14:52
  • hi @web-tiki I use the pen you provided and tweaked and now it looks really similar to the torn paper. Please have a look the Update 3. Thanks
    – Franva
    Mar 31, 2015 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.