Skip to Content »

Archive for Web Design

Side Note: Feed Icons - Help Establish The New Standard

Feed Icons - Help Establish The New Standard // If you’re one of those that has an icon to indicate an RSS feed, be sure to use one of these. Wouldn’t mind helping out myself if I can just find a good spot to put them. On a similar note, I’m guessing (hoping more like it) that Safari will soon follow Firefox’s and the yet-to-be-released IE7’s footsteps in using the all-familiar RSS icon instead of the current icon it has now.

Comments

Side Note: Installing Minipost Plugin (Part 2)

Installing Minipost Plugin (Part 2) // Just testing to see what a second sidenote will look like.

Comments

Side Note: Installing Minipost Plugin

Installing Minipost Plugin // Been wanting to have a sideblog and finally found a plugin for it. Bear with me as I try to get it the way I want it.

Comments

CSS Image Rollovers

I see a lot of websites nowadays that uses CSS instead of JavaScript for their image rollover needs. That’s great except for one minor problem that’s common with a few of them…they tend to use two seperate images: one for the original state (imgA), and other for the hover version (imgB). What’s wrong with that you ask? Well imgA gets cached as soon as the site loads up, however, imgB only gets cached when the mouse hover over imgA. This results in a delay, noticeable on a 56K modem or if the image is rather large in terms of file size.

So how do you solve this minor problem? By having both states in one image of course:

CSS Rollover Image

Note that the original version is on the left-half of the image, while the rollover version is on right-half. By only having one image, this results in no delay during hover. And here’s the CSS code to make it work:

a#creative {
display: block;
height: 100px;
width: 100px;
text-decoration: none;
text-indent: -5000px;
background: url('creative.gif') no-repeat top left;
}
a:hover#creative {
background: url('creative.gif') no-repeat top right;
}

Note that the same image has been declared for both the a and the a:hover selectors with only the position property being different: top left for the original, and top right for hover. Using the following image as a guide, the a selector will only show the top-left of the image (highlighted in blue), while the a:hover selector will only show the top-right of the image (highlighted in red):

CSS Rollover Image

And finally, the HTML code, which is just a matter of adding the id selector name, in this case, creative, into the anchor element:

<a id="creative" href="http://raymondsantos.com/" mce_href="http://raymondsantos.com/">Raymond Santos Creative</a>

And here’s the final results:

Raymond Santos Creative

And that brings the end of my first tutorial written for Euphoric Realms. If there’s anything you don’t understand, please let me know. :)

Comments (2)

Maximised? Or Not?

Here’s a question to those with a higher screen resolution than 1024×768: do you maximise your application window, or more specific, your web browser?

Take me for example: my current screen resolution is 1280×1024. The only applications where I have the windows maximised are my designing applications such as Photoshop, Flash, and Fireworks, where I could use the huge workspace for maximum effect. However, as for all my web browsers (Safari, Firefox, Opera), it’s a completely different matter. Instead of having the windows maximised, I have it at a fixed size of 850×900 pixels. Why you ask? Well the 850px width allows enough room for me to use other “small” applications such as Adium, Skype and Mail all at the same time, while the 900px height allows for plenty of reading space without having to scroll down too much. And before you ask, I have no troubles browsing websites whatsoever as a majority of the sites I frequently visit are either designed for 800×600 screen resolution or designed using a fluid layout. I do have a couple of favelets on standby just in case I need to quickly change the window size to 1024×900 and back again:

  • 1024×900 // Sets the browser size to 1024 x 900 pixels
  • 850×900 // Sets the browser size to 850 x 900 pixels

Favelets are just like normal bookmarks: just drag them to your bookmark bar, give them a proper name, and whenever you want to use them, just give them a click and you’re away. Unfortunatly JavaScript has to be enabled.

So anyways, are you like me and limit the size of your web browser window rather than maximising it? I mean let’s face it: a majority of websites are designed for 800×600 resolution so there’s no point of having a big-ass window. I mean, you don’t want to be treated to sites with huge empty backgrounds like this, do you?

Maxismed version of kewl_ray's IGN Icons

Just something to think about. ;)

Comments (4)

« Older entries