#Ripped paper effect how to#In this post, I’ll show you how to create a Ripped Paper Hole Effect in Canva (or Pop out of a Ripped Paper Hole Effect in Canva). Again, the image I made in Photoshop but this time it's white > torn edge > transparent rather than coloured. I find the div I want to apply the border to and use either :before or :after to add the border as below. I recently did this on another project for wooden watches and stuff using a simpler method. It's now 2020 and it's been a few years since my original answer (I've learned a lot in 5 years). I use media queries to provide an alternative (shadows etc.) for IE10 and below where border-image is not supported (example on my website). This feature IS supported in IE11 provided border-style:solid is specified. I couldn't find anyone with the same answer so thought I'd post it. It took some fiddling for me to get it to work correctly but I'm chuffed with the results. although that distorts the image for this example). #Ripped paper effect full#The fill tells it to take the center part (which is discarded by default) and use it to fill the div between the borders.ĭepending 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. 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. I made the image in Photoshop - it's basically yellow in the middle, then torn and then transparent on the outer. 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). This gives me a height re-sizing div that always has the torn paper effect along the top and bottom. moz-border-image: url() 50 0 50 0 repeat įont-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif webkit-border-image: url() 50 0 50 0 repeat I think I found something quite similar to what I am imagine. webkit-border-image: url('') 80 80 80 repeat 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)īackground-image:url('img/background.jpg') Notice: in this code, the css uses an image as the edge, BUT that is not want I want. But in my case, I will need to fill in my picture to replace the white area. It should look like the white area in this picture.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |