Andrew Sellick » CSS

Advance Vista Styled CSS Menu

andy — Wed, 26 Mar 2008 14:37:49 +0000

After seeing an amazing design tutorial on PSDTUTS for a Vista Style menu design a decided to give it ago and turn their design into reality. Well I’ve built it and it looks pretty good (see the css vista menu demo) so I thought I would share how I did it with the world.

step one

Create a PSD of the menu as details in the PSDTUTS article linked above.

step two

Cut out the images required for the menu design and save them to an images folder at the root of your site. The required images are as follows:

A one pixel wide image of the background of the menu. (nav-bg.gif)
A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)
An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)

step three

Build the HTML structure:

Home

Three

Four

As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".

HTML wise that is it really. Just drop this in to the body of the site.

step four

Now we need to style the menu using the images we previously cut out as detailed below:

body{
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
}

#main-nav{
    height:29px;
    float:left;
    background-image:url(../images/nav-bg.gif);
    background-repeat:repeat-x;
    background-position:top left;
    width:100%;
}

The code above sets the default font and font size for the body of the document. You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.

The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.

#main-nav ul,
#main-nav li{
   padding:0px;
   margin:0px;
   list-style-type:none;
}

Next we need to remove the default padding/margin and bullets applied to unordered lists.

#main-nav ul{
   height:29px;
   line-height:29px;
   background-image:url(../images/nav-bar.gif);
   background-position:right;
   background-repeat:no-repeat;
   float:left;
   padding:0px 1px 0px 0px;
   margin:0px 0px 0px 10px;
}

Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side. Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).

#main-nav li{
   height:29px;
   line-height:29px;
   display:inline;
   position:relative;
   float:left;
   width:80px;
   text-align:center;
}

Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other. In this example the width is fixed to 80px but this is very much up to you and your design. A line-height si also set to equal the applied height forcing the text to vertically align to the middle.

#main-nav li a{
   height:29px;
   width:80px;
   text-align:center;
   float:left;
   background-image:url(../images/nav-bar.gif);
   background-position:left;
   background-repeat:no-repeat;
}

Now we need to style the "a" tag itself. Again it has been given the same width and height as the li tag and floated left. This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6. Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.

#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}

#main-nav li.active a,
#main-nav li a:hover{
   background-image:url(../images/active.gif);
   background-repeat:no-repeat;
   background-position:left;
}

Finally we need to add the link styling and active/hover states. The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.

Now all you need to do is check it out in your browser. Enjoy..

demo

Check out the CSS Vista Menu Demo for yourself.

download

Download the CSS Vista Menu.

Script of the week

andy — Fri, 15 Feb 2008 14:51:15 +0000

Script of the week this week goes to the CSS Text Wrapper. On the website they state " The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website" and I have to say it is very impressive.

The site covers every angle from XHTML with inline CSS, to XHTML with external CSS styles and finally an unobtrusive JavaScript. This is all neatly created for you on the fly from the website by using their flash tool to sculpt your desired shape.

The image to the left shows just how effective this technique can be producing some superb shapes to enrich your sites design and layout.

Have a look for yourself at the CSS Text Wrapper and if your still not decided why not have a look at the CSS Text Wrapper demo page.

Simple 3D JavaScript Engine

andy — Tue, 06 Nov 2007 15:21:06 +0000

Carrying on from the theme of developing 3d effects in JavaScript I decided to keep researching flash examples and tutorials, trying to recode them into JavaScript. I was then pointed to another really handy website that has some superb flash examples.

Kirupa had one demo in particular that I wanted to see if I could emulate called Scripting 3D in Flash. This example showed how to create a camera movement in flash giving a feeling of perspective.

Having looked at the code I decided this was most definitely possible in JavaScript and here’s what I came up with…

code

HTML

The HTML as seen below is pretty simplistic. Firstly we have a sceneContainer that wraps the whole 3D Engine, then we have a scene3D container which acts very much as a view for the the engine as will be described below and finally we have the individual images within the scene, each with an id allowing individual styling.

CSS

The CSS details simple styling for the engine. Points to note are as follows:

sceneContainer has a fixed width/height and an overflow of hidden. This allows us to mask the images as they move back and forth in perspective.
Next we have the scene3D positioned absolutely with a width of 100% of it’s container (sceneContainer). This allows for easy resizing and positioning of the container within the sceneContainer.
Finally we have styles for each individual image within the containers. This allows us to position all the images within the scene3d container.

#sceneContainer{
   border:1px solid #CCCCCC;
   position:absolute;
   width:800px;
   height:500px;
   overflow:hidden;
}

#scene3d{
   position:absolute;
   left:0%;
   width:100%;
}

