Ribbons

by XTREME104

HTML

<head>
    <title>Ribbons and Banners</title>
</head>
<body>
    <div id="banner">Banner (div id="banner")</div>
    <h1 class="red">Banner (h1 class="red")</h1>
    <h2 id="ribbon" class="purple">Ribbon (h2 class="purple")</h2>
    <h2 class="green">Ribbon (h2 class="green")</h2>
    <p>This is example text.</p>
    <h2 id="ribbon" class="yellow">Ribbon (h2 class="yellow")</h2>
    <h2 class="blue">Ribbon (h2 class="blue")</h2>
    <p>This is example text.</p>
    <h2 id="ribbon" class="black">Ribbon (h2 class="black")</h2>
    <div id="ribbon" class="blue">Div Ribbon (div id="ribbon" class="blue")&hellip; BTW, Overflowing text doesn't break the ribbons or banners :)</div>
    <p>An element other than a banner or ribbon MUST be after the last banner or ribbon, or else the white of the page will be shorter than the page itself.</p>
    <h1>Create a Banner or Ribbon</h1>
    <form name="addbannerorribbonform">
        <input type="radio" name="bannerorribbon" value="banner" checked="checked">Banner</input>
        <input type="radio" name="bannerorribbon" value="ribbon">Ribbon</input>
        <br/>
        <input type="radio" name="bannerorribbondivorh1h2" value="h1h2" checked="checked">h1 (Banner) or h2 (Ribbon)</input>
        <input type="radio" name="bannerorribbondivorh1h2" value="div">div</input>
        <br/>
        <input placeholder="Text" name="bannerorribbontext"></input>
        <br/>
        <input type="radio" name="bannerorribboncolor" value="gray" checked="checked">Gray (Default)</input>
        <br/>
        <input type="radio" name="bannerorribboncolor" value="black">Black</input>
        <br/>
        <input type="radio" name="bannerorribboncolor" value="red">Red</input>
        <br/>
        <input type="radio" name="bannerorribboncolor" value="purple">Purple</input>
        <br/>
        <input type="radio" name="bannerorribboncolor" value="green">Green</input>
        <br/>
        <input type="radio" name="bannerorribboncolor"...

CSS

html {
    font-family:Cambria, Georgia, "Times New Roman", Times, serif;
    /* Background Color */
    background:#E4E3D5;
    /* Text Color */
    color:#666;
    margin: 0 20px;
}

#banner, #ribbon, h1, h2 {
    /* Big Banner Color */
    background: #999;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,1);
    padding: 10px;
    text-align: center;
    position: relative;
    clear: both;
    box-shadow: 0 3px 2px rgba(0,0,0,0.2);
}

#banner.red, #ribbon.red, h1.red, h2.red {
    background: #F00;
}

#banner.purple, #ribbon.purple, h1.purple, h2.purple {
    background: #B0F;
}

#banner.green, #ribbon.green, h1.green, h2.green {
    background: #0D0;
}

#banner.yellow, #ribbon.yellow, h1.yellow, h2.yellow {
    background: #FF0;
    color: #000;
}

#banner.blue, #ribbon.blue, h1.blue, h2.blue {
    background: #66F;
}

#banner.black, #ribbon.black, h1.black, h2.black {
    background: #000;
}

#banner, h1 {
    font-size:2em;
    margin: 0 -20px 50px -20px;
    padding: 20px 0;
}

#ribbon, h2 {
    font-size: 1.5em;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
}

#banner:before, h1:before, #banner:after, h1:after, #ribbon:nth-of-type(even):before, #ribbon:nth-of-type(odd):after, h2:nth-of-type(even):before, h2:nth-of-type(odd):after {
    content: '';
    border-right: 10px solid;
    border-bottom: 10px solid transparent;
    border-left: 10px solid;
    position: absolute;
    bottom: -10px;
    color: transparent;
}

#banner:before, h1:before {
    left: -10px;
    border-left-color: transparent;
    border-right-color: #777;
}

#banner:after, h1:after {
    right: -10px;
    border-left-color: #777;
    border-right-color: transparent;
}

#ribbon:nth-of-type(even), h2:nth-of-type(even) {
    margin-left:-20px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.3);
    float: left;
}

#ribbon:nth-of-type(even):before, h2:nth-of-type(even):before {
    left: -10px;
    border-left-color: transparent;
    border-right-color:...

JavaScript

function addBannerOrRibbon(bannerOrRibbon, bannerOrRibbonDivOrH1H2, bannerOrRibbonText, bannerOrRibbonColor) {
    if (bannerOrRibbonDivOrH1H2 == "div") {
        var bannerOrRibbonElement = document.createElement("div");
        if (bannerOrRibbon == "banner") {
            bannerOrRibbonElement.className = "banner " + bannerOrRibbonColor;
        } else if (bannerOrRibbon == "ribbon") {
            bannerOrRibbonElement.className = "ribbon " + bannerOrRibbonColor;
        }
    } else if (bannerOrRibbonDivOrH1H2 == "h1h2") {
        if (bannerOrRibbon == "banner") {
            bannerOrRibbonElement = document.createElement("h1");
        } else if (bannerOrRibbon == "ribbon") {
            bannerOrRibbonElement = document.createElement("h2");
        }
    }
    bannerOrRibbonElement.innerHTML = bannerOrRibbonText;
    document.body.appendChild(bannerOrRibbonElement);
}