I'm new to this forum and I must admit, as much as I've seen I really like it, wonder how you guys are like

 

So what my post basically is about are the blue little «paper-like wrappings» or

just folded sheets. In the past few days I've seen them on lots of Websites

and Blogs. I attached a Screenshot of some of them. I liked them somehow and

since I'm just starting with HTML and CSS i've thought of using them for

my first Website. Now before you think I'm a bloody Starter - yes, probably I am

but i do already know much about HTML/CSS. So first I wonder if they have

a specific name. Since I've seen them already in so many places, I think there sure

is. If you are smiling now and thinking - what a question how you call

these things... Please notice my English is really not

that good! So it's hard to me to find out.

 

I'd be very happy about advices, ideas how these guys are called like or even tuts

for creating something like this in PS or Illustrator.

 

Thanks for your help folks

cheers mala[/font][/size]

I would call it a wraparound

 

Roughly - you create a header image and a container image (see attached pic)~ I used Photoshop, but it should be achievable in most art programs.

 

Insert the header image as the header div background, then in the container div, use the container image as the background, doing a repeat-y to fill down

Edited March 8, 201115 yr by NeRo

They're been called 'Ribbons' around the web these days. They are the 'in thing' at the moment.

Ribbons?

Ribbons?

 

 

Well that's what i've been seeing them called lately.

Like >>> http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/

 

 

I have seen them being called ribbons and wrap-around. It's really up to you on what you want to call it. In our office we call it "that cool wrap-around page effect."

I call them "fake 3d fold thingies" in my head.. im sure that helped allot.. lol

It is called 3D Ribbon!

If you are into CSS3, here is the perfect tutorial for you: Infobox with Pure CSS 3D Ribbon and you dont need Photoshop for that

Edited March 9, 201115 yr by Monie

It is called 3D Ribbon!

If you are into CSS3, here is the perfect tutorial for you: Infobox with Pure CSS 3D Ribbon and you dont need Photoshop for that

 

Genial!

 

Thanks for link and +1 to karma.

Well u folks are great!

 

Haha I did honestly not expect to get so much feedback.

Yes, that's exactly the thing I realized, that they are the «in thing» in web design at the time.

So for me the case is closed, I know how experts would call it, even names made out in others heads ^^

and finally, i've got some search results when I'm searching for «webdesign-paperkinda-

3d-wrapparound-effect-tutorial» on google - I just type in wrap-around or ribbons and got it.

 

Thanks also to NeRo for the basic approach of a technical solution and to Monie for the tutorial,

looks great let me try it maybe I can show you guys some results as soon as I find the time.

 

A noobie question:

What is the next step for me to do with this thread?

In the top right under the Fast Reply Header theres's a line saying I'd be able

to post 22 more posts till Today, 06:20 PM. Does that mean my threads are restricted

in the beginning and does it mean the Thread will be closed and reviewable for

other users searching for the same problem?

 

Thank you so much again!

cheers

Happy to help you and Lev, thanks for the +1!

 

Oh regarding your last question, Ben will be the right person to answer that

Edited March 9, 201115 yr by Monie

Ok =) thx for the info

They're called 3D ribbons. There are a lot of great tutorials on how to make them and even a generator. Try to avoid the CSS3 tutorials as it's not fully supported by IE.

 

D'oh, I see loads of people got there first.

Edited March 9, 201115 yr by batgranny

Which IE do you refer to? 4,5 or 6?

Do people still code for 6? Then I have to say they are way far behind as IE 9 is coming and people are talking and blogging about CSS3 with HTML5. After all, IE6 will never support CSS3 or HTML5. Unless you are using some kind of browser trick to do that.

 

So do you think it is worth to sacrifice learning new technology just for IE6?

which tut is the best1 (in terms of supporting browsers and looking sexy) ?!?!!

They're called 3D ribbons. There are a lot of great tutorials on how to make them and even a generator. Try to avoid the CSS3 tutorials as it's not fully supported by IE.

 

D'oh, I see loads of people got there first.

 

 

Maybe you was not first...

But thank you for your post tho as it confirms my guardedness of using the css technique.

On the other hand I think I'll create a site completely with css3 ribbons and

write a popup for people who use IE telling them they should better switch to mac and use safari

 

juz jokin' ;D

Which IE do you refer to? 4,5 or 6?

Do people still code for 6? Then I have to say they are way far behind as IE 9 is coming and people are talking and blogging about CSS3 with HTML5. After all, IE6 will never support CSS3 or HTML5. Unless you are using some kind of browser trick to do that.

 

So do you think it is worth to sacrifice learning new technology just for IE6?

 

Well, box shadow, border radius and 2D transforms are not supported in IE 6, 7, or 8, and from what I've seen of the CSS3 tutorials at least one of these elements is used. If there is a way of doing it in CSS3 that IE will render correctly please share as I'd love to know it!

On the other hand I think I'll create a site completely with css3 ribbons and

write a popup for people who use IE telling them they should better switch to mac and use safari

 

LOL, I think using Safari is enough, switching to Mac, that's a different arguments

 

@batgranny -- Couldn't remember the link but here is a popular post from Smashing Magazine and CSS3 Pie that talks about CSS3 in IE.

They are 3D Ribbons as far as I know and hopefully this should help you:

 

3D Ribbon Generator

LOL, I think using Safari is enough, switching to Mac, that's a different arguments

 

@batgranny -- Couldn't remember the link but here is a popular post from Smashing Magazine and CSS3 Pie that talks about CSS3 in IE.

 

That is brilliant! Thanks!

They are 3D Ribbons as far as I know and hopefully this should help you:

 

3D Ribbon Generator

 

I like tools like this - saves on coding

 

 

(@singleframe +1 to you for sharing this)

Very nice, thank you for the generator! But I also want to know exactly how it's done in code ;D I think the links you guys postet will help me getting that knowledge

 

@Monie: Sh*t i forgoth there is a Windows version of Safari!

haha the popup's meaning sure would be making people switch on the right side

 

an apple a day keeps... you already know =)

Very nice, thank you for the generator! But I also want to know exactly how it's done in code ;D I think the links you guys postet will help me getting that knowledge

 

@Monie: Sh*t i forgoth there is a Windows version of Safari!

haha the popup's meaning sure would be making people switch on the right side

 

an apple a day keeps... you already know =)

 

Hahaha, I hate popup's!