The above question is one I've gotten in my logs a couple of times. I don't actually answer it anywhere on the site, so I figured I might as well answer it here. For some strange reason, in my mellowed old age, I'm all about helping and I haven't written about web technologies in about a month, so it can't hurt.
(more…)
I've used this technique several times and I'm actually using it prominently in a UI component that I'm working on right now. I'll have a lot more on that at a later date (plenty to write about with that piece:)) and I'll actually have more on the potential pitfalls of this technique as well. This post is just the basics.
Anyway, this technique works in everything that browsercam offers other than the following unsupported browsers:
All things considered, that's really pretty good coverage. So, if you've been dying to get some variable opacity into your life and you want to apply it to an arbitrary element, then this is your post.
Okay… enough with the intro. Here's a sample:
And here's the code for the sample page (all of it.) The important bits are in bold and the comments should explain all there is to know about the technique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>opacity sample</title>
<style type="text/css">
.seventy-percent {
color:white;
background-color:#336699;
position:absolute;
width:225px;
height:225px;
/*here's the CSS3 standard method. this works in everything* but IE. */
/*It's in fractions of 1. So 1 is 100% opacity (AKA the default) and .5 is 50% opacity.*/
opacity:.7;
top:20px;
left:20px;
padding:10px;
}
body {
background:url(http://www.drunkenfist.com/web/samples/transparency/bg.jpg)
}
h1 {
margin-top:75px;
}
</style>
<!-- and now I use conditional comments to slide in the IE specific code.
Since every other browser thinks this is just a comment it keeps all the evil IE-ness
away from other browsers.
-->
<!--[if gte IE 5]>
<style type="text/css">
.seventy-percent {
/*It's a 100 scale. So 100 is 100% opacity (AKA the default) and 50 is 50% opacity.
The worst part of this is not the CSS issues, since this sort of forking is common.
It's coding opacity in Javascript. You always
have to make some second calculation to
make things match across browsers
*/
filter:alpha(opacity=70);
}
</style><![endif]-->
</head>
<body>
<div class="seventy-percent"> This is a div with seventy percent opacity </div>
<h1>This is some text in the background</h1>
</body>
</html>
*everything but the previously named browsers, that is…
I bought a new domain a few months ago. In case you were wondering why, it's really one of those "just in case" kind of things* and I don't expect to do much with it. That said, I've been hoping to get it up in some reasonable shape so that it can start to get spidered and maybe a few pennies a day off of Adsense clicks.
Anyway, the point of this is not the domain so much, as it's not actually "launched" just yet.** The actual point of this is the goofy things I'm trying to do with the :first-letter pseudo element.
(more…)
Here's a little script (and some CSS) that turns an entire block (in this case a TR) into a click-able item:
(more…)
(I wrote this post at my old job. Since IE6 will be around for some time to come, the techniques in use here are still useful going forward as more and more designers are going to want to use Transparent PNGs in their designs. I'm going to add onto this article at some point in the near future to fully flesh out all the possibilities. See PART 2 of this article)
(more…)