CSS3 Ribbons

How to create this 3d ribbon using only CSS3:

CSS3 title Ribbon. Works in IE9, FF4, C6, O10. Ribbon.htm:

<!DOCTYPE html>
<html>
<head>
    <title>Ribbon</title>
    <link href="Reset.css" rel="Stylesheet" type="text/css" />
    <link href="Ribbon.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div class="arthro">
Before ribbon
<div class="ribbon"><span>Title in the ribbon</span></div>
<div class="triangle"></div>
After ribbon<br />
follows text
</div>
</body>
</html>

Ribbon.css:

/* Reset.css */
* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
} 
/* End Reset.css */
.arthro {
    display:block;
    margin:3em;
    border:1px solid #999;
    background-color:#eee;
}
.ribbon {
    background-color:#099;
    -moz-border-radius:0 1em 1em 0;
    border-radius:0 1em 1em 0;
    border:1px solid #033;
    padding:.3em 1em .3em 2em;
    margin:0 2em 0 -1em;
    -webkit-box-shadow:2px 1px 2px #066;
    box-shadow:2px 1px 2px #066;
    
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#0ff), 
        color-stop(20%,#0cc),
        color-stop(80%,#099), to(#066));
    background: -moz-linear-gradient(top,#0ff,
        #0cc 20%,
        #099 80%,#066 100%);
    background: linear-gradient(#EEFF99, #66EE33);
}
.ribbon span {
    font-weight:bold;
    font-size:2em;
    color:#eee;
    text-shadow:1px 1px 2px #000;
}
.triangle {
    border-style:solid;
    border-color:#066 #066 transparent transparent; 
    border-width:.25em .5em .25em .5em;
    width:1em;
    height:.5em;
    margin-left:-1em;
}

Corner Ribbon (works only in Chrome & FF). Depends on transform: rotate(-45deg);

Corner.htm

<!DOCTYPE html>
<html>
<head>
    <title>Corner</title>
    <link href="Reset.css" rel="Stylesheet" type="text/css" />
    <link href="Corner.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div class="corner">
  <a href="#">Best Ribbon around</a>
</div>

</body>
</html>

Corner.css

.corner {
    background-color: #a00;
    overflow: hidden;
    position: absolute;
    left: -3em;
    top: 2.5em;

    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -moz-box-shadow: 0 0 1em #888;
    -webkit-box-shadow: 0 0 1em #888;
    box-shadow: 0 0 1em #888;
}
.corner a {
    border: 1px solid #faa;
    color: #fff;
    display: block;
    font-size:.8em;
    font-weight:bold;
    padding: 0.5em 4em;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
}

4 comments:

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.
jolly12 May, 2012 23:04
i was lookin' around for days for that! thanks
Mar29 October, 2012 04:16
nice, thanks
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.

Code reuse

prettify

baseline

CSS3 Ribbons

4 comments: