Archive for September, 2006

Revisiting CSS Sprites Part 1

Wednesday, September 20th, 2006

What are CSS sprites? CSS sprites is a term used to create a single image file that contains all the images, usually in a navigation, laid out in a grid, using only a single server call, with roughly the same file size as using sliced images. You will have to place all the “sprites” that makes up your navigation in a an image divided by a grid.

To show the sprites or the navigation items correctly, the background position must be set using a stylesheet. Usually, a negative value is used to move the background up or down.

Let me give you an example that I’ve prepared for this tutorial.

Sprite

For the image above, you can see that I’ve layout a 4 item navigation menu. The normal states for the buttons are located on the upper side of the image and the hover states are located at the lower area of the image. So how do we convert this into a killer navigation? It was just a few years ago when we used, javascript for rollover effects. That was the dinosaur era when we had slow internet connection, yet we have tons of images to load. Using a CSS sprite, it takes only one image to load and once it is loaded, you could see the effects right away.

View the sprite menu demo.

Using an unordered list tag for the navigation, we assign unique IDs for each of the list items. Please check out my code example below:

<ul id="spritemenu">
<li id="sprite1"><a href="#">Home</a></li>
<li id="sprite2"><a href="#">About</a></li>
<li id="sprite3"><a href="#">Links</a></li>
<li id="sprite4"><a href="#">Contact</a></li>
</ul>

This is what your navigation should look like. I’m not forcing you to use an unordered list for your menu but you can also write the code using a div and have nested divs inside for each item.

Now for the CSS file, let’s lay it down one by one.

*{
margin: 0;
padding: 0;
}

So what is this code for? I actually always place this set of codes on top mo my CSS file to reset all the paddings and margins to zero. Each browser has a different default margin and padding so to make it the same for all browsers, we need this one. Well this is just based from my experience and I find it very important but I hope you guys find it useful too.

We’re done with that, now lets go to the next set of codes. Let’s define the style for the unordered list:


ul#spritemenu{
width: 400px;
height: 30px;
background: url(sprite.png) top left no-repeat;
}

I’ll explain to you each line of code very carefully. We define the width according to the width of the background image or to whichever width you want to achieve. After that, we define the height which is 30 pixels high. We don’t want to show the whole image so we just showed only half of the image - in this case we are showing the normal state. Now, for the last line, we defined a background image which is for the example, we used sprite.png and we positioned it on topmost of the container and stuck to the left edge. We used no repeat so the container shall render the background only once.

Let’s define the stlyle for a single list item. We use the code:


ul#spritemenu li{
float: left;
display: inline; /*This line is needed to fix the double-margin bug floats in IE*/
}

We used float: left; so the items on the list will position itself horizontally. The next line of code, display:inline; is actually a fix for the IE double-margin float bug. Don’t forget to include that. Let’s get going to the next set of codes.


ul#spritemenu li a{
display: block;
width: 100px;
height: 30px;
text-indent: -9999px;
}

The code above defines the property of each of the a element in each li. The first line, display:block; makes the a a block container and is very important for the sprite nav menu. We need to make it a block element so we could define a fixed height and width for it and render it on the browser correctly. For the last line of code, text-indent: -9999px;, this is used to hide the original text. It’s actually a technique for image-replacement but I forgot what it’s called. So let’s move on.


ul#spritemenu li a:hover{
background-image: url(sprite.png);
}

Now this one is the code that will give your hover state a different face and a neat effect. You will notice that it’s the same background image we’ve used for the ul tag. Well yes it is. We used the same image because we are talking about sprites here. We are utilizing a single image for a very neat effect.

The next lines of codes are the ones that will trigger the hover, rollover, or upstate… whatever you wanna call it. So here we go:

li#sprite1 a{
background-position: 0 -30px;
}
li#sprite2 a{
background-position: -100px -30px;
}
li#sprite3 a{
background-position: -200px -30px;
}
li#sprite4 a{
background-position: -300px -30px;
}

Have you noticed that the second value for the background-position for each set of unique li is constant? That’s because -30px is the top position of the image. Why -30px? Well if you examine the image carefully, it has a height of 60pixels. the -30 px position actually shifts the image upwards and just showing the part of the image 30px below the original 60 px image. I hope you guys get it because I’m really not good explaining. For the first value of the background-position property, it’s the x-axis position of the image. For the first li, we used zero because the location of the sprite is zero relative to the original image. For the second image, we used -100px because the button or nav grid is 100px in width. The image I made has equal 100 px button grids so it’s relatively easy to position them. Once you master the technique, you can use different widths for the list items.

Well, that’s it for the first part of my tutorial. I hope you guys learned something. This is my very first tutorial so I hope you enjoyed it and I hope you can use it for your websites.

For your convenience, you can download the files I’ve used in for the tutorial.

Transformers Movie: Totally Transformed Down

Saturday, September 9th, 2006

I know you guys have already heard about the upcoming Transformers movie next year. If you haven’t seen the trailer yet, you can watch it on the official Transformers movie website or at YouTube. The Transformers movie trailer shows a rover that was launched to Mars in 2003 that sent transmissions back to earth showing lifeforms or more like robot-life forms in Mars. At first, I was excited but then I realized that my favorite robots as a child, the Transformers, were not from Mars. Once you’ve seen the trailer, you’ve probably never want to see it again as it sucks. Well, if you don’t believe me, read the comments about the Transformers trailer at YouTube.

