/mike

While I was mulling through my feeds tonight I saw a link to Dave Shea’s CSS Sprites2 article on A List Apart. To be honest, I haven’t actually read it — though I will soon, promise — but seeing the examples put a bug in my brain. Maybe those effects could be done with CSS3 transitions/animations.

So, I threw together a quick little navigation list and went to work putting some basic styles on it — nothing nearly as fancy as Dave did. What I wanted to do is use -webkit-gradient for a background color, then use -webkit-transition to fade or slide in a different color or background.

Unfortunately this version of the test failed. It would seem that there is no way to transition a -webkit-gradient using -webkit-transition. If I’m wrong, please let me know.

Here’s what I did find out:

• background: -webkit-gradient(...); won’t transition to another background: -webkit-gradient(...); (using -webkit-transition: background 0.3s linear;)
• You can transition an element from -webkit-gradient to a background-color (using -webkit-transition: background-color 0.3s linear;)
• You cannot transition an element from background-color to background: -webkit-gradient; (using either -webkit-transition: background 0.3s linear; or -webkit-transition: background-color 0.3s linear;)
• Transitioning multiple properties — at least in this case — background-color and color the long hand of -webkit-transition needs to be used (-webkit-transition-property: background-color, color; -webkit-transition-duration: 0.3s, 0.3s; -webkit-transition-timing-function: linear, linear;)

Check it out for yourself using this code:

<style type="text/css" media="screen">
ul#nav { float: left; list-style: none outside; width: 100%; }
ul#nav li { border-right: 1px solid; float: left; width: 24.75%; }
ul#nav li.last { border: none; }
ul#nav li a {
	/* background-color: #08c; */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,50,100,0.6)), to(rgba(40,70,150,0.6)), color-stop(0.5,rgba(30,60,125,0.6)));
	color: #000;
	display: block;
	line-height: 2;
	text-align: center;
	width: 100%;
}
ul#nav li a:hover {
	background-color: #c80;
	/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(40,70,150,1)), to(rgba(20,50,100,1)), color-stop(0.5,rgba(30,60,125,1))); */
	color: #fff;
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: 0.7s, 0.3s;
	-webkit-transition-timing-function: linear;
}
</style>
<ul id="nav">
	<li id="home"><a href="#">Home</a></li>
	<li id="projects"><a href="#">Projects</a></li>
	<li id="blog"><a href="#">Blog</a></li>
	<li id="misc" class="last"><a href="#">Misc</a></li>
</ul>

What it looks like (best viewed in the latest version of Webkit or Safari):

• Home
• Projects
• Blog
• Misc

Today I wanted to spruce up a site design with a nicer typeface. I also wanted to stay away from image replacement techniques and sIFR, which makes the job that much harder. Obviously the major problem is what typeface can I use that will be constant on both Windows and Mac — the majority audience is on Windows so I can’t even make a case for degradation or alternates. The solution, Myriad Pro.

Myriad Pro, created and licensed by Adobe, has been on default Mac OS installs for years. After some searching around the internets — read: Wikipedia — I found that Myriad Pro has been bundled with Adobe Reader since version 7. Perfect right? No. Not perfect at all.

After installing Adobe Reader on my vanilla Windows Vista test system, I was still unable to view Myriad Pro on a web page by using the following CSS declaration:

#container h2 { font-family: "Myriad", "Myriad Pro", "MyriadPro", "MyriadPro-Regular", sans-serif; }

Adding in other variations of the name didn’t help. Both Firefox and Internet Explorer would only show the default sans-serif typeface for the headline. I searched for a solution on Google. I even searched for a solution on Live Search. I pinged a few friends. Nobody seemed to have an answer, it should just work.

So I twittered this. Unfortunately there were no new ideas. Needless to say, this frustrated and confused me even more.

I found it weird that Adobe put the Myriad typeface into a different location than the rest of the system fonts but didn’t know how to deduce if that was the problem. Adobe installs Myriad Pro into: Z:\Library\Fonts. As I later found out, this is the problem.

It turns out that software developers can install fonts almost wherever they want, to allow the font to be used by the software being installed. The problem is, the rest of the system cannot access that font, unless it’s put into C:\Windows\Fonts. GAAAHH!!

Seriously Adobe?! Just make the damn font available to the rest of the system. What have you got to lose? Oh darn, people will have more choices for web typography? Heavens to merkatroids, that would be catastrophic wouldn’t it.

Adobe, you suck. Still.

After forcing myself, and being encouraged by others, I’m proud to report that I’ve successfully made it to the gym 8 out of 11 times in the last two weeks. I’d say this is a pretty good start on this portion of my yo-yo trip to a healthier lifestyle.

In case you’re curious, here’s a short list of positive changes/steps I’ve taken so far:

• Working out 6 times/week (3 days of weights, 3 days of cardio)
• Eating smaller meals but eating more often (shooting for 6 small meals a day)
• Taking probiotics to aid digestion and help clean out the gunk
• Eating more vegetables, fish, and chicken (I even bought a veggie steamer!)
• Doing my best to get to bed before midnight

I still haven’t taken any metrics so I can’t tell how much physical progress I’ve made so far but that’s the next step. Mentally I’m feeling much better. I have more energy and I only have muscle soreness about 4 days a week. :)

It seems that I’ve written a decent amount about getting fit or getting healthy over the past couple years. Sometimes I stick with it and give regular updates, other times not so much. Whether that’s procrastination or a problem with motivation, I’m not sure.

As Van Halen once put it so elegantly, here I go again. With a little added pressure from some friends at work and some encouragement from some friends not at work, I’m hoping that it’s going to stick this time around.

And just how am I going to make some healthy changes in my life? Here’s a list. Feel free to call me out if I’m straying from this list around you.

• Eating more fruits and vegetables (with help from spud.com)
• Taking it easy on the drinking (not that this is a problem most of the time)
• Taking antioxidants and/or daily vitamins
• Drinking more water
• Lifting weights 3 times a week
• Doing cardio 3 times a week
• Eating less red meat and more fish
• Eating smaller meals and doing so more often

I’m really looking forward to being more fit, having more energy, and having a better overall outlook on life. Updates about gym routines, exercises, progress, and goals will be coming in the future.

This is partly a reminder to myself and partly a note to the community as a whole. Ever since I set up screenflicker.com to use Google Apps for email I’ve not been able to receive emails sent from my WordPress install. After doing loads of searches and double or triple checking all my WP settings, I hadn’t found a solution. Until now.

One of my searches for answers included searching the WP support forums. I found this topic that seemed promising. It still didn’t spell out the solution I needed though, until tyr responded to my query.

tyr is using a (mt) Grid Server and discovered that in order to receive the WP comment notifications he needed to turn off email in his control panel.

Since I’m using a (dv) 3 Server from (mt) and hosting multiple domains/sites, the steps are a little different. Here’s what I had to do:

• Log into my Plesk admin interface
• Select the domain area of the admin (and subsequently select the appropriate domain)
• Under the “Services” list, click on “Mail”
• In the “Mail” screen, click “Switch Off”

Bingo, bango, bongo. After a quick test comment on an old post I was in business. Now my Google hosted email can receive all the comment spam-y goodness that comes with having a blog.