You are here: Home / CSS / CSS Cool 3d Ribbon Example

CSS Cool 3d Ribbon Example

by Jaspreet Chahal on April 28, 2012 Leave a Comment

Hi Guys,

So I thought I should share a cool 3d Ribbon with you guys,

Final result looks like this

CSS3 3d Ribbon

Advertisement

Here is code for what I’ve done. Well this is a known technique so I guess you will find it really similar to some others out there.

  1. <html>
  2. <head>
  3. <title>3d CSS Ribbon</title>
  4. <meta name="Author" content="Jaspreet Chahal">
  5. <meta name="Keywords" content="">
  6. <meta name="Description" content="">
  7. <style>
  8. .jcorgwrapper {
  9. 		position: relative;
  10.    }
  11.   .jcorgwrapper-int {
  12. 		background-color: #666;
  13. 		height: 60px;
  14. 		width: 975px;
  15. 		position: relative;
  16. 		left: -10px;
  17. 	}
  18. 	.jcorgribcontent {
  19. 		padding-top: 15px;
  20. 		color: white;
  21. 	}
  22. 	.jcorgbottomleftcorner, .jcorgbottomrightcorner {
  23. 		top: 60px;
  24. 		position: absolute;
  25. 		z-index: 1;
  26. 		border-style: solid;
  27. 		height: 0px;
  28. 		width: 0px;
  29. 	}
  30. 	.jcorgbottomleftcorner {
  31. 		left: -10px;
  32. 		border-color: transparent #333 transparent transparent;
  33. 		border-width: 0 20px 15px 0;
  34. 	}
  35. 	.jcorgbottomrightcorner {
  36. 		left: 945px;
  37. 		border-color: transparent transparent transparent #333;
  38. 		border-width: 0 0 15px 20px;
  39. 	}
  40. </style>
  41. </head>
  42.  
  43. <body>
  44.   <div class="jcorgwrapper">
  45.      <div class="jcorgbottomleftcorner"></div>
  46.        <div class="jcorgwrapper-int">
  47.          <div class="jcorgribcontent">
  48.            <div style="text-align:center"><a href="http://jaspreetchahal.ORG" style="font-size:22px;color:white;">JaspreetChahal.org</a></div>
  49.          </div>
  50.       </div>
  51.     <div class="jcorgbottomrightcorner"></div>
  52.   </div>
  53. </body>
  54. </html>

 

I hope above stuff helps.

Cheers,

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Filed Under: CSS

Speak Your Mind

*

CommentLuv badge