Differences

This shows you the differences between two versions of the page.

@@ Line 1: / Line 1: @@
+====== Corner ribbon (crossbrowser) ======
+Code for drawing  a ribbon in the div corner.
+HTML:
+<code html>
+<div class="wrapper"><br />
+<div class="ribbon-wrapper-green">
+<div class="ribbon-green">NEWS</div>
+</div>
+</div>
+</code>
+CSS:
+<code css>
+.wrapper {
+margin: 50px auto;
+width: 280px;
+height: 370px;
+background: white;
+border-radius: 10px;
+-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
+-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
+box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
+position: relative;
+z-index: 90;
+}
+.ribbon-wrapper-green {
+width: 85px;
+height: 88px;
+overflow: hidden;
+position: absolute;
+top: -3px;
+right: -3px;
+}
+.ribbon-green {
+font: bold 15px Sans-Serif;
+color: #333;
+text-align: center;
+text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
+-webkit-transform: rotate(45deg);
+-moz-transform: rotate(45deg);
+-ms-transform: rotate(45deg);
+-o-transform: rotate(45deg);
+position: relative;
+padding: 7px 0;
+left: -5px;
+top: 15px;
+width: 120px;
+background-color: #BFDC7A;
+background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
+background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
+background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
+background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
+background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
+color: #6a6340;
+-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+}
+.ribbon-green:before, .ribbon-green:after {
+content: "";
+border-top: 3px solid #6e8900;
+border-left: 3px solid transparent;
+border-right: 3px solid transparent;
+position:absolute;
+bottom: -3px;
+}
+.ribbon-green:before {
+left: 0;
+}
+.ribbon-green:after {
+right: 0;
+}
+</code>