SwGradientBg
INTRODUCTION
Quick test done after swGradientLightbox to try and do a nice background. just like the background of this page... Matter of taste...
FEEDBACK: Comment on post or sign up and go to the forum section: click here
STEP BY STEP
1- CSS: Copy, paste and adapt:
.overlay {
position:absolute;
z-index:-10;
}
.grad-bottom-left {
background:#000;
background:-webkit-gradient( linear, left bottom, right top, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( left bottom, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
.grad-bottom-right {
background:#000;
background:-webkit-gradient( linear, right bottom, left top, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( right bottom, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
.grad-top-left {
background:#000;
background:-webkit-gradient( linear, left top, right bottom, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( left top, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
.grad-top-right {
background:#000;
background:-webkit-gradient( linear, right top, left bottom, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( right top, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
position:absolute;
z-index:-10;
}
.grad-bottom-left {
background:#000;
background:-webkit-gradient( linear, left bottom, right top, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( left bottom, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
.grad-bottom-right {
background:#000;
background:-webkit-gradient( linear, right bottom, left top, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( right bottom, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
.grad-top-left {
background:#000;
background:-webkit-gradient( linear, left top, right bottom, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( left top, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
.grad-top-right {
background:#000;
background:-webkit-gradient( linear, right top, left bottom, color-stop(0.2, rgb(0,0,0)), color-stop(0.4, rgb(100,100,100)) );
background:-moz-linear-gradient( right top, rgb(0,0,0) 20%, rgb(100,100,100) 40% );
filter: alpha(opacity = 70);
opacity: 0.70;
}
2- copy and include the .js files (preferably right before </body>)
<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swGradientBg.js"></script>
<script type="text/javascript" src="js/swGradientBg.js"></script>
3- include this after the lines included in step 2
window.addEvent('domready',function() {
var bg = new swGradientBg();
});
var bg = new swGradientBg();
});