Is it possible to make a torn paper effect at the edges

Question

Update 3

Hi guys, I updated the code ( http://codepen.io/anon/pen/VYRJLp ) and now the edges look really like a tearing paper effect. By the way, it uses SVG.

The only problem is that I don’t know how to make the image as svg background. At the same time, keep the edges look like rust.

Please take a look. Any efforts are welcome.

---

Update 2

It seems that this effect cannot be achieved without the help of PhotoShop (PS), so I would like to add PS as part of the solution.

I am not a PS expert, but because of a quick thought, I think I need to take a few steps:

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

Questions for this approach:

• Is he responsive?

• If not, is it possible to make it responsive? How should I do it work correctly on mobile devices.

---

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

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

What I want:

• I want this image to be as wide as the screen of the device, which means responsive.
• The edges of this picture look like torn paper.
• I will place this image as a banner after the top navigation bar but before the content.

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

Here is my code: Please note: in this code, css uses the image as an edge, BUT what I don't want, I want. I just want the edges to be pure CSS effects (is this possible?) So it will look like this (the one on the right, you can see that there are no white solid edges)

<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

Hi guys,

I think I found something similar to what I imagine. Here is the effect I want:

Answer 1

I was only able to do this with CSS using cropping the image at the borders.

Here is the code:

 body { background-image: url("http://s27.postimg.org/7uqejz1sz/mad_scientist.jpg"); } .border { border-width: 20px 0 20px 0; border-style:solid; border-image: url(http://suck.direct/img/bordernew.png) 50 0 50 0 repeat; -webkit-border-image: url(http://suck.direct/img/bordernew.png) 50 0 50 0 repeat; -moz-border-image: url(http://suck.direct/img/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 the height of a re-sizing div, which always has a torn paper effect along the top and bottom. It works great for full width, but I could not find a decent way to make side edges at the same time as the top and bottom (it's easy to make side edges if the top and bottom edges are straight).

I made an image in Photoshop - it is mostly yellow in the middle, then torn, and then transparent on the outside.

If you are not familiar with slicing images, the four numbers basically determine (in order): the height in pixels of the upper part of the image that you want to use as the upper boundary strip, the width in pixels for the right strip, then the lower strip, then the left strip. fill says that it takes the center part (which is discarded by default) and uses it to fill the div between the borders.

Depending on your preference, you can have a repeat border (and crop at the end), round (repeat to the nearest number of full repetitions, which is either compressed or stretched depending on which number it is closer to) or stretch (stretched ... although this distorts the image for this example).

It took me a while to get it to work correctly, but I was scared of the results. I could not find anyone with the same answer, so I thought that I would publish it.

UPDATE

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

Answer 2

Try the following:

 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%); 

Answer 3

You can probably achieve this effect with a png image.

The top should be black (or any color of your heading), the bottom is partially transparent to create a “tear effect”, and your real image will be at the lower level (z-index) to be partially hidden.

Reply to Update2 what I meant

Instead of creating a full shell (a “square” hole), you can divide four edges into four images: top, right, bottom and left.

You can make it responsive by simply repeating the image along its entire length (the "start" and "end" of the four edges should be the same) *