So who is responsible for the movie? It’s no other than director Michael Bay. The man responsible for blowing up good movie titles like Pearl Harbor. I don’t really know anything about Michael Bay but what I know is that he is one of the most hated directors. Well, probably because some song in Team America has this funny lyrics about Michael Bay’s Pearl Harbor movie. Here it goes. You can sing it if you know the Tune.

I miss you more than Michael Bay missed the mark,
When he made Pearl Harbor.
I miss you more then that movie missed the point,
And that’s an awful lot girl.
And now, now you’ve gone away,
And all I’m trying to say,
Is Pearl Harbor sucked and I miss you

BumblebeeI was just hoping that Michael Bay wouldn’t again blow up the Transformers movie but I guess my hopes just deteriorated instantly. I just came across SERVE with CHIPS, a blog, showing photos of some of the characters in the Transformers movie. I was very disappointed when I saw what they did to Megatron. Why can’t they just design the Transformers just the way they should look in the original animation? Even Bumblebee is not a Beetle anymore but instead a Camaro. Even Optimus Prime doesn’t look like the original one. They have just over-designed the robots.

What is excessive is dangerous and that saying too, goes for the movie. They should have kept the robots’ original appearance. Why am I against this? It’s not that I can’t accept change but the truth is I love the Transformers and changing their looks in major ways makes me just wanna despise the upcoming movie. But I’m not totally gonna hate it right away. It’s still in the works and maybe, just maybe they will realize that the Transformers should look how they really look.

But then again, I just wish Spielberg should have just directed the movie.

Update: I made this post a year before the movie was released so before you leave a comment saying how stupid I am for this review (well this isn’t actually a review), I’d like you guys to know that I’ve seen the movie and my god, here’s my reaction to the movie.

Dancing with the Blade

Thursday, September 7th, 2006

What is stylemo? Stylemo is supposed to be my portfolio and blog site. I also have a plan to make this one a development site for templates. But I guess I don’t have enough time right now.

I was supposed to have this redesigned a month ago but due to a lot of projects coming in, I guess it does have to wait. So what other things aside from Web development and design projects makes me busy? Well, from my previous post, I’ve told the whole blogosphere about the new PSP that I bought. So what am i using it for?

Everyday I bring it with me while I’m on my way to work so I could listen to my MP3s. I’ve got a whole bunch of them. I’ve currently got System of A Down, My Chemical Romance, Tenacious D, Fingur and Dicta License on my PSP right now. When I get tired of listening to music, I switch to the photo viewer and read PSP formatted comics and magazines which I downloaded from PSPmagazines.com. I’ve got NYC2123 - Dayender issues 1 to 6 and Super Spy. I’ve got a few FHM copies too.

Well anyway, what I’m really doing right now with my PSP is that I’m playing this really good RPG that my girlfriend just gave me. It’s called Blade Dancer: Lineage of Light. It’s about a young warrior named Lance who has travelled seeking for martial training and discovers an awakened evil from the depths of history. When I first loaded the game, I was stunned at the amazing anime introduction movie. Well, I’m a fan of anime but I’m really not obsessed with it. I just happen to like anime.

Blade DancerWhat can I say about Blade Dancer? Blade Dancer: Lineage of Light is an RPG developed by Hitmaker. The overall graphics of the game is actually amazing. For me, it has better graphics than that of Final Fantasy VIII on the PSOne. The controls is a little bit not too easy. What I mean is when you go into battle, after your first party member has made his move you still have to direct the cursor to the next character. I just think that the control cursor should automatically move to the other party member. What I like about the game is the Luna Abilities which is a very Vital part of the game. It’s a special attack which you can only use when you have enough Lunar Points. You can check out the Lunar Points through the Lunar Guage which only increases when you make or receive a normal attack. The battle system is a little bit complicated at the start but once you get the hand of it, it’s easy as eating a pie. When you are exploring in a field, you can see the enemies roaming unlike in Final Fantasy VIII which you don’t see the monsters but you always get into random battles. In Blade Dancer, you can run away from enemies. It’s a good thing especially if you don’t wanna attack those monsters. What I really don’t like about the game is that you have to have many weapons because each time you use a weapon, it degrades. When you’ve used it excessively and breaks up. The weapons actually has a life meter too. You also get limited slots for the weapons and items. One more cool thing that adds to the challenge here is the side missions. There are actually a lot of missions you could do. When you get in towns, talk to all the people and they will give you good and challenging missions. The best part of it are the rewards you get from these completed missions.

What are the levels of my characters in Blade Dancer right now? My characters level averages from level 24 to level28. So where am I in the game right now? I’ve currently surpassed the scene where Goran releases the Dark Lord. I have all the characters in my party right now. The game is kinda frustrating sometimes because my weapons break fast. Well, that’s because I use them a lot. Good thing I have them appraised so that I can rebuild them again.

Well, I’m off to bed now or maybe not. Just typing these words make me grab my PSP and get into the game again. Well, when I get into the middle of the game I will blog about it again and tell you how I got there. Or maybe I should try writing a walkthrough? Nah. i don’t have time. I’m too busy. Maybe when I beat the game. If anybody out there has already beat the game, please give me some tips.