Archive for December, 2006
Music to program to
I am a huge fan of Digitally Imported. There is just nothing like a constant stream of really good techno, trance, etc… to keep me in the “zone” for extended periods of time. That is why I provide you all with this lovely advertisement. No, I am not getting paid to say it. My buddy Mark, who is also a programmer has admitted to listening to DI.fm when he codes as well. So I think it is a matter of public service for me to be informing the uninformed about DI.fm. Here is a lovely banner ad:
Awesome YouTube Video
I saw that this video was recently Slashdot-ed. Check it out! http://www.youtube.com/watch?v=JzqumbhfxRo. Remember this guy does not know how to play either instrument!
He was basically just messing around recording him self hitting the drums and playing notes on the piano. The audio was spliced together in FruityLoops and then the video sequenced back in. None of the audio was changed except for the timing. It is truly a nice work of art ;) The song is pretty sweet too!
Intel Threrading
I was getting my daily fill of Slashdot when a typo in an ad caught my eye. This rant is about that typo. Read on if you dare…
The ad in question is a flash advertisement for Intel’s line of software development tools. Mainly those which aid in the creation of multi-threaded applications. Which are only helpful to those with multiple cores and/or processors. The part with the typo is displayed in the image below.
I find this absolutely hilarious because more and more I notice that there are people who work with computers every day of their lives and depend on them so much that they’d be unable to make any money without them. Yet many such people don’t know a thing about them other than how to use certain applications. Many years ago you had to really know what you were doing to be able to call your “work” computers. Nowadays just about anyone can call them their business.
Personally I wouldn’t have even seen that ad unless it had the typo in it. So maybe they were actually using their heads. That is a smart tactic. Clientele who know their trade would spot that typo with their heads buried in a C# book or Java Manual. So this could be what the advertisement creator was thinking. Though if I were an Intel exec. in charge of this advertisement I would have been just a bit wary of trying such tactics in such a wide-reaching ad.
Perhaps what I’ve done is actually illustrated their “unconventional” marketing tactics. I’m just sad that I can’t use that tactic. The kind of clientele I look for are those who can’t program web sites. Or maybe they can’t program their VCRs. Either way I felt the need to rant about it for some reason. Hopefully you have enjoyed following my 4:30am thought process.
CSS Button Beautification - A guide to styling HTML button inputs with CSS
Edit 2008/10/22 - Unfortunately, during the update from the older version of WordPress, the styles do not seem to be working on this post. Some day I might change the page to use images, but I doubt I’ll get to it. The code should still work, though.
A colleague of mine wanted to know how he could turn a nicely styled link into a submit button or if it was even possible. Surely you’ve seen all of those “buttons” out there on the interweb. If you haven’t seen one, then you are missing out. </sarcasm> As it is likely that there are some that may be confused as to what I’m talking about I’ll SHOW you.
Now that we’re all on the same page, I’ll begin to explain how to make them match your color scheme and even add some class to your website. (CSS pun intended) Since not all inputs are buttons, we’ll need a more specific way to target our button with CSS. Classes are a big part of CSS. The entire
idea of a class is what it means to be “Cascading style sheets”. Almost all HTML elements accept an attribute called class. Classes can be used to target groups of elements with the same style rule(s). Like I
mentioned we need to target our input so that we can be sure it is a button and not maybe a text box. To apply a class to an element you would add class=”classname” to your HTML element. In this case that would be the input. Here is an example.
<form action="#" method="post">
<input type="button" class="MyButton1"
value="This is what I'm talking about." />
</form>
Unless you already have a style rule for the class “MyButton1” adding the class attribute should have
done nothing to your input. In order to beautify this button we need to have a little knowledge on how to use CSS. In CSS you must target an element or group of elements. CSS uses selectors to do this. A selector could be an element tag name, class, or id. Obviously the id must be an unique string. I say string because ids and classes cannot start with a number. Some browsers will style all similarly IDed
elements if you have two or more. However, this is an extremely bad practice and will likely jack up any Javascript attempting to reference any such ID. Styling the element. I’m sure you want to see the meat of this article already, so here it is. We need to first ensure that we’re targeting the correct element. For this we’ll use a tag name selection in conjunction with the class selector. Example:
input.MyButton1 {
}
The input is the tagname selector. To add selectors to each other makes the selection more specific. Classes are selected by placing a “.” before the name. Classnames and IDs are case sensitive, so be careful. It is always a good idea to just assume that things ARE case sensitive, because if they aren’t then it will work fine anyway. Next we address the font face size and color of our button. font declarations can be joined together in shorthand, which is my preferred method, to assign a complete font style. We will add the line:
font: normal 14px arial, helevetica, sans-serif;
‘Normal’ is the font-weight property value. 14px is the value of our font-size, which can be expanded to be font-size/line-height. For example: 12px/16px. Which leaves: arial, helevetica, sans-serif; our font-family declaration.
input.MyButton1 {
font: normal 14px arial, helevetica,
sans-serif;
}
Next thing to add is our font color. To do this we’ll use the color property. The value for this can come in many different styles. You can use the standardized color names. Example: blue, black, green, white, red, brown, etc. You can also use the hexadecimal code for the color. Example: “#FF0000″ = red. Alternatively you could use the RGB values. Example: rgb(###,###,###). For this example we’ll use hexadecimal values.
input.MyButton1 {
font: normal 14px arial, helevetica,
sans-serif;
color: #FF0000;
}
The third item on this list is adding a background color. To add a background color we can use the background-color property of CSS.
input.MyButton1 {
font: normal 14px arial, helevetica,
sans-serif;
color: #FF0000;
background-color: #FFF;
}
Notice the “#FFF”. That is white. #FFF is the same as #FFFFFF. Because each of the pairs (RR|GG|BB) had the same value for each of its two characters, you can simplify it to one for each pair. However if you
had a color code that had 2 pairs that had two characters which were equal, you could not use this technique. Next thing I’d like to demonstrate is the usage of the :hover pseudo class. There are a few
drawbacks to using this beautiful feature. First off, IE (v.5 - v.6) will not recognize the :hover pseudo class on any element but the a tag. Luckily IE v.7 seems to be raising the bar as far as CSS support goes. IE7 participates happily with CSS standards 1 and 2, though some support is still a bit spotty and
therefore will be happy with usage of the :hover pseudo class. Observe:
input.MyButton1 {
font: normal 14px arial, helevetica,
sans-serif;
color: #FF0000;
background-color: #FFF;
}
input.MyButton1:hover {
background-color: #FDCB4D;
color:#000;
}
Now that you know the basics lets get really fancy.
input.MyButton1 {
margin: 0;
padding: 5px 3px 8px 3px;
font-size: 12px;
font-weight: bold;
color: #4F4F4F;
background:#fff
url("http://www.sholsinger.com/images/menu-heading-bg.gif") no-repeat
top left;
text-align: center;
width: 160px;
border: 0;
cursor: pointer;
}
input.MyButton1:hover {
color: #0072FC;
position: relative;
top: -1px;
left: -1px;
}
Now why would someone want to do this? Because it is sexy. You can finally customize your entire website to match. most people may use the <input type=”image”> type for this sort of application. However I prefer to not use <img> inputs as ‘buttons’ whenever possible.