ribbon.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. @font-face {
  2. font-family: Collegiate;
  3. src: url("Collegiate.ttf");
  4. }
  5. .ribbon-holder {
  6. position: absolute;
  7. top: 0;
  8. overflow: hidden;
  9. height: 10em;
  10. }
  11. .right.ribbon-holder {
  12. right: 0;
  13. }
  14. .left.ribbon-holder {
  15. left: 0;
  16. }
  17. .ribbon,
  18. .ribbon:hover {
  19. text-decoration: none;
  20. }
  21. .ribbon {
  22. font-family: Collegiate, sans-serif;
  23. letter-spacing: -.1px;
  24. opacity: 0.95;
  25. padding: 0.25em 0;
  26. position: relative;
  27. top: 2.5em;
  28. /* Defaults friendly for white pages. */
  29. -moz-box-shadow: 0 0 13px #888;
  30. -webkit-box-shadow: 0 0 13px #888;
  31. color: #FFF;
  32. display: block;
  33. line-height: 1.35em;
  34. }
  35. .ribbon .text {
  36. padding: 0.1em 3em;
  37. }
  38. .right .ribbon {
  39. -moz-transform: rotate(45deg);
  40. -webkit-transform: rotate(45deg);
  41. right: -2.6em;
  42. }
  43. .left .ribbon {
  44. -moz-transform: rotate(-45deg);
  45. -webkit-transform: rotate(-45deg);
  46. left: -2.6em;
  47. }
  48. .white.ribbon {
  49. color: #111;
  50. background-color: #F5F5F5;
  51. background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff));
  52. -moz-box-shadow: 0 0 13px #999;
  53. -webkit-box-shadow: 0 0 13px #999;
  54. text-shadow: 0 0 .05em;
  55. }
  56. .white.ribbon .text {
  57. border: 1px solid #cecece;
  58. }
  59. .red.ribbon {
  60. background-color: #9a0000;
  61. background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000));
  62. }
  63. .red.ribbon .text {
  64. border: 1px solid #bf6060;
  65. }
  66. .green.ribbon {
  67. background-color: #006e00;
  68. background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200));
  69. }
  70. .green.ribbon .text {
  71. border: 1px solid #6bac6b;
  72. }
  73. .darkblue.ribbon {
  74. background-color: #121621;
  75. color: #ecedee;
  76. }
  77. .darkblue.ribbon .text {
  78. border: 1px solid #53565e;
  79. }
  80. .orange.ribbon {
  81. background-color: #E57504;
  82. background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906));
  83. }
  84. .orange.ribbon .text {
  85. border: 1px solid #ebaa65;
  86. }
  87. .gray.ribbon {
  88. background-color: #6d6d6d;
  89. background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d));
  90. }
  91. .gray.ribbon .text {
  92. border: 1px solid #a4a4a4;
  93. }