November 16th, 2008
What are Sprites in CSS?
Simply put when you use “sprites” in CSS it’s a way of using one background image, and then changing it’s position.
Why use Sprites?
It all boils down to load time and efficiency. If you use a sprite for a background for an image, then you cut down on the total file size, and the number of http requests. If you’ve ever seen an Apache server log, you’ll see what I’m talking about. When a client requests a page from a server, the server sends the requested page, and makes requests of its own, on itself. The server requests all the images, each one is a separate http request, and each one gets served separately. A single page could have many http requests.
So, let’s take a look at using a Sprite for a navigation. Here is the Sprite (you can get it, and all the other files needed by downloading the demo files. You can also view the demo.
So let’s look at the code.
The pages look like any other page, the navigation is simply an unordered list, each list item is floated left. We put an ID on the body tag, and a class on the navigation to show the active state, especially if we were looking to put our navigation in an include (which I do). For this little tutorial I’m using HTML pages instead of PHP so you can just open the page in your browser, no server required.
<ul id="mainNav">
<li><a class=”home” href=”index.html”>home</a></li>
<li><a class=”page2″ href=”page2.html”>page 2</a></li>
<li><a class=”page3″ href=”#”>page 3</a></li>
<li><a class=”page4″ href=”#”>page 4</a></li>
<li><a class=”page5″ href=”#”>page 5</a></li>
<li><a class=”page6″ href=”#”>page 6</a></li>
</ul>
So now let’s look at the CSS, which may be the tricky part (though not really). I normally write all my CSS on one line, and you’ll find it that way in the demo, but for readability here, I’ll write it block-style.
#mainNav {
list-style: none;
padding: 0;
margin: 0;
}
#mainNav li {
float: left;
font-size: 20px;
font-family: Verdana, Arial, Sans-Serif;
letter-spacing: -1px;
line-height: 30px;
text-align: center;
}
#mainNav li a, #mainNav li a:visited {
color: #fff;
text-decoration: none;
background: url(’../images/spriteBG.jpg’) 0 top;
width: 130px;
height: 30px;
display: block;
}
#mainNav li a:hover {
color: #fff;
background: url(’../images/spriteBG.jpg’) 260px top;
}
#home li a.home, #page2 li a.page2, #page3 li a.page3, #page4 li a.page4, #page5 li a.page5, #page6 li a.page6 {
color: #600;
background: url(’../images/spriteBG.jpg’) 130px top;
}
The styles look pretty normal for a navigation. But, look at the background. For a link, or a visited link, the position of the background is set for the top and 0. When you hover the button, the background shifts the x position to 260px. And when the link is active (the last style), the background is shifted over 130px.
That’s about it. If you get really creative you can animate your backgrounds with jquery.
Tags: CSS, navigation, Sprites
Posted in CSS | 3 Comments »
November 13th, 2008
Simple Demo
I haven’t played much with the Google Map API, but I’m in need of using it for a project for a construction/commercial leasing company. So, I started playing around with it this morning and found a couple of excellent tutorials. The attached files are a little rough, but this just playing around. The final product is going to simply have variables passed to it from the database - so that means the user will just see a map with a marker.
The first one from Nettuts.com. The second from a site that I can’t seem to find again. (If you see this, and you recognize your code - let me know)
Anyway, like I said, the code isn’t necessarily the prettiest, but I just started working on it today. I’ll be passing the variables from a database to map property locations, but this takes inputs, for testing while setting it up.
I couldn’t decide on whether to convert the address to latitude and longitude and save them in the database, or just get the lat & long when the details page is opened for a piece of property. I went with the latter, because I heard Google won’t allow more than a couple hundred connections from your API per hour, then they’ll shut you down for the day. When they’re adding a bunch of properties (like during the initial set-up) this could be a problem. Though I guess I could just have them get the lat and long and manually enter it. Anyway, from what I’ve seen, the conversion of address to latitude and longitude is dead on.
Get your own API at Google. I have my API to use the domain name of localhost right now for local testing, I’ll just get one for the actual domain name when the site goes live.
Tags: geocoding, jquery, php
Posted in javascript, php | 1 Comment »
November 3rd, 2008
Typography is great, it can really make or break a project. Unfortunately, with websites you lose the ability to use a lot of font that can have a lot of impact. Only you can decide what works and what doesn’t for your project, but here are a few suggestions
Line-height
Line height in CSS is the equivalent to leading in desktop publishing or graphics programs like InDesign or Illustrator. My personal preference is having a line-height equal to 1 and a half times the height of the font. I used to do it the hard way, set my height to something like 12px or 1.2em and then set my line-height to 18px or 1.8em. But if you change the font-size you have to change the line-height too. So, instead, set the line-height to a percentage. For most paragraph text, I set the line-height to 150%.
p {font-size: 12px; line-height: 150%; font-family: Tahoma, Verdana, Arial, Sans-Serif;}
Letter Spacing
Letter Spacing can be a pretty easy way to make your headlines a little better looking. Letter spacing is like the equivalent to kerning.
It’s my experience that using a letter-spacing of -1 looks really good for Verdana headlines of 14px or more.
h1 {font-size: 16px; font-color: #f00; font-family: Verdana, Arial, Sans-Serif; letter-spacing: -1px;}
Letter spacing can also be used to increase the distance between letters for typographical elements, instead of using a negative number, use a positive one.
Font Choices
There are a pretty good number of font choices that are considered safe, of course Vista came out and introduced a bunch of fonts like Cambria and crap I don’t know about because I haven’t used Vista. But font-families help provide something for everyone. You declare your fonts in the order of preference. You probably already know how this works. Unfortunately I haven’t compiled a list of substitute fonts yet, but once I get a naked install of Vista (one without any type of creative suite that would add fonts) I want to create a list.
All I can really tell you is reading on a monitor isn’t like reading on a sheet of paper. On paper, serif fonts work because letters take up equal space, but on a screen, it’s easier to read sans-serif fonts because the little tails can cause eye strain. Basically, for print you hear sans-serif for headlines, serif for body. On the web, you’ll hear sans-serif for body, serif for headline. Of course these are suggestions, nothing is written in stone (you’ll see verdana - with -1px letter-spacing for my headlines here). I also think serif body fonts work well on grungy style web-sites. Sans-serif fonts look too clean sometimes for grunge.
More
Of course there is more, line font-weight, font-style, etc. Maybe I’ll come back and append this post when I get some more time.
Tags: CSS, letter-spacing, line-height, typography
Posted in CSS | No Comments »
