CSS Ribbon Styles for depth and html for 3d across ribbon


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /* CSS and CSS3 used to create imageless ribbon effect for Navigation. */
  2.  
  3. /* =====
  4. .triangle {
  5. border-color: transparent #7d90a3 transparent transparent;
  6. border-style: solid;
  7. border-width: 15px;
  8. height: 0;
  9. width: 0;
  10. } ======== */
  11.  
  12. /* CSS code to style the wrapper bubble rectangle */
  13.  
  14. /* Reset */
  15.  
  16. html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  17. a, font, img, ul, li {
  18. margin: 0;
  19. padding: 0;
  20. border: 0;
  21. outline: 0;
  22. font-size: 62.5%;
  23. vertical-align: baseline;
  24. background: transparent;
  25. }
  26.  
  27. body {
  28. line-height: 1.5em;
  29. }
  30. ol, ul {
  31. list-style: none;
  32. }
  33. :focus {
  34. outline: 0;
  35. }
  36.  
  37. /* // Reset */
  38.  
  39. body {
  40. background: url(bck.jpg);
  41. font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
  42. font-size: 1em;
  43. color: #999;
  44. }
  45.  
  46. h2 {
  47. font-style: italic;
  48. font-weight: normal;
  49. line-height: 1.2em;
  50. }
  51.  
  52. div#wrapper {
  53. margin: 50px auto 0px auto; /* centered */
  54. width: 400px;
  55. }
  56.  
  57. .bubble {
  58. clear: both;
  59. margin: 0px auto;
  60. width: 350px;
  61. background: #fff;
  62. -moz-border-radius: 10px;
  63. -khtml-border-radius: 10px;
  64. -webkit-border-radius: 10px;
  65. -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  66. -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  67. -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  68. position: relative;
  69. z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
  70. }
  71.  
  72. .rectangle {
  73. background: #7f9db9;
  74. height: 50px;
  75. width: 380px;
  76. position: relative;
  77. left:-15px;
  78. top: 30px;
  79. float: left;
  80. -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  81. -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  82. -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  83. z-index: 100; /* the stack order: foreground */
  84. }
  85.  
  86. .triangle-l {
  87. border-color: transparent #7d90a3 transparent transparent;
  88. border-style:solid;
  89. border-width:15px;
  90. height:0px;
  91. width:0px;
  92. position: relative;
  93. left: -30px;
  94. top: 65px;
  95. z-index: -1; /* displayed under bubble */
  96. }
  97.  
  98. .triangle-r {
  99. border-color: transparent transparent transparent #7d90a3;
  100. border-style:solid;
  101. border-width:15px;
  102. height:0px;
  103. width:0px;
  104. position: relative;
  105. left: 350px;
  106. top: 35px;
  107. z-index: -1; /* displayed under bubble */
  108. }
  109.  
  110. .info {
  111. padding: 60px 25px 35px 25px;
  112. }
  113.  
  114. .info h2 {
  115. font-size: 20px;
  116. }
  117.  
  118. .info p {
  119. padding-top: 10px;
  120. font-size: 14px;
  121. line-height: 22px;
  122. }
  123.  
  124. .info p a {
  125. color: #c4591e;
  126. text-decoration: none;
  127. }
  128.  
  129. .info p a:hover {
  130. text-decoration: underline;
  131. }
  132. .rectangle h2 {
  133. font-size: 30px;
  134. color: #fff;
  135. padding-top: 6px;
  136. text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  137. text-align: center;
  138. }
  139.  
  140. .menu {
  141. position: relative;
  142. top:3px;
  143. left: 50px;
  144. z-index: 80; /* the stack order: displayed under bubble (90) */
  145. }
  146.  
  147. .menu ul li {
  148. -webkit-transform: rotate(-45deg); /* rotate the list item */
  149. -moz-transform: rotate(-45deg); /* rotate the list item */
  150. width: 50px;
  151. overflow: hidden;
  152. margin: 10px 0px;
  153. padding: 5px 5px 5px 18px;
  154. float: left;
  155. background: #7f9db9;
  156. text-align: right;
  157. }
  158.  
  159. .menu ul li a {
  160. color: #fff;
  161. text-decoration: none;
  162. display:block;
  163. }
  164.  
  165. .menu ul li.l1 {
  166. background: rgba(131,178,51,0.65);
  167. }
  168.  
  169. .menu ul li.l1:hover {
  170. background: rgb(131,178,51);
  171. }
  172.  
  173. .menu ul li.l2 {
  174. background: rgba(196,89,30,0.65);
  175. }
  176.  
  177. .menu ul li.l2:hover {
  178. background: rgb(196,89,30);
  179. }
  180.  
  181. .menu ul li.l3 {
  182. background: rgba(65,117,160,0.65);
  183. }
  184.  
  185. .menu ul li.l3:hover {
  186. background: rgb(65,117,160);
  187. }
  188.  
  189. .menu span {
  190. margin: 15px 80px 0px 0px;
  191. float:right;
  192. }
  193. <!-- The HTLM for the Ribbon -->
  194.  
  195. <div id="wrapper">
  196. <div class="menu">
  197. <ul>
  198. <li class="l1"><a href="#">CSS3</a></li>
  199. <li class="l2"><a href="#">is really</a></li>
  200. <li class="l3"><a href="#">powerful</a></li>
  201. </ul>
  202. <span>by PV.M Garage</span>
  203. </div>
  204.  
  205. <div class="bubble">
  206. <div class="rectangle">
  207. <div class="triangle-l"></div>
  208. <div class="triangle-r"></div>
  209. <h2>3D CSS Ribbon</h2>
  210. </div>
  211. <div class="info">
  212. <h2>I Have Used Only CSS, friends!</h2>
  213. <p>
  214. For this tutorial I have used some new properties of the CSS3.
  215. You can realize a nice 3D effect using only CSS, it's really
  216. fantastic.<br />It doesn't work with IE!
  217. </p>
  218. </div>
  219. </div>
  220. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.