overlay using gradient, white text

by hrabinowitz

HTML

<p>
// This color scheme is attempt to generate an unlimited set of colors that will be // visually distinguishable. Trouble is, they seem to repeat too often. // We start with a set of easily distinguished colors from various sources. // Problem is we want fairly dark, saturated colors so they are easily distinguishable from gray, when rolling over the key. // from lisa, from http://www.perceptualedge.com/articles/b-eye/choosing_colors.pdf, also from kuler function getReportSeconds(){ var reportLengthSecs; var durationMins = $duration.val(); if (durationMins == -1) { // User has requested "custom" duration: use start, end dates to calculate. var endDate = Date.parse($endDate.val()); var startDate = Date.parse($startDate.val()); if (!isNaN(endDate) && !isNaN(startDate)) { // return the difference in seconds reportLengthSecs = endDate/1000 - startDate/1000; } else { // error //console.log("getReportLengthSecs(): ERROR: start or end date is invalid"); reportLengthSecs = 0; } } else { // use duration reportLengthSecs = parseInt(durationMins) * 60; } //console.log("getReportSeconds(): reportLengthSecs=", reportLengthSecs); return reportLengthSecs; }
</p>

<div class="overlayBackground">BG
    <p class="overlay">This is overlay data.</p>
</div>

CSS

body {
    background-color: orange
}
.overlay {
    position: absolute; 
    top: 200px;
    left: 10px;
    color: white;
    z-index: 10;
    font-family: sans-serif;
}
.overlayBackground {
    position:absolute;
    top: 20px;
    left: 0px;
    /*background-color: rgba(0, 0, 0, .5);*/
    height: 75%;
    width: 100%;
    z-index: 5;
    background: -moz-linear-gradient(top, rgba(70,70,70,0.3), rgba(70,70,70, 1));
    background: -webkit-linear-gradient(top, rgba(70,70,70,.3), rgba(70,70,70, 1));
}