Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 1 down vote favorite
1

so i was in a website and it had some boxes with content in them and an image on top of the boxes with some text in them... like a title for whats the box for...

the problem is i dont know how to do this kind of design

enter image description here

i am talking about the left side with the curves...

and help would be appreciated.

share|improve this question
I would say the easiest was would be to do this with an image. To be precise with a CSS sprite. I think you will also be able to pull this off using CSS3 and JS techniques, but it would be a lot more difficult. If you don't know how to create the sprite and position it using CSS I can help you with a small example. – Saif Bechan Apr 1 '12 at 10:04
i agree with the image option and thats what i was thinking from the start. – fxuser Apr 1 '12 at 10:24
Ok, the image has to be split in two parts, the content, and the fold. Then you create a div with 2 spans inside, one for the content with the text, and one for the fold. Span 1 will have the fold as a background, display:block with the dimensions of the fold. Next to that you have the content with your text, with the button part as the background. I hope this makes sense. – Saif Bechan Apr 1 '12 at 10:30
yeah but im talking on how to create the fold i mean can i cut this and change its colors with photoshop or how i could create one of my own... – fxuser Apr 1 '12 at 10:35
2  
Ah that's another question. I would make my own button with the fold. Changing this one is possible, but it would look messy in the end. There are a lot of ready to go photoshop examples online for such graphics, premiumpixels.com is a good example. Finnaly you an do a google search on creating a fold in photoshop. Another example: wordpressthemeshock.com/folded-buttons – Saif Bechan Apr 1 '12 at 10:43
show 1 more comment

closed as not a real question by Su', John Conde♦ Apr 1 '12 at 16:07

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, see the FAQ.

1 Answer

up vote 1 down vote

I think it's cerated via Photoshop as an image and then simply added to CSS of the web page as background-image of some element (i.e. a <div>)

I think the question is more how to build such image in Photoshop? It might be some new Photoshop effect because I'm starting to see it too often on websites. (It happened the same when PS6+ added the Warp effect, and we started to see on the web many sites with a curl on the up right side of the page.).

enter image description here

Here is a Photoshop tutorial on how to make similar image to the one you asked but with stright angles, I think you need to look for these kind of tutorials.

share|improve this answer

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