Welcome back, | Log Out

electrologue

Music Industry News

Featured Articles

  • One of the most frustrating aspects of designing a website is the fact that there are still only few standard fonts that are “safe” to use. This means even though you might have a large collection of spectacular fonts, there are limitations on how you can use them because most visitors to your site won’t have them installed on their computers — their browsers will then replace the missing font locally with what it deems a similar font, which may not be that similar at all. This can make your impeccable design become something much less than that.

    Moreover, it limits your choices and would seem to nullify really valuable CSS hover effects that are great alternatives to using images with javascript rollover functions that have to preload as your page is accessed. Thankfully, with some creative use of images and CSS, you can still have the font and the rollover effect, with not very much effort. This site uses the technique described below – mouse over the words ‘music’, ‘film’, ‘gadgets’, etc. and you’ll see them in action.

    The trick is to choose our font and design a “doubled” rollover image:

    Then, you use CSS to frame the image’s viewable area inside a <div>:

    .music {
     float:left;
     width: 56px;
     margin: 0 20px 0 0;
     overflow: hidden;
    }

     

     

    And when you add the following CSS hover style…

    .music a:hover {
    margin-left: -57px;
    }

    You get the rollover effect:

    Basically, what this does is shift the image to the left by 57 pixels, which allows the overflowed part of the image to move into view. So there you have it – quick easy, non-javascript rollovers!

    No Comments