CSS3 Title Banner Lozenges with opacity to work with any background color

CSS3 Title Banner Lozenges with opacity to work with any background color

by Andrew Pougher

HTML

<div class="container">
<div class="ttlbox">
<div class="box-shadow"></div>
<div class="box-gradient">UPLOAD YOUR LOGO</div>
</div>
<div class="ttlbox">
<div class="pagetitle">Upload your logo</div>
</div>
</div>

CSS

.container, body {
    background:blue;
        -webkit-transition: background 1.0s ease-in-out;
        -moz-transition:    background 1.0s ease-in-out;
        -ms-transition:     background 1.0s ease-in-out;
        transition:         background 1.0s ease-in-out;
}
.orange {
    background:#fc3cc1;
}
.ttlbox {
    position:relative;
    max-width:400px;
    min-height:50px;
    margin:100px auto 0 auto;
}
.box-gradient {
    font-family:arial;
    line-height:50px;
    position:absolute;
    text-align:center;
    font-size: 33px;
    font-weight: 800;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.3);
    width:100%;
    height:100%;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(0, 0, 0, 0.5) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(51%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.5)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(0, 0, 0, 0.5) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(0, 0, 0, 0.5) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(0, 0, 0, 0.5) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(0, 0, 0, 0.5) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000',...

JavaScript

var backgroundInterval = setInterval(function () {
    $(".container, body").toggleClass("orange");
}, 1000)