4 replies [Last post]
millers
millers's picture
Offline
Enthusiast
Last seen: 19 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

To break up the straight edges a little I created jagged edges on images and some areas with background colours. All nice and easy in photoshop, but I'm coming to code this up and am regretting it haha.

I searched and searched for some help with this but can't find any, is it not a very common technique?

Thanks for any help in achieving this.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi millers, Have a look into

Hi millers,
Have a look into border-image it's pretty well supported now.

millers
millers's picture
Offline
Enthusiast
Last seen: 19 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

Thanks for the suggestion, I

Thanks for the suggestion, I have been trying lots of variations and generators but can't get the border to appear over the image to create a rough edge effect.

Here is a zip as it's hard to explain what I am trying to do, the zip contains

https://www.dropbox.com/s/6j0i555hk0h9km8/jagged.zip

end-result.jpg - shows what I want to achieve
jaggededge.psd - photoshop edge border
jaggededge.png - png border
html and image files with my attempt

is it possible to achieve what I am after, the website will be a cms driven website so ideally I want to be able to upload a standard image and have css add the rough edge.

Thanks

millers
millers's picture
Offline
Enthusiast
Last seen: 19 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

update

I managed to achieve what I need by usingan extra div and also enclosing the image in a div. It won't be ideal for the cms but it's possible. Oh and I also have to specify a width and height Sad(

Is this my best bet, other than photoshopping every image before upload?

<!DOCTYPE html>
<head>
<title>Jagged edge images</title>
<style>
html {background-color: #fff}
.outside {position: relative; width: 300px; height: 225px}
.inside {position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-image: url(jaggededge.png) 7 4 5 7 repeat; border-width: 4px;}
</style>
</head>
 
<body>
 
<div class='outside'>
	<img src='Koala.jpg' width=300 />
	<div class='inside'></div>
</div>
 
 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

That would certainly be the

That would certainly be the robust solution, and if I were doing it, probably the solution I'd choose.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.