Designing websites with the cool folded wrap design like the one below looks great, but how can we do this without using graphics?....I'll explain that in a bit. Here is the CSS .footb{ padding:15px; background:#adadad; height:50%; width:90%; margin:0 auto; margin-top:40px; position:relative; -moz-box-shadow: 0 4px 6px #b1b0b0; -webkit-box-shadow: 0 4px 6px #b1b0b0; box-shadow: 0 0 8px 6px #cfcfcf; border:1px solid #6d6d6d; } .footb:after{ content: ""; position: absolute; height: 0; width: 0; right: 0; top: -22px; left:-1px; border-top: 22px solid transparent; border-right: 15px solid #474747; z-index:-1; } .footb:before{ content: ""; position: absolute; height: 0; width: 0; right: 0; top: -22px; left:99%; border-top: 22px solid transparent; border-left: 15px solid #474747; z-index:-1; } Code (markup): The "footb" class is the main grey box you see. The "footb:after" and "footb:before" classes are used to create the folding effect. To change the size and angle of the folds you can play with the "border" settings inside the before and after classes. Here is the html.... <!DOCTYPE html> <head> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> <body> <div class="footb"></div> </body> Code (markup): Here is the fully coded html and css... http://maddoggmedia.com/freebies/folded/ Please feel free to ask any questions. I was looking for a way to do this and found an answer so I thought I'd share it Enjoy. Regards, Ray
Might help if you had valid markup, wasn't sending screen specific CSS to "all" (I'm so sure that makes sense in Print and aural), and learned to use condensed properties, didn't waste time re-declaring things you could easily share, and didn't slam everything into one hard to read line; the last of which likely being why your box-shadow's don't match either. Of course that in your live demo you're declaring px metric fonts doesn't exactly speak well of your CSS or design skills. First let's get that markup cleaned up so that you have the tags you forgot (HTML) and have a PROPER media declaration: <!DOCTYPE html> <html><head> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" > </head><body> <div id="footer"></div> </body></html> Code (markup): #footer { position:relative; width:90%; height:50%; padding:15px; margin:40px auto 0; background:#AAA; -webkit-box-shadow: 0 0 8px 6px #CCC; -moz-box-shadow:0 0 8px 6px #CCC; box-shadow: 0 0 8px 6px #CCC; border:1px solid #666; } #footer:before, #footer:after { content:""; position:absolute; height:0; width:0; top:-24px; font-size:1px; /* prevent IE minimum height bugs */ border:solid transparent; border-width:24px 0 0; } #footer:before { right:-1px; border-left:16px solid #444; } #footer:after { left:-1px; border-right:16px solid #444; } Code (markup): Only change what needs to be unique, share what's the same. (A failure to understand that is why most people using LESS or SASS don't know enough about CSS to be making websites in the first place). Knocks a few bytes off it, and makes changes easier to implement. (and is a HELL of a lot easier to read) I switched out the sizes to be a proper 2:3 ratio so that they look a little less jagged since 15:22 aspect was ugly as sin... though as always 1:1, 1:2 or 2:1 would look better. Still, the use of transparency to make diagonal corners is as always a great method.
I appreciate your reply (condescending as it was). I never claimed to be a coder, I'm a designer that's learning coding. But I posted that here to help others so I greatly appreciate someone cleaning it up so others can understand and utilize it. Thanks again, Ray