Make the eBay Logo with CSS
I'm looking at the eBay logo and thinking that we might be able to do the same thing with CSS styled text and opacity. It might take a while. Yes, we compose directly into blogger and use no tools. If it works this will stay and we'll show how to do it. If it doesn't work then you'll know why the blogging has been less frequent. Here goes...
Let's sample the colors first.
Not too surprising, all four colors are from the web safe color palette.
What the Font?
There is a tool out there that will tell us the font name for an image. It didn't help on this image but the logo looks like it is Arial.
Copy and paste this in your blog or Web page.
It will look like this.
Internet Explorer and Mozilla Firefox will not look the same. Notice the jagged edge on the letter "a" in IE.
Mozilla Firefox Internet Explorer
We can usually insert a background color background:white;
(CSS Opacity Background Defined )
to remove the jagged edges in IE. It isn't working here.
Opacity Navigation Hover
onMouseOver onMouseOut Navigation
One of my favorite page designs
DesignTalkBoard
has a good example
of swapping out images using onMouseover to make the
top navigation come alive. It works well in all browsers.
When I see that page it is a simple opacity hover trick that comes to mind.
It looks like this. Hover over the CSS styled links.
Opacity Navigation
To do the swapping like Richard does it
at DesignTalkBoard
requires two images for each navigation link and a lot of code generated by
Dreamweaver.
We can get the same effect with only one image using opacity and we can do it all with CSS. No scripting required.
Look at all that code...
So here goes. Check out how the navigation hover works
in DesignTalkBoard.
Hover over the navigation.
View the source code for the details. It takes a lot of code.
Let's try it using opacity. We'll use Richard's images for demonstration.
Four images
We grabbed four images used in the top page navigation. We added a CSS border just to see and separate the four images.
The images are used for navigation and look something like this across the top of the page.
No Scripting Navigation Using Opacity
This is the easy way to hover with opacity. The opacity is all in CSS. The onMouseOver isn't needed and there is only one image. There is no image swapping.
The CSS Style looks like this.
Add this to each image link.
It will look like this.
Opacity in Opera
There is still one good reason to do it the long way,
the way that Richard does it in Dreamweaver.
Opera doesn't support opacity yet.
But for the most part the opacity is a no harm effect.
As we design,
we may need to start considering Opera browsers more since Opera
now has a free download without integrated advertising.
Does this work in your browser? Do you see a flicker when you hover?
