prettify

baseline

CSS3 Ribbons

How to create this 3d ribbon using only CSS3:

CSS3 title Ribbon. Works in IE9, FF4, C6, O10. Ribbon.htm: 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Ribbon</title>
  5.     <link href="Reset.css" rel="Stylesheet" type="text/css" />
  6.     <link href="Ribbon.css" rel="Stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div class="arthro">
  10. Before ribbon
  11. <div class="ribbon"><span>Title in the ribbon</span></div>
  12. <div class="triangle"></div>
  13. After ribbon<br />
  14. follows text
  15. </div>
  16. </body>
  17. </html>
Ribbon.css: 
  1. /* Reset.css */
  2. * {
  3.     -moz-box-sizing:border-box;
  4.     -webkit-box-sizing:border-box;
  5.     box-sizing:border-box;
  6. } 
  7. /* End Reset.css */
  8. .arthro {
  9.     display:block;
  10.     margin:3em;
  11.     border:1px solid #999;
  12.     background-color:#eee;
  13. }
  14. .ribbon {
  15.     background-color:#099;
  16.     -moz-border-radius:0 1em 1em 0;
  17.     border-radius:0 1em 1em 0;
  18.     border:1px solid #033;
  19.     padding:.3em 1em .3em 2em;
  20.     margin:0 2em 0 -1em;
  21.     -webkit-box-shadow:2px 1px 2px #066;
  22.     box-shadow:2px 1px 2px #066;
  23.     
  24.     background: -webkit-gradient(linear, 0 0, 0 100%, from(#0ff), 
  25.         color-stop(20%,#0cc),
  26.         color-stop(80%,#099), to(#066));
  27.     background: -moz-linear-gradient(top,#0ff,
  28.         #0cc 20%,
  29.         #099 80%,#066 100%);
  30.     background: linear-gradient(#EEFF99, #66EE33);
  31. }
  32. .ribbon span {
  33.     font-weight:bold;
  34.     font-size:2em;
  35.     color:#eee;
  36.     text-shadow:1px 1px 2px #000;
  37. }
  38. .triangle {
  39.     border-style:solid;
  40.     border-color:#066 #066 transparent transparent; 
  41.     border-width:.25em .5em .25em .5em;
  42.     width:1em;
  43.     height:.5em;
  44.     margin-left:-1em;
  45. }
Corner Ribbon (works only in Chrome & FF). Depends on transform: rotate(-45deg);
Corner.htm 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Corner</title>
  5.     <link href="Reset.css" rel="Stylesheet" type="text/css" />
  6.     <link href="Corner.css" rel="Stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div class="corner">
  10.   <a href="#">Best Ribbon around</a>
  11. </div>

  13. </body>
  14. </html>
Corner.css 
  1. .corner {
  2.     background-color: #a00;
  3.     overflow: hidden;
  4.     position: absolute;
  5.     left: -3em;
  6.     top: 2.5em;

  8.     -moz-transform: rotate(-45deg);
  9.     -webkit-transform: rotate(-45deg);
  10.     transform: rotate(-45deg);

  12.     -moz-box-shadow: 0 0 1em #888;
  13.     -webkit-box-shadow: 0 0 1em #888;
  14.     box-shadow: 0 0 1em #888;
  15. }
  16. .corner a {
  17.     border: 1px solid #faa;
  18.     color: #fff;
  19.     display: block;
  20.     font-size:.8em;
  21.     font-weight:bold;
  22.     padding: 0.5em 4em;
  23.     text-align: center;
  24.     text-decoration: none;
  25.     text-shadow: 1px 1px 1px #000;
  26. }
at 9/19/2010 05:13:00 PM

4 comments:

  1. Forum Skins17 September, 2011 07:56

    Mate, Cheers for this, i work with a lot of forum styles / designs etc and this will help add some extra polish to them.. really appreciate this very easy to read and implement.

    ReplyDelete
  2. jolly12 May, 2012 23:04

    i was lookin' around for days for that! thanks

    ReplyDelete
  3. Mar29 October, 2012 04:16

    nice, thanks

    ReplyDelete
  4. Subhankar23 June, 2013 03:30

    Thanks a lot.This is very helpful for some one whose only source is web tutorials.I have bookmarked this page.

    ReplyDelete

Subscribe to: Post Comments (Atom)