Comments!
Comments are now enabled. Feel free to comment.
Comments are now enabled. Feel free to comment.
I found this great looking semitransparent WordPress theme called Aeros. It came with a background picture of flowers, but I like the picture of the NGC 3576 Nebula better. Surprisingly, it made the ads semitransparent with no extra work, and after tweaking the CSS, rounded corners work in most browsers. IE6 will probably have issues with the transparency, but I don’t have it installed, so I can’t test it. If you are still using IE6, you need to upgrade.
The biggest problem is the size of the background image. Right now, it is about 500kb, which is larger than I want. The default image was much smaller since it was blurred, so they could use more jpeg compression without making it look bad. I could reduce the number of pixels, but that would mean people with very high resolution screens will see a blue bar at the side and/or bottom.
Another issue is that all images end up semitransparent, but that should be easy enough to fix in CSS.
I have been using this code for the navigation on my home page for a long time, so I figured I might as well share it since it works well and it is easy to update. I don’t remember where I got the code from, otherwise I would cite a source.
To start with, create a simple HTML list with each link:
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="./blog/">Blog</a></li>
<li><a href="./gallery2/">Photos</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Other Stuff</a></li>
</ul>
It’s kid of ugly like that–a bulleted list with blue links, but it can be styled with CSS. First, let’s make it look less like a bulleted list:
.nav ul {
margin:0;
padding:0;
list-style:none;
text-align:center;
}
Now make the links look like plain text:
.nav a {
text-decoration:none;
color:#000000;
font-size:95%;
display:table-cell;
height:24px;
width:90px;
padding-top:5px;
}
Now comes the interesting part–adding background images:
.nav li{
padding:0;
text-align:center;
width:90px;
height:24px;
background:url("images/inactive.png")
no-repeat center left;
margin-top:1px;
}
.nav li:hover {
padding:0;
text-align:center;
width:90px;
height:24px;
background:url("images/mouseover.png")
no-repeat center left;
}
The real benefit to using this code is how easy it is to maintain. Need to add a button? 10 seconds in notepad and you are done, no need for Photoshop. Want to change the look? Just replace the images. It will also work in browsers that don’t even display images, like Lynx, or my http-over-sms forwarder.
I have some compressed air sitting around that I have to get rid of, so I thought it would be fun to see if it could fill a balloon. It tuns out that it can, with a surprising effect. As I mentioned in the title, “compressed air” is not actually air, but difluoroethane. At room temperature, it is a gas about twice as dense as air. That means if you fill a balloon with it, instead of falling gently to the round like a normal air-filed balloon, it falls like a lead balloon! The effect is quite entertaining. Trying to keep a balloon in the air is much more difficult with a difluoroethane filled balloon than with an air-filled balloon, and people who haven’t seen it before will almost always be suprised when they see a balloon fall so fast.
Note: Do not inhale difluoroethane.
Friday, March 14th (3.14) is Pi Day! To celebrate, why not download a billion (1,000,000,000) digits of pi?
Download Pi