V
VK
Formally it may appertain to a CSS newsgroup, but from the other side
it is *dynamic* plus it is JavaScript based.
Anyway I had a customer who wanted cross-browser full-Aqua (Office XP
style) so I had to hack Opera for it.
This algorithm formally *doesn't* break a single standard, moreover it
works as intended on Opera only (I hope they did not mean *that* as
their official opacity path).
Fill free to use this approach if you need it. (Watch line breaks as
usual).
P.S. I'm currently totally traumatized by transparency, I hate it, hate
it, hate it!
:-|
<html>
<head>
<title>Opera Opacity</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #FFFFFF;
}
#LoremIpsum {
width: 75%;
font: 1.2em "Times New Roman", serif;
}
#div1 {
left: 20px;
top: 20px;
background-color: #3067C0;
}
..floating {
font: bold small-caps 1em "Times New Roman", Times, serif;
margin: 0px 0px;
padding: 5px 5px;
border: 1px #0000FF solid;
position: absolute;
z-index: 1;
height: 100px;
width: 200px;
}
</style>
<script type="text/javascript">
var bgStart = 'url(data:image/png;base64,';
bgStart+= 'iVBORw0KGgoAAAANSUhEUgAAAAoAA';
bgStart+= 'AAKCAYAAACNMs+9AAAAFUlEQVR42mM0SD';
var bgEnd = 'AAAAAElFTkSuQmCC)';
var bgGrade = [
'/wn4EIwDiqkL4KAVbbF2f0aBUI',
'/wjIEIwDiqkL4KAX59Fm2vBnLj',
'9whoEIwDiqkL4KAZ14FWnd9+Mk',
'+wmYEIwDiqkL4KAcUaFG/cP0wP',
'8wk4EIwDiqkL4KAeQVE2sbcbuX',
'9Qz0AEYBxVSF+FAAMfEmebdV9f',
'+QxkAEYBxVSF+FACrBEW0gimmK',
'/gy0AEYBxVSF+FAFJjEHMGT84i',
'9gzEAEYBxVSF+FAHFeD29qarCb',
'8gyUAEYBxVSF+FAJBZDmtRyGAL',
'none'
];
var trueColor = '#3067C0';
function $(id) {
return document.getElementById(id);
}
function init() {
with ($('div1').style) {
backgroundColor = 'transparent';
backgroundRepeat= 'repeat';
backgroundImage = bgStart+bgGrade[0]+bgEnd;
}
}
function demo(n) {
$('div1').style.backgroundImage = (n != 10)?
bgStart+bgGrade[n]+bgEnd : bgGrade[n];
}
window.onload = init;
</script>
</head>
<body>
<p id="LoremIpsum">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> </p>
<form method="POST" action="">
<select name="opacity" onchange="demo(this.selectedIndex)">
<option value="0" selected>opaque</option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
<option value="4">40</option>
<option value="5">50</option>
<option value="6">60</option>
<option value="7">70</option>
<option value="8">80</option>
<option value="9">90</option>
<option value="10">transparent</option>
</select>
</form>
<div id="div1" class="floating">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
it is *dynamic* plus it is JavaScript based.
Anyway I had a customer who wanted cross-browser full-Aqua (Office XP
style) so I had to hack Opera for it.
This algorithm formally *doesn't* break a single standard, moreover it
works as intended on Opera only (I hope they did not mean *that* as
their official opacity path).
Fill free to use this approach if you need it. (Watch line breaks as
usual).
P.S. I'm currently totally traumatized by transparency, I hate it, hate
it, hate it!
:-|
<html>
<head>
<title>Opera Opacity</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #FFFFFF;
}
#LoremIpsum {
width: 75%;
font: 1.2em "Times New Roman", serif;
}
#div1 {
left: 20px;
top: 20px;
background-color: #3067C0;
}
..floating {
font: bold small-caps 1em "Times New Roman", Times, serif;
margin: 0px 0px;
padding: 5px 5px;
border: 1px #0000FF solid;
position: absolute;
z-index: 1;
height: 100px;
width: 200px;
}
</style>
<script type="text/javascript">
var bgStart = 'url(data:image/png;base64,';
bgStart+= 'iVBORw0KGgoAAAANSUhEUgAAAAoAA';
bgStart+= 'AAKCAYAAACNMs+9AAAAFUlEQVR42mM0SD';
var bgEnd = 'AAAAAElFTkSuQmCC)';
var bgGrade = [
'/wn4EIwDiqkL4KAVbbF2f0aBUI',
'/wjIEIwDiqkL4KAX59Fm2vBnLj',
'9whoEIwDiqkL4KAZ14FWnd9+Mk',
'+wmYEIwDiqkL4KAcUaFG/cP0wP',
'8wk4EIwDiqkL4KAeQVE2sbcbuX',
'9Qz0AEYBxVSF+FAAMfEmebdV9f',
'+QxkAEYBxVSF+FACrBEW0gimmK',
'/gy0AEYBxVSF+FAFJjEHMGT84i',
'9gzEAEYBxVSF+FAHFeD29qarCb',
'8gyUAEYBxVSF+FAJBZDmtRyGAL',
'none'
];
var trueColor = '#3067C0';
function $(id) {
return document.getElementById(id);
}
function init() {
with ($('div1').style) {
backgroundColor = 'transparent';
backgroundRepeat= 'repeat';
backgroundImage = bgStart+bgGrade[0]+bgEnd;
}
}
function demo(n) {
$('div1').style.backgroundImage = (n != 10)?
bgStart+bgGrade[n]+bgEnd : bgGrade[n];
}
window.onload = init;
</script>
</head>
<body>
<p id="LoremIpsum">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> </p>
<form method="POST" action="">
<select name="opacity" onchange="demo(this.selectedIndex)">
<option value="0" selected>opaque</option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
<option value="4">40</option>
<option value="5">50</option>
<option value="6">60</option>
<option value="7">70</option>
<option value="8">80</option>
<option value="9">90</option>
<option value="10">transparent</option>
</select>
</form>
<div id="div1" class="floating">
Lorem ipsum dolor sit amet
</div>
</body>
</html>