Framing your images using CSS

May 8, 2008

I’ll show you a simple yet effective CSS trick that you can use to mimic a frame on a picture and all you’ll need is Notepad to do it. First up, we’ll need our picture. it’s time to add a class to the image source so that we can begin. <img src=“Live Experience URL” alt=“Live Experience” class=”live-pic”> With that exhausting bit of prep work out of the way it’s time to move on to the magic. What you’ll need to do now is open up your CSS file so we can add a new class. In this case it’s called... [Read the full story]

Make Buttons with Hover Load Faster

May 8, 2008

With CSS we can target the ‘:hover’ child class for links and update their background properties. Example .nav a:link, .nav a:visited { width: 160px ; height: 30px ; display: block; overflow:hidden; background: url(’images/nav1.gif’) 0px 0px no-repeat; } .nav a:hover, .nav a:active{ background-position: 0px -30px; } The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.  Read More →

Changing Link Colors with CSS

May 7, 2008

Introduction This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour “onmouseover” (hover colour). Specifying the default colour If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document. <style type="text/css"> <!-- a:link {color: #000000; text-decoration: underline;... [Read the full story]