Posts Tagged ‘Code’

Create BBC iPlayer style roll over boxes

// May 24th, 2009 // 3 Comments » // Code, css, tutorials

You must have seen those funky roll overs used on the BBC iPlayer website right? I have come up with a very basic way of doing the same thing, not with Javascript but with CSS and HTML.

Step One

First we need to prepare our image, so open your image editor of choice (I am using Fireworks for this example) and create a new canvas with a width of 178px and height of 200px. In the top half of the canvas place an image with a width of 178px and a height of 100px.

step 1

Now we make a copy of the image by selecting it and copying it. Paste it into the lower half of the canvas like below:

step 2

Then we add a black rectangle over the bottom image and reduce it’s opacity to around 80%
image

step 3

Finally add some text

step 4

Step 2 – The Code

Lets start with some really basic and easy mark up

<div class="box">
<div class="content">
<a href="#"></a>
</div>
</div>

and our css…

.box{width:178px;height:200px;}
.box .content a { display: block; width: 178px; height: 100px; background: url(images/heroes.jpg) no-repeat top left;}
.box .content a:hover {background-position:bottom left;}

all we have done is move the bottom half of the image up on the hover state to cover the top half of the image by setting a background position. Easy!

You should get something like this:

Create A Favicon

// February 14th, 2008 // 1 Comment » // Code, Design, tutorials

As you are reading this post, look up into your location bar at the top of the screen, notice the little icon to the left of the web url? This is a favicon and in this article, I am going to show you how to add this to your WordPress site.

What Is A Favicon?

Favicon is short for “Favourites-Icon” and is sometimes referred to as a “Web icon” or “Page icon”. Favicons are a great way of adding a little personality or identity for your website. They are very handy when looking for a favourite site amongst your bookmarks. By locating the little icon in your bookmarks list, you can locate quickly and easily your chosen web site just by recognizing the little favicon.

Choose an Image

First choose an image that you think that represents your site. Be it an icon, logo or even a letter, you choose! You can do this in any image software you have (Photoshop/Fireworks/Illustrator etc..).

Create…

Now to make things easier for you, visit either GenFavicon or Chami.com where you can upload an image from your mac/PC and resize the icon on any one of these sites. Once done you can download your newly created favicon.

Next step – place the favicon.ico file into the Root of your website folder (In WordPress, this is the initial folder not your themes folder) and upload to your server – usually to public.html. This is important that you do place the file in the root directory as browsers will recognize the .ico file without searching for a HTML document.

Add Some Simple Code….

Now open header.php and add the following lines of code inside the <head> of the header.php file:

<link href="/favicon.ico" rel="icon"/>
<link href="/favicon.ico" rel="shortcut icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Save – Upload – Enjoy!

Save the file and upload to your server. Now visit your site and refresh the page, you should now see your newly created favicon in the address location bar at the top of your screen.