Up until about six months ago, I always preferred to make all of my buttons in Photoshop. (You'll notice this on mcmelectronics.com)I was able to get them to look exactly how I wanted them to; no variations in size or of the font.
Recently, with a little inspiration, I decided to go ahead and take a stab at recreating the buttons that we use on our main site. Once complete, this will mean that I don't have to create 50+ buttons for each site we do, and our front end guys don't have to wait for me to build new buttons when needed, they will have the styles needed at hand. Sure, it wont be identical to the PS version, but it will be close.
Here is a sample button from a step in the checkout process.
So, the first thing I did was to go to my original .psd and created images to use for the left and right sides of my button, similarly to the tutorials over at dynamicdrive.com.
Tips: Make sure to make the right side of your image long enough to cover any phrase that will be used (and then some). Save them as gifs with transparent backgrounds, or pngs so that they can be used on any background.
Now that we have the images ready and saved, lets start in on the CSS.
/***********************************************************
Author: Christian Moist, May 21, 2008
Bits For Regular Buttons
***********************************************************/
a.grnbutton{
background: transparent url('roundedge-grn-left.gif')
no-repeat top left;
display: block;
float: left;
font: 900 11px Arial;
line-height: 14px;
height: 20px;
padding-left: 6px;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
}
a.grnbutton span{
background: transparent url('roundedge-grn-right.gif')
no-repeat top right;
display: block;
padding: 3px 8px 3px 3px;
color: #FFFFFF;
}
Now to create the HTML. Essentially we are going to create a regular link and give it a class of 'grnbutton', but by looking at the code above, this will only give you the left half of the image we created earlier. To bring in the right half, we need to add <span> tags around the content of the word.
In all the HTML should look something like this.
<a href="#" class="grnbutton"><span>Continue</span></a>
Notice it doesn't matter if the word 'continue' is uppercase, lowercase, or a combination of the two because we have 'text-transform: uppercase;' in the CSS above.
If we try this out in a browser, we will get:
Continue.
There you have it. This has been tested in IE7 and FF, and should work in other major browsers without a problem. Next, I'll talk about creating input buttons to match.
Labels: CSS, Web Development
I found out about RescueTime about a week ago from one of the blogs I came across (If I remember the name, I'll update), so I thought I'd give it a shot yesterday. RescueTime is a program that keeps track of your productivity at work or home and it's FREE!
It works like this. Visit RescueTime.com, create an account and download the software, then install it on your computer. They will have you test your connection to verify you can indeed communicate with them. Once connected, RescueTime will begin to pay attention to the programs you use.
After a bit, RescueTime populates cool flash charts on your dashboard. Label or tag programs that it sees you have been using with keywords like 'work', 'personal', 'development' or 'coding' to enhance the program's ability to track and categorize your work for the day. Add a weight to each tag to communicate how productive each is (from -2 for personal email to +2 for hardcore development). Once all of this data is populated, the results get very interesting and eye opening. Each time you use a new program that RescueTime has not seen, you will have the opportunity to tag it.
RescueTime allows users to set goals as well. For example, one of my goals is to work more than 6 hours a day, while keeping non work activities under an hour. So far so good.
All this being said, you must be honest with yourself and the program in order to get honest results. You could weight every keyword to the maximum value and look like a hero, but that would sort of defeat the purpose of using the program. To ensure you get valid tracking for say, work only, RescueTime allows itself to suspend tracking for lunch or playing on your laptop at home.
As stated above, the program is free for individual users, but costs for businesses and groups. I recommend giving it a shot if you are interested in improving performance at work.
Labels: Nerdy Stuff, Programs
RSS isn't anything new. It's been around for some time now and by all means, an RSS reader can be a very useful tool. In fact I've done 'lunch and learns' to educate others about RSS, what it is, what it can do and how it can help you.
The premise is this. RSS is an XML feed that is produced dynamically (typically) by your favorite site. You subscribe to this feed via your favorite RSS reader and the stories/news come to you. It's kind of like getting mail. You don't have to go out and get news from your favorite site each day; the news is spoonfed to you in a non fancy sort of way. You get updates as your favorite site's feed gets updated.
That being said, I get a bit tired of looking at the blandness of a typical RSS feed. Sure there are occasionally pics and some basic HTML in the feeds, but nothing is quite like taking in all the features (and ads, dare I say it) of an actual site or blog. As of right now, I subscribe to some 15 feeds (using FeedReader) and none of them implement any real marketing. I know...'real simple syndication', yada yada, but someone has to implement this eventually. It will be interesting to see what develops in the way of marketing with RSS feeds in the future.
Labels: Marketing, RSS
Let me start off by saying I've worked pretty much exclusively on a computer since I left high school. As a result, my handwriting isn't what it used to be.
I was turned on to a good idea by a friend; create a font of my handwriting. They pointed me to FontCreator by the folks over at high-logic.com. A free trial last 30 days and is enough to get your hands dirty. Additionally, there is tons of support on the web about the steps involved in the process of creating a font. Now I'm able to simply type out my letter, fill in my form etc and print it out. The result is essentially the same as if I were to write it all out myself.
So here is a preview of my handwriting, for better or for worse.
If you actually find my handwriting legible and want to give it a try, download the .ttf file here.
Labels: Fonts, Gadgets, Programs
This is all for personal use...nothing to see here.
| Date | Alexa Rank | Google Page Rank | Google Pages Indexed | Google Incoming Links |
|---|
| 3/13/09 | 608,552 | 0 | 113 | 1 |