• Create a Mac style CSS Dock Menu
  

  Really nice tutorial for creating a cool and fancy navigation using CSS and a Jquery Javascript library. Comes as complete Download, including a icon set.

• How to: CSS large Background
  

  Here you’ll find instructions how to integrate a large image as webpage background properly.

• Blurry Background Effect
  

  A very nice and eye teasing visual effect, unfortunately not working for Internet Explorer 6.

• 12 Useful Web Tools for Designers
  

  Several neat tools making a webdesigners daily work less miserable, a color schemer, tools for creating templates, favicons, background patterns or fonts.

• Creating scalable Layouts
  

  As the design of a site is confronted with a huge range of completly different screen resolutions, it should be pretty flexible. Should. Here’s ecplain how to achieve that.

• Massive collection of CSS hints
  

  Ok, this might be quite an old post, but it’s still very useful and just through it’s coverage and useful tricks, all the techniques are great helpers.

View a plain demo here.

So here we go:

First of all design two (or three, if the focus state should be used, too) buttons, then cut the left part of the two states and paste them into a single graphic above each other. Add a little space so the text won’t stick too close on the edge, which should, depend on the design somewhat like this:

Then repeat these steps for the right end of the button:

That’s it for the graphical issue, the HTML is just a div container and an unordered list in the inside:


<div class="mouseover">
<ul>
<li><a href="#"><span>Item 01</span></a></li>
<li><a href="#"><span>Item 02</span></a></li>
<li><a href="#"><span>long Item name 03</span></a></li>
</ul>
</div>


The only things to pay attention is the class assigned to this div tag as it hands down all the attributes to its tags within and that the linktexts are embedded in span tags.

Now as all the action is done via CSS, we have to get into details:


.mouseover ul {list-style: none;}
.mouseover ul li {
display: inline;
font-size: 14px;
line-height: 14px;
font-weight: bold;
}

For the unordered list the list-style value “none” is mandatory as any other value like “square” or “circle” etc. would avoid a proper alignment of the navigation elements.
The list elements must be displayed “inline” otherwise they show up vertically ordered. If you wish them to do so, just drop “display: inline;”.
Besides that the apperance of the textlinks of the buttons can be edited here individually by additonal CSS attributes.

.mouseover ul li a {
padding: 0 0 0 9px;
background: url(button-left.gif) no-repeat;
float: left;
}

The padding values have to be set individually, as they depend on the measurements of the left graphic.
The “float: left” attribute is mandatory to assure both graphics are displayed besides each other.


.mouseover ul li a span {
padding: 9px 9px 9px 0;
background: url(button-right.gif) no-repeat right top;
display: block;
float: right;
color: #666;
}


As before please adjust the padding values as they fit the button layout.
The background attribute contains values as the image path and “right” and “top”. The last two are important as the grant that the alignment of the background is not influenced by the padding values. Setting the background alignment value “right” is the reason why the button lenght fits for a different number of characters of the textlink.
(If a textlink is to long, though and gap appears, simply expand the lenght of the background on the left side.)


.mouseover ul li a:hover {
background-position: 0 -36px;
}

The attribute “background-position” for the element “a:hover” is defined by the two values “0″, which aligns the graphic to position 0 of the x-axis and to -36 pixels on y-axis. The y-axis value derives from the half of the overall height of the background graphic and has to be adjusted, if the height of the graphic is not equal to 72 pixels.


.mouseover ul li a:hover span {
background-position: 100% -36px;
color:#fff;
}

The value of the y-axis of the attribute “background-position” must be set to “100%” so the graphis is aligned to the right.
Additional font settings of the mouse over state might be defined here, too.

…and that’s it!
Happy coding!

(Take a look at a live demo here)

In order to get this working in all the browsers (Ok, using IE6 we’ll have to trick a little bit, but we’ll discuss this later) we have to approach this in a sneaky way.
Here is a simple, fast, lean, cross browser functional and JavaScript free method, only using plain HTML, CSS and graphical elements:

First of all we need graphical elements, for this example only four are needed, five if including the IE6 hack:

• 2 images of your choice to be linked
• one graphic with transparency and color of your choice in the same size as the linked images
• one 1px x 1px full transparent GIF

You might want to download the whole demo here, there the graphics are included.

First create the div containers including the picture links in the html document, assign a class called “image” and determine the background image, which shall be linked, by using the “style” attribute.

<div class="image"
style="background-image: url(product_01.jpg);" > </div>

<div class="image"
style="background-image: url(product_02.jpg);" > </div>

[Integrating the images via "style" might be avoided by assigning "id" and referencing the image url in the css, but I needed the image to referenced in the html code for dynamic site and did not want to use the "img" tag for reasons]

After that add the links, define them using “class=”picture”, linkpath and further attributes like “title”. it should look somewhat like this:

<div class="image"
style="background-image: url(product_01.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
</div>

<div class="image"
style="background-image: url(product_02.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
 </div>

Now the css, only two classes (+ one pseudo class) are needed:

.image:
It must at least contain “background-repeat: no-repeat; border: none;” or modifications if wanted.

a.picture
The size of the linked picture and the attribute “display:block;” must be indicated. The image-url for the non-active link is indicated as “background-image”, too

a.picture:hover
Here the image-url for the active link is defined.

Now the .css file should contain the following:

a.picture {
background: url(opacity_01.png) no-repeat;
width:183px;
height:146px;
display:block;}

a.picture:hover {
background: url(blank_01.gif) repeat;}

.image{
background-repeat: no-repeat;
border: none;}

Now you just need to align the two div containers properly as you like them to be.
In this example they are floating with a margin of 10 pixels, which is done by two additional classes “l” and “m”. Why it is separated from the “image” class is explained here.

Attention!

This works properly in every browser, but in not IE6, because here only full transparency is supported.
So here’s the IE6 hack:

First create a new .css file named “ie6.css”, then add the following lines between the <head> tags of your html file:

<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->

After that you refer to an image using only full transparency in the “a.picture” class in the “ie6.css” file, somewhat like that:

a.picture {background: url(opacity_ie6_01.gif) no-repeat;}

…and you are done!