#joe{
position:absolute;
left:0px;
}

#joe2{
position:absolute;
right:0px;
}

#joe3{
position:absolute;
left:25%;
}

#joe4{
position:absolute;
right:25%;
}

#joe5{
position:absolute;
left:50%;
}

#joe6{
position:absolute;
right:50%;
}

#joe7{
position:absolute;
left:75%;
}

#joe8{
position:absolute;
right:75%;
}

JavaScript

Lastly we have the JavaScript. This is strongly based on the kirupa example and works by looping through the images included in the scene and scaling them based on the variables set in the movie. To achieve the effect of the images zooming in and out we also have to scale and reposition the scene3D container at the same time hiding the overflow within the sceneContainer.

Have a play about with the variables to get to grips with how they control the effect and more over, have fun!

var sceneContainer = document.getElementById(’sceneContainer’);
var scene3d = document.getElementById(’scene3d’);

x = 0;
y = 100;
z = 300;

cameraView = new Object();
cameraView.x = 0;
cameraView.y = 0;
cameraView.z = 500;

focalLength = 300;

dir = -1;
speed = 20;

backAndForth = function(){
   cameraView.z += speed*dir;
   if (cameraView.z > 500){
       cameraView.z = 500;
       dir = -1;
   }else if (cameraView.z < 0){
       cameraView.z = 0;
       dir = 1;
   }

   var sprites = scene3d.getElementsByTagName(’img’);
   var spritesLength = sprites.length;

   var scaleRatio = focalLength/(focalLength + z - cameraView.z);

   for( var i = 0; i < spritesLength; i++ ){
       var sprite = sprites[i];

       sprite.style.top = ((y - cameraView.y) * scaleRatio)+’px’;
       sprite.style.width = sprite.style.height = (100 * scaleRatio)+’px’;
       scene3d.style.width = (100 * scaleRatio)+’%';
       scene3d.style.left = ‘50%’;
       scene3d.style.marginLeft = ‘-’+(100 * scaleRatio)/2+’%';
   }



};
setInterval(’backAndForth()’, 30);

demo

Have a look at the Simple 3D JavaScript Engine Demo.

download

Feel free to download the Simple 3D JavaScript Engine Code.

YAML a HTML/CSS Template Builder

andy — Thu, 04 Oct 2007 13:27:32 +0000

I was recently pointed in the direction of a very cool online app called YAML ("Yet Another Multicolumn Layout") Builder. It’s an online HTML template builder and I have to say it looks pretty good.

Now as I am working on a template builder myself I thought a good place to start would be by reviewing the YAML builder and to decipher the positives and negatives of the application. So here we go:

aesthetics

It has to be said the builder is very aesthetically pleasing with a simple yet satisfying design and very powerful interactive features allowing drag and drop components to help build the template as required.

level of detail

The level of detail at which you can manipulate your desired template is relatively high, however, if your looking to create a very complex template this builder is not for you. Allowing only 0, 2 or 3 column layouts can be quite restrictive although it does allow you to add “column sets” to each column to produce a more precise layout, however, this is not always practical.

The ability to add padded content boxes, content elements (such as h1, h2, p, line, ul) and column sets really enhances the template builders appeal and definitely offers novice template builders a firm foundation from which they can build.

The level at which column and site widths can be edited also works very nicely. The ability to set max and min widths, re-order columns and change the individual column widths add for a satisfying effect.

conclusion

It has to be said the YAML builder is well worth a look to see if it meets your needs. More complex layouts may be a bridge too far for this builder, but I believe with a little extra development this app could be formidable. It does have a very strong foundation, but I would like to see it support more columns and the integration of rows as well. Then there is always the prospect of equal height columns to take it in to the exceptional bracket.

A lot to think about when considering my own template builder, but I can definitely use this as a firm benchmark from which I can weigh my own efforts against.

update

I have just received an email from Dirk Jesse (YAML Builder Developer) and he added the following to my review with regards to the level of complexity:

"Check out the Subtemplates in the "Add Elements" section. These offer much higher flexibility (eg. columns and rows) and can be combined with the exisiting columns. You can also remove all columns and creatve your layout only with the subtemplates. They even can be nested. So, rather complex layouts are possible too."

Well I think that just about caps it off. What an awesome app. If anyone uses it let me know how you get on.

CSS PNG Hack Revisited

andy — Sat, 08 Sep 2007 23:52:33 +0000

In my previous article "CSS PNG Hack for Internet Explorer (IE)" I showed a commonly used CSS method deployed to enable the usage of PNG’s in Internet Explorer 6. However, I did not mention one vital piece of information that was brought up in the comments section of the article.

