Differences
This shows you the differences between two versions of the page.
— | development:css:ribbon [2019/10/31 09:04] (current) – created - external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Corner ribbon (crossbrowser) ====== | ||
+ | Code for drawing | ||
+ | HTML: | ||
+ | <code html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | CSS: | ||
+ | <code css> | ||
+ | .wrapper { | ||
+ | margin: 50px auto; | ||
+ | width: 280px; | ||
+ | height: 370px; | ||
+ | background: white; | ||
+ | border-radius: | ||
+ | -webkit-box-shadow: | ||
+ | -moz-box-shadow: | ||
+ | box-shadow: 0px 0px 8px rgba(0, | ||
+ | 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: | ||
+ | -webkit-transform: | ||
+ | -moz-transform: | ||
+ | -ms-transform: | ||
+ | -o-transform: | ||
+ | position: relative; | ||
+ | padding: 7px 0; | ||
+ | left: -5px; | ||
+ | top: 15px; | ||
+ | width: 120px; | ||
+ | background-color: | ||
+ | background-image: | ||
+ | background-image: | ||
+ | background-image: | ||
+ | background-image: | ||
+ | background-image: | ||
+ | color: #6a6340; | ||
+ | -webkit-box-shadow: | ||
+ | -moz-box-shadow: | ||
+ | box-shadow: 0px 0px 3px rgba(0, | ||
+ | } | ||
+ | |||
+ | .ribbon-green: | ||
+ | content: ""; | ||
+ | border-top: 3px solid # | ||
+ | border-left: | ||
+ | border-right: | ||
+ | position: | ||
+ | bottom: -3px; | ||
+ | } | ||
+ | |||
+ | .ribbon-green: | ||
+ | left: 0; | ||
+ | } | ||
+ | .ribbon-green: | ||
+ | right: 0; | ||
+ | } | ||
+ | </ |