When using the CSS IE filter you CAN place it in an external style sheet, however, you have to reference the PNG as if you are referencing it directly from the page in question NOT the style sheet.
For example your home page will sit at the root of your site, your logo PNG sits in a folder called images which is also at the root of your site and your style sheet sits in a folder called CSS also at the root of your site.
To correctly reference this image you must use the following code.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo.png’,sizingMethod=’scale’);

NOT

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/logo.png’,sizingMethod=’scale’);

The Ultimate Cheat Sheet

andy — Fri, 10 Aug 2007 14:43:41 +0000

I have just discovered what could be the ultimate cheat sheet. The cheat sheet to rule them all you could say. Have a look at VisiBone Browser Book. The book can be purchased for a small fee, however, there is a readable version of the book available on the right hand side of the site as images. Check it out…

HTML/CSS Liquid Layout Templates

andy — Sat, 04 Aug 2007 12:14:53 +0000

I have recently been working on building up a template collection as a base from which I can develop any site. I have finished off the Liquid layout templates and have decided to include them on my site under the tab layout at the top of the page.

Have a look for yourself at HTML/CSS Liquid Layout Templates and let me know what you think.

Sliding Menu Revisited

andy — Thu, 19 Jul 2007 13:22:54 +0000

A need to start off by thanking Heather who very kindly reworked the Sexy Sliding Menu to work from the left hand side and here it is.

code

html

There arent many changes here from the original in fact the only change within the HTML was to move the tab after the tab content region so as to align the tab on the right hand side of the content.

css

The CSS again also did not require a great deal of modification. The main changes were to absolutely position the tab and its contents to the left hand side and repositioning the contents background image.

Simple image amends were made and can be found in the download at the bottom of this article.

demo

Please have a look at the Sliding Menu Revisited demo.

download

Please have a look at the Sliding Menu Revisited code.

Hope this helps enjoy!

Fancy Sliding Tab Menu using script.aculo.us

andy — Wed, 18 Jul 2007 13:15:59 +0000

Well I’ve been at it again looking at new ways in which I can make good use script.aculo.us effects. I started by looking at the accordion this time and ways in which it can be developed to produce different results. The most common example that I knew of was the Rico accordion, so that’s where I decided to start.

As you can see below it looks quite cool and can add some nice interaction to any site. At this stage, however, I’m not going to write too much about the code behind it as I am still working on it but I thought it may be interesting for people to have a look at.

browser list

Currently the tab slide has been tested in Fixefox 2.0, Internet Explorer 7 – 6, Opera 9 and Safari 3. I am planning to test this more rigorously, however, as I stated above there is still more work required before I prepared to say it is complete.

demo

Please use the Fancy Sliding Tab Menu using scipt.aculo.us demo, have a play and let me know what you think.

code

Please download Fancy Sliding Tab Menu using scipt.aculo.us code and use it to your hearts desire.

todo

Check accessibility
Degrade without JavaScript
Further browser tests

Masking a Flash Movie in HTML using a DIV

andy — Wed, 20 Jun 2007 12:54:56 +0000

This is not something that is required in day to day development, but nether the less is definitely handy to know.

Due to the nature of embedded flash it does not seem possible to “mask” it using an overflow hidden on a containing DIV. This however is not the case.

By simply adding the following parameters a flash movie can be masked:

The wmode parameters bring the flash movie back into the flow of the document and therefore allow it to be treated as if it were for example an image.

The complete code I have used in the example is as follows:

code

css

#flash-mask{
width:30%;
overflow:hidden;
padding:10px 0px;
border:1px solid #cccccc;
}

The CSS as shown above is very simple and sets a width on a containing DIV to 30% of the page width as well as having an overflow set to hidden. This will simply demonstrate the effect clearly.

html

As can be seen above there isnothing special here. Simply a containing DIV with a flash movie embeded and of course the parameters set.

example

Please have a look at the Masking a Flash Movie in HTML using a DIV example.

download

Feel free to try it out yourself with the Masking a Flash Movie in HTML using a DIV download.

Andrew Sellick » CSS

Advance Vista Styled CSS Menu

step one

step two

step three

step four

demo

download

Script of the week

Simple 3D JavaScript Engine

code

HTML

CSS

JavaScript

demo

download

YAML a HTML/CSS Template Builder

aesthetics

level of detail

conclusion

update

CSS PNG Hack Revisited

The Ultimate Cheat Sheet

HTML/CSS Liquid Layout Templates

Sliding Menu Revisited

code

html

sidebar

css

demo

download

Fancy Sliding Tab Menu using script.aculo.us

browser list

demo

code

todo

Masking a Flash Movie in HTML using a DIV

code

css

html

example

download