Related posts:

1. CSS Shortcuts
2. Horizontal CSS Menus That Grow on You
3. Build a CSS Menu with Rollovers

Related posts brought to you by Yet Another Related Posts Plugin.

In this easy lesson made for Flash 8 professional I will show you how to create a set of cool, neon glow playback control buttons easily. No other applications will be used to create these buttons, because Flash has so much power on its own! You will see:

• How to use the basic shapes to create the ones you need,
• How to use the great blending filters in Flash 8 pro,
• How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: .

3 Make sure that both the Object drawing and Snap to objects options are turned off: .

4 Click the Set Corner Radius icon () and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

6 Select the Paint Bucket tool (K). Go to the Color Mixer panel (opened by default — you can always find it in the top right part of the Flash working space). Do the following (see numbers in the screenshot below):

1. Click on the paint bucket icon to select the fill color.
2. In the Type menu, select Linear.
3. Click once on the small colored square found on the bottom right.
4. In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
5. Set the Alpha property for this color to 34%.
6. Set the same color for the left square, but set its Alpha to 100%.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

9 Select the Oval tool (O). Go to the Property inspector and make the following selections: block the fill color, select any flat color for the stroke (outline) color, set the line type to Solid and choose 3 for line thickness.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

11 Select the ring by clicking on it with the Selection tool (V), if it isn’t already selected. Go to the Color Mixel panel and click on the pencil icon to select the Stroke color (). In the Type menu, choose Linear exactly like you did for the fill color previously. Add two more color squares to the gradient by simply clicking anywhere between the two existing ones. You should have four of them in total, with the following color values, positioned like this:

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

12 Select the Gradient Transform tool (F). Click on the ring to select it. Rotate the gradient by 90°. To successfully do this, make sure that Snapping to Objects is turned on (View > Snapping > Snap to Objects). Then, press and hold Shift, click on the white circle handle and start moving your mouse clockwise.

13 While the ring is selected, press F8 (or select Modify > Convert to Symbol) to make a symbol out of it. Name it outer ring. Select Movie clip as type and be sure to select the registration point in the middle (see screenshot below):

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

1. Blur X and Y: 8
2. Strength: 260%
3. Quality: High.
4. Color: #ADE2FC.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

16 Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That’s where the ring that you have just created resides. Make a new layer above it and call it circle.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

19 Select the circle (both the outline and the fill). Open the Align panel by selecting Window > Align. Turn on the To stage button (1). Click the align horizontal center (2) and align vertical center (3) buttons.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

23 The copy of the circle fill will be selected by default after pasting. Go to the Color Mixer panel. Click on the paint bucket icon to select the fill color. In the Type menu, select Linear. Make the following gradient:

• You should have three color squares, one in the middle and one on each end of the gradient.
• Each square’s color should be white.
• The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

1. Bring the cursor close to the square’s upper right corner.
2. Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
3. Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

28 Click on the triangle to select it. Go to the Property inspector and type 27 in the W (width) field. There! You have a good-looking play button now. The screenshots below show the difference in size before and after the width of the triangle was modified.

29 Center the triangle inside the button.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

37 The new play icon movie clip will be selected by default. Go to the Properties panel and click on the Filters tab to set the blending options for this symbol. Choose the Glow filter and tweak it like this:

1. Blur X and Y: 6
2. Strength: 240%
3. Quality: Medium
4. Color: #ACE0FD
5. Inner glow must be turned on.

And — ta-daa — here’s the final result, with the background:

Now ain’t it cool? This blue neon glow looks soooo good ! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

39 Open the Library by selecting Window > Library.

40 Right-click on the play button in the Library and select Duplicate from the pop-up menu. The Duplicate Symbol window ill appear. Just change the symbol’s name to stop button and click OK.

Repeat the same thing with the play icon symbol: duplicate it and call the new symbol stop icon. You will have fice symbols (all of them movie clips) in the Library now: the outer ring which is present in both the play button and stop button symbols, as well as play icon and stop icon for each respective symbol. Let me show you now how to make the modifications.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

44 The Swap Symbol window will show up. All the symbols that you made in your Flash document so far are displayed here — exactly as they appear in the Library. Select the stop icon symbol and click OK.

Although this movie clip symbol looks exactly the same as the play icon, you know that this is the stop icon in fact. Flash informs you of this by displaying the name of the currently selected symbol in the Properties panel:

45 Now, double-click the stop icon movie clip on the stage to enter inside it. Erase the triangle and draw a 28 by 28 pixel borderless square in its place. I have made the square smaller, because if it had the dimensions of the triangle, it would come too close to the circle’s border and that wouldn’t look so good. Oh, yes: the color of the square should be the same as triangle’s: #3A5274.

46 Click on the stop button link to go back to the movie clip’s timeline.

47 Align the icon in relation to the movie clip’s center.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

49 Draw a rectangle here, without a fill, and make it the same size as the icon above it: 28 by 28 pixels. the line should have the same thickness as before (4) and the same color (#3A5274). Align it like you did with the icon. It should look like this:

And finally, here are both the play and stop neon glow buttons, side by side:

They look awesome! And there was no need at all to use Photoshop! The pause, fast forward and rewind buttons can be made easily now — you know now the easy principle of duplicating symbols. Just make smaller triangles for the rewind button and make two rectangles for the pause button. Nothing easier than that.

Related posts:

1. Glowing neon playback control buttons
2. Design a mirror website flash navigation menu
3. Flash Tutorial – Top Bluish Preloader

Related posts brought to you by Yet Another Related Posts Plugin.

Often, the biggest obstacle that most, if not all, small businesses have is a limited budget. Let’s face it. Having a small business makes it difficult for you to have the most glamorous marketing campaign such as that of the big firms and Fortune 500 companies.

And you know for a fact that advertising is truly expensive. If you don’t look out, you might just wake up one day with your funds depleted, and strapped with a marketing campaign that provides lackluster performance.

Knowing you have other things to allocate your funds for, you know that you have to consider all things first before you can shell out your hard earned dollars for your coveted marketing tool. Be it full color flyers, or even a large format poster, you can’t afford to be picky when you’re looking at a very small fund to stretch.

With the funds you’re operating on is just enough to get you a decent marketing campaign for your business, it’s no wonder that many business owners and marketers are turning to other alternative promotional vehicles to introduce their brands. In fact, most marketers and advertisers are looking at ways to get attractive and compelling marketing campaigns for the price they can afford of course.

But this is a common misconception of most business owners and advertisers about advertising that should be changed right away. Although a limited budget may mean limited access to the most expensive ads such as your full color flyer printing campaign or your large format poster printing project, it doesn’t mean that you should settle for a mediocre piece.

On the contrary, having a limited budget means you will be able to come up with a more creative ad campaign that will help you effectively introduce your business to your target market.

And it’s not all print ads actually. Marketing your business can be advantageous in a way because you’re able to hand out to your target clients your message in a nice piece of paper. But as always, you can also try some alternatives that can help you promote your business better.

You might want to try co-sponsoring a worthwhile activity, for example. It may be in promotions, events, trade shows, and exhibits located locally. This way, as a small business, you’ll be recognized as a supporter of your community endeavors. This is actually what most big companies do to market their name and brand. As a potential client looks at the new ads, they will be eager to see that you are a staunch supporter of the local community, and hence, a better choice between you and your competitors.

The key is not therefore be frustrated just because you happen to work on a very limited amount. Small businesses are often very imaginative, especially when it comes to stretching their money and making sure that every penny is put to good use. They may not have the money, but they do have excellent marketing tools that show professionalism and credibility.

Related posts:

1. 3 Elements Of A Successful Advertising Campaign
2. 3 Benefits Of Pay Per Click Advertising
3. 3 Reasons Why Blogging Will Boost Your Business!

Related posts brought to you by Yet Another Related Posts Plugin.

In this photoshop text effect tutorial we’ll be creating a grungy, burnt wood text treatment. We’ll go over some basic blending modes and use some filters and layer styles to create a  look that would be perfect for a Hollywood movie poster .

Final Image Preview

Our finished product will be a nice burnt wood text treatment cleared out of a charred and smokey piece of aged wood.

Gathering Materials

Just a couple of downloads required for this tutorial. And they’re both free:

• Wood texture by Beyond-Oddities (available at Deviant Art)
• Rough Edges brush pack from Brusheezy

Step 1

The first thing we need is the background texture. I’m using a roughed up wood image created by Beyond-Oddities. Open the texture in photoshop. I resized my texture to 1200×800 for a more manageable file size.

Step 2

Now we need to add some text. Select a brown color (I’m using #47e490e) and type out some text. I’m also using Arial Black for a nice bold typeface.

Step 3

We’re going to work our way from the outside inwards. Let’s first create the singed effect surrounding the actual text. Command+Click the Text Layer to Make a selection of the outline of the text.

Step 4

From the Select Menu choose Modify > Expand. Expand the selection by 25px.

Step 5

Create a new layer (“singed”) with this layer selected fill the selection with a dark gray (#222222). This will be used for the singed area around the burn text.

Step 6

Now we need to bring some life to the singe with a few filters. First clear the selection by pressing Command+D. With the “singed” layer selected, choose Filter > Blur > Gaussian Blur. Add a 1.8 Radius Gaussian Blur. This will help take away the hard edge.

Step 7

Next we need to add some variation with a wind effect. With the “singed” layer still selected, choose Filter > Stylize > Wind. Set the direction to “from the left.”

Step 8

Apply the same filter, this time with the direction “from the right.” Now we have a nice grainy look to complement the burnt text.

Step 9

Change the blending mode of the “singe” layer to Color Burn and set the opacity to 30%. We just want the hint of burning.

Step 10

Now let’s focus on the main text. Change the blending mode of your text layer to multiply. Now you can start to see our burn effect.

Step 11

Let’s add an inner glow to emphasize the burn. Double click the layer to bring up the layer styles. Select “inner glow” and apply the following settings:

• Blend Mode: Multiply
• Opacity: 60%
• Color: #111111
• Size: 21px

Step 12

Now we’ve got nice burned in text but it still looks to clean. We’re going to add some textured roughness to the edges. Add a vector mask to the text layer by clicking on the “add vector mask” at the bottom of the layer panel.

Step 13

Download and open the Rough Edges brush set from Brusheezy.

Step 14

Choose the 433 horizontal brush. With the layer mask selected and black set as your primary color, roughen up the edges of the text.

Step 15

Rotate the brush and continue around the edges until you have a nice roughed up burn.

Step 16

Let’s finish up by adding a charred effect to the background.  Set your foreground color to black and your background color to white. Create a new layer called “charred.” Go to Filter > Render > Clouds. Set the blending mode of this new layer to Multiply.

Step 17

With the charred layer selected, grab a large, roughed up eraser and clean up the area around the text.

Step 18

Let’s make the entire image pop. Create a new Levels adjustment layer (Layer > Adjustment Layer > Levels). Set the Black input level to 15 and the white input level to 223.

Final Image

And we’re done. A smokey burnt text treatment ready for your next project. I hope you enjoyed this tutorial and maybe picked up a technique or two. Let me know what you think in the comments below.

Related posts:

1. Design a Hot and Sparkling, Firery Text Effect in Photoshop
2. How To Create A Sparkle Trend Advertisement – Photoshop Tutorial
3. Combine Renders and Light Effects for Awesome Results – Photoshop Tutorial

Related posts brought to you by Yet Another Related Posts Plugin.

A great number of websites on the Internet receive a significant amount of new traffic on daily basis without ever having to pay a single cent for advertising. How do they do this? Simply by search engine optimization (SEO) techniques. There are certain tips and techniques that any webmaster could use to enhance his chances of appearing higher in the search results and hence leading Internet users from all around the world onto his website.

SEO techniques could be divided into two main categories, on-site techniques and off-site techniques. On-site techniques are those that you apply to the content of your website, while off-site techniques are actions that you do outside of your website to enhance its search results. This tutorial will only explore on-site SEO techniques, I will hopefully write in the near future another tutorial on off-site SEO techniques. Here are the seven points you have to take care of when creating your content:

1 - Keyword Selection and Keyword Variations

Keyword selection is key to all the techniques to be discussed below. You have to carefully choose the keyword that you intend to target and focus on that keyword and other possible alterations of the same keyword. When thinking of keywords you must put yourself in the place of your average visitor and think of what keywords he could input in Google when looking for the type of content you have on your website. It is usually better to target phrases instead of single words as the competition for these is much higher. If you have a website about a specific type of juice, you should target orange fresh juice, instead of juice only. This will increase your rank for the combination of these words together and will ensure that the right visitors will be coming to your website.

Once you have selected the keywords you choose to target, you will have to think of all the possible alternations of that word. For example, if you would like to target the word telephone, you could be better off with telephones, as users that search for the singular and plural form will still find your website. The same rule applies for different variations of a verb, e.g. Glow, Glows, or Glowing. At times you might consider targeting several different versions of the word if different incompatible versions of it are probable to be searched for, e.g. University and Universities or Glows and Glowing from the previous example. A helpful tool for choosing which keywords to target is the Google Keyword Selection Tool.

2 - Write Clean Semantic Code

On-site SEO techniques are all about helping a search engine spider find what the most significant content on your website is. For it to properly be able to do this, you have to make sure that your coding structure does not make the indexing process hard or confusing for search engines spiders. You can ensure this by sticking to modern semantic coding style that separates the content from the formatting. Old school web coding uses visual and decorative HTML tags to format the styling the page by using loads and loads of repeated code segments to specify fonts, colors, and other details that a search engine spider is simply not interested in.

You can see the two code snippets below to understand the difference between semantic and non-semantic coding. Both of the examples below have the same content. The first example uses HTML tags to format the look of the text, while the other one uses an external CSS to control the way the text is formatted.

Non-Semantic code:

Semantic code:

3- Put Your Keywords High Up in the Page

Search engines give more importance to words higher up in the HTML source code of the page. So you will have to mention your keywords as early as possible in your page and repeat it various times and various forms for the search engines spiders to catch it. What matters is the position of the word in the HTML code and not visually on the page, it is possible to format and position your content all around the viewport, but for search engine purposes all that matters is the place within the HTML code. If you have navigation and side content bars, you could place these after your main content in the page and then align them in the way you choose by using CSS positioning and/or float effects.

4- Make Use of Proper Structure to Describe Your Content

Search engines nowadays look at structural HTML tags such as heading tags, strong and em tags as an indication to what the important content of the page is. Within the <Body> section of the html file, the most significant tag is the <h1></h1> tag, which by default creates the biggest heading in an HTML document. This means that you should make sure that you place the most important keywords in this heading tag. It is suggested that web authors should only use the <h1></h1> tag once, using it more than once could be penalized by search engines and that can lead to lower search engine rankings.

Other significant tags are the other headings in an ascending order <h2><h3><h4><h5> and <h6> and the <strong></strong> and the <em></em> tags. So make sure you use these to highlight your important keywords through out your documents.

Headings would not usually fit well within the look and design of you webpage if used in their default formatting, to make use of their impact on search engine ranking while retaining a proper design you will have to use CSS to control the way these tags look.

5- Use the <title> Tag Properly

This tip is in essence part of the previous one, but it is so important I had to separate it. The <title> tag of an HTML page is probably the most significant HTML tag when optimizing for search engines. The <title> tag is located within the <head></head> tags and it determines the text that appears in the title bar of the window and on the task bar. You should make sure not to follow the wrongful approach of assigning the title tag of all the pages of a given website as the name of the website, unless the name of the website is the keyword you are targeting in each and every page.

6- Make your content Accessible To Search Engine Spiders

Search engines can only read text embedded in your HTML page, it cannot read text embedded in Flash movies or text drawn on images. Creating a website that has all the text saved as images will mean that no search engine will be able to read any of this text. If you are creating a website that has the text embedded in a medium inaccessible to search engines, you should create a basic textual version of your website if you would like search engines to find it. If you HAVE to use images to decorate essential keywords in your content, such as the names of the sections in the navigation section of your website, you can solve this problem by using image replacement CSS techniques, or provide another text-only navigation menu at the bottom of the page.

Whenever you use images in your text, make sure that you give your images a meaningful name and always make sure that you use the <alt> tag to describe the image.

7 - Use Search Engine Friendly URLs

There are two points to highlight under this heading, the first is that you have to make sure that the links that you use are ones that a search engine spider can follow. Not all search engines spiders can follow dynamic URLs such as those generated using JavaScript and those containing complex signs such as &, #, ?, and $. If a search engine cannot follow the link, then it will simply not index anything further than the index page of the website.

If you do have a readable link, then you might as well enhance your chances of showing up higher at search engine results by enriching the URL with relevant keywords. The best method of doing this is by including the keyword you target in the domain name itself if there is a major keyword that you would like to target for every single one of your pages. For example, registering the domain name http://www.carwashonline.com/ is a good idea if you would like to target the keyword carwash. An alternative way to do this is by embedding the keyword of a specific page in the name of the file of the webpage itself and not necessarily in the domain name, e.g. http://www.carserviceonline.com/carwash.html.

8 - Cross Link Your Content

Modern search engines rate websites on the basis of their 'authority', i.e. the number of links pointing to a website. The higher the number of links leading to your page, the higher it goes within the search results. This applies to both links from other websites and links from different pages within the same website.

In addition to it being a method for enhancing your search engine ranking, cross-linking your content could help your current readers find relevant content on your website. For example, if you have a website that has a collection of tutorials, you can easily link from one tutorial to other ones that extend the topic to make the readers aware of their existence and to increase the ranking of these tutorials.

When creating links to other content you should take note of the actual text of the link and the TITLE parameter of the anchor tag. These two variables could be used to target special keywords to your site. For example, the paragraph above, I linked the word tutorial to Oman3D's tutorial page and set the TITLE parameter of the link (the text that appears when you leave the mouse hovering over a link for a while) as Oman3D Tutorials. Both of these fields have a significant impact on the ranking of the page they link to in relation to the words they contain, which in this example is the keyword tutorials.

Conclusion

I intentionally left out the topic of meta tags due to the fact that they are no longer of much significance to search engines as their usage was much abused by spammers on the web. They are still of some relevance as the description meta tag could still appear as the description of the page in a search result, and it is assumed that they have some impact on contextual advertisement units.

One should not forget that SEO tips help make search engines find worthy content, and without proper content there isn't anything to optimize, so make sure that you focus on creating quality content before looking for ways to optimize your website for search engines.

Related posts:

1. 4 Tips For Raising Your Search Engine Rankings
2. 6 More Tips For Raising Your Search Engine Rankings
3. 7 Search Engine Optimization Strategies That Work

Related posts brought to you by Yet Another Related Posts Plugin.

In this lesson you will see how easy it is to create a nice Flash website menu interface and make it work also! Particularly, you will learn how to:

• Create simple buttons and duplicate them,
• Make your link text look crisp and readable,
• Make mirror copies of your buttons easily,
• Design and code a simple navigational system.

In the Flash example below you can see what you are going to create with this tutorial. Try clicking the buttons!

Drawing the gradient sky background

1 Open a new Flash document. Call the first layer sky.

2 Select the Rectangle tool (R). Use only the fill color – go to the colors portion of the Tools panel, click on the pencil icon (see 1 below) and then the small square with the red line (see 2 below).

3 Draw a borderless rectangle wider than the stage, and about 70 pixels high.

4 If the rectangle is selected, unselect it by clicking anywhere outside it with the Selection tool (V).

Go to the Color mixer panel (Window > Color Mixer). In the upper right part of this panel, select Linear as type of fill.

In the bottom, a color stripe will appear. Click on the small right rectangle and enter the #B6E2FA as color code in the appropriate field. Then click on the right rectangle and enter #78B0E9. The alpha (transparency) properties for both colors should be set to 100%.

5 Select the Paint Bucket tool (K). Click with your mouse on the top of the rectangle and start dragging it diagonally to create a nice diagonal linear gradient fill.

Top of page

Creating the menu buttons

6 Lock the sky layer. Create a new layer and call it menu.

7 Select the Rectangle tool (R). Go to the Properties panel. Set the outline color to a light gray hue, and the fill color to a dark blue one. You can see the colors I used in the image below. Also, set the thickness of the outline to hairline.

8 Draw a 90 by 30 pixel rectangle, over the sky background, near the left edge of the stage.

To have the exact dimensions of the rectangle (because it’s difficult to get them when drawing by hand), double click on the rectangle’s inside (fill) with the Selection tool (V). After you did this, both the outline and the fill will be selected.

Go to the left side of the Properties panel and you’ll see the the W (width) and H (height) fields there. Just enter the dimensions for your rectangle manually and hit Enter to confirm. Make sure that the little padlock icon on the left is unlocked so that you can enter the width and height values independently from one another.

Also, make sure that the position (coordinates on the stage) of the rectangle (the X and Y fields) is set to round numbers. There must be a zero at the end, not any other number.

Why is this necessary? Because when you are drawing precise graphics (like the hairline outline of the rectangle) or using bitmap fonts, crisp pictures, and so on, you must set their coordinates to round numbers. Otherwise you will get blurry and messy results in your SWF movie.

9 Select your rectangle on the stage once again (both the outline and the fill).

Press F8 (or select Modify > Convert to Symbol). In the dialog window that shows up, select Button as type and call it home button. Click OK.

You will see that the rectangle has changed – it is now a button symbol. The small circle in its middle is it’s registration point. This point is relevant when making changes and issuing commands to the button via ActionScript. For example, when you want to move the button programatically, this point’s coordinates are taken as button’s position.

10 Double-click with the Selection tool (V) on your newly made button to enter inside it. You know that you are inside the button if you look above the layers – the indication is there.

11 Call the first layer inside your button symbol rectangle. Lock this layer. Make a new layer and call it text.

12 Select the Text tool (T). In the Properties panel, select static as type of text.

Choose a font you like. Make its size 12 or so. Select white as color, to make it stand out from the blue rectangle background. In the menu below the font size and color options, select “Anti-alias for readability”. This will make your link text look sharp.

13 Click with the Text tool somewhere inside the blue rectangle area and type “Home”.

14 Open up the Align panel (Window > Align). With the link text you just typed still selected, turn on the “Align to Stage” button (see 1 marked on the picture below).

Align the text horizontally (2) and vertically (3) inside the button. So, since the “Align to Stage” button is turned on and you are working inside the button, the text field will be centered in relation to the button’s central point. If you’re interested, I made a separate tutorial on the use of the Align panel.

15 However, there are still manual changes that need to be made. To ensure that your text renders correctly, without any blurry parts, to make it more readable, go once again to the Properties panel and set its position (coordinates) to round numbers.

If the last number in the X an Y fields is equal or above 5 (like 18.9 in the picture above), round the whole number to the upper value. If it is below 5, round it to the lower value. For example, if it is 14.3, round it to 14.0, and if it’s 14.5 or 14.8, round it to 15.0.

Once you have done this, if your text isn’t centered in relation to the blue rectangle below it, position it with arrow keys on your keybourd. Just press the up or down (or left and right if needed) key – this will move your link text by 1 pixel, and it will stay on round coordinates.

16 One last thing before you move on: be sure that the “Selectable” option is turned off. Check if this is so in the options for your text field below the scene.

Why is this necessary? If you have this option turned on, once a user moves her mouse over the button, the cursor for selecting text will appear, instead of the hand cursor. In addition to the fact that this sucks (a text selecting mouse cursor appearing over a button definitely does), your button may even not function at all!

Turn this option on only intentionally – for example, when you want your users to be able to select a piece of text on your flash site, like your address, etc.

17 Click on the “Scene 1″ link above the layers to return to the main scene.

There! The button is finished. Making the other buttons will be easy now.

Duplicating the other menu buttons from the existing one

18 Open the Library (Window > Library). Right-click on the home button symbol and select “Duplicate” from the menu that appears.

19 Call the new symbol gallery button and click OK.

20 Double-click on the newly created gallery button symbol in the Library to enter inside it.

Click on the link label text field to edit it. You can do this by double-clicking with the Selection tool (V), or by clicking once with the Text tool (T). Write “Gallery” (without the quotation marks, of course). Press Esc to exit the text editing mode.

Use the left arrow and right arrow keys if necessary to center the link label inside the button.

21 Go back to the Library and repeat steps 18 through 20. Make three more button symbols. Call them music button, links button and contact button. Change their labels accordingly.

You don’t need to return to the main scene to do this. Just duplicate them inside the Library, double-click on each one of them, change the text and center it. When finished with all the buttons, return to the main scene. You will have five different buttons for your menu in the Library.

Placing the site menu on the stage

22 Choose the Selection tool (V). Click once on the home button to select it.

Press Ctrl+C (Cmd+C on a Mac) to copy this button. Press Ctrl+Shift+V (Cmd+Shift+V on a Mac) to paste this button in place, exactly over the original one.

Now don’t click anywhere and don’t select any other tool. It may seem that you have just one button on the scene right now, but there are two. They are placed exactly one over the another (thanks to the Paste in Place command).

Just press and hold Shift on your keyboard and while holding it, press the right arrow key to move the copy of the button horizontally. Each time you press the right arrow key, you will move the button by exactly 10 pixels. Press the key 10 times to move the button exactly by 100 pixels to the right.

If you had pressed just the arrow key without holding shift, you would have moved your button by 1 pixel at time. This comes in handy when you must design a precise layout.

23 Repeat the previous step by copying and pasting in place the second button and moving it 100 pixels to the right. Do this two more times to have five buttons in all on the scene.

Finalizing the site menu by swapping the button symbols

You will see now how easy it is to place every menu button in its right place. I love Flash! It is wonderful and really easy to work with

24 Click once with the Selection tool (B) on the second button from the left. Go to the Properties panel and press the “Swap” button.

25 In the window that appears, select gallery button and click OK.

Repeat this procedure 3 more times for each of the remaining buttons. In the end, you will have all the particular buttons required for your flash website menu on the stage.

After finishing the part of the menu that will server to navigate through your Flash site, you are going to create the menu’s mirrored reflection.

Making the reflection of the menu

26 Select all of the buttons on the stage. Do this with the Selection tool (V). Click somewhere outside the buttons (for example, on the top left of the menu) and drag your mouse to encompass all of them.

27 Copy the buttons (Ctrl+C) and paste them in place (Ctrl+Shift+V).

28 While holding Shift press the down arrow 3 times to move the copies down 30 pixels from the original symbols.

Release the Shift key and press only the down arrow key five times. You have moved your button copies exactly 35 pixels downwards.

If you followed the dimensions I gave you at the outset of this tutorial for creating your buttons, the copies will be now spaced just a few pixels from the originals. This will make for a nice and more realistic mirror reflection effect. Also, you don’t want to move your mirrored buttons too far from the real menu, to save space.

29 Keep the copies you just moved down selected. Select Modify > Transform > Flip Vertical.

You have just made a mirror reflection of the menu. Now ain’t that easy? Sure it is But let’s give it a more realistic look.

30 You must have your reflection buttons still selected. In the Properties panel, click on the Filters tab (1 in the image below).

Then click on the little blue plus icon (2) and select the “Adjust color” blending filter. The controls for adjusting the colors of your buttons will appear.

By dragging their respective sliders to the left, set the Brightness to -18 and Saturation to -36. Or just enter these values manually in the appropriate fields. Leave the other two values (Contrast and Hue) at zero.

31 Click on the Properties tab (right next to the Filters tab you clicked in the previous step). Select Alpha from the Color menu and set it to 41%.

32 Lock the current (menu) layer. Create a new layer between the two existing ones and call it blue background.

You will draw a blue gradient here. This will make your navigational header look more realistic and beautiful. Since you already have a sky-like graphic behind your menu, it makes sense to create a reflection of it too.

33 Select the Rectangle tool (R). Block the outline color and select a fill color that is in good contrast with the existing graphical elements. You are doing this only to draw and position your rectangle more easily. You will change its color to a gradient later.

Draw a rectangle that 48 pixels high. The width isn’t important – only make it the same size as the scene or wider than that.

It is important to place the rectangle so that its upper edge is between the real buttons and their reflections.

Unselect the rectangle by clicking on an empty part of the scene with the Selection tool (V).

34 Go to the Color Mixer panel, click on the paint bucket icon to adjust the fill color (and not the outline – the pencil icon – just in case it is selected by default). Select Linear as fill type. Make the following choices for your gradient:

The first color (little square on the left) should be set to #B6E2FA and the second to #78B0E9. Leave the alphas for both colors at 100%. Leave the left color on the gradient’s left edge and move the right one a little bit inside (just click on the quare and drag it).

This gradient is just a little bit different from the one you made in step 4.

35 Select the Paint bucket tool (K), click on the rectangle’s bottom edge and start dragging upwards to make a vertical fill. In this way, the darker color will be at the top.

You don’t have to make the exact mirror copy of the sky beneath the menu buttons. What you’re making now will look very nice and interesting.

36 Select the rectangle and copy it (Ctrl+C). Lock the current layer (blue background).

37 Make a new layer above all the existing ones and call it overlay.

38 Paste in place (Ctrl+Shift+V) here the rectangle you just copied.

39 Go back to the Color Mixer panel and make the following gradient: you must have four color squares. Add a color square just by clicking anywhere between the two existing ones.

All the squares should have their color set to pure white (#FFFFFF). But their alphas should have the following percentage values (from left to right): 100, 79, 50 and 28.

Drag the squares so that they look like shown on the image below.

Lock this layer.

Now isn’t this a nice menu with its mirror reflection below it? Sure it is

Before making your menu functional via ActionScript, you must first make place for the different sections of your site, which is exactly what you will do in the next few steps. Onward!

Setting up the navigation system for your Flash website

40 Make a new layer on top of the existing layers and name it site content.

41 Right-click on frame 5 of the newly made layer and select Insert Keyframe from the menu.

42 Draw any kind of content here. Paint something with a brush, make a circle, anything at all. This is just temporary dummy content. Don’t lose time on making real content now, you will do it later. Follow through to the end of this lesson, it is easy to make changes later.

43 Repeat the previous step 3 more times: right-click on frames 10, 15 and 20, select Insert Keyframe from the menu and insert some kind of dummy content there.

You can draw over the existing content or erase it and make something new. I am telling you this because when you insert a keyframe into a layer, Flash automatically copies the content from the previous one, if there existed something.

44 When finished, go back to the first keyframe of this (site content) layer by clicking on it (standard left mouse click). Create some content here too. Write “home” or draw a house

Your timeline should now look like the one shown on the image below.

45 Lock this layer and make a new one above it and name it labels.

46 Click on the first (and only, so far) keyframe of the labels layer to select it. Go to the Properties panel – you’ll find the “Frame label” input field on its left side.

Click inside it, type home and hit Enter to confirm.

47 Still in the same layer, right-click on frame 5 and select Insert Keyframe from the menu. Do this again for frames 10, 15 and 20. Your upper two layers should have keyframes in exactly the same places.

48 Click on the frame number 5 to select it. Go again to the Properties panel and give it a name: gallery. Repeat this for the remaining three keyframes (10, 15 and 20): call them music, links and contact, respectively. All these frame labels will be visible on the timeline.

Lock this layer.

49 Right-click on frame 20 of the overlay layer and select “Insert Frame” from the menu (not Insert Keyframe).

This will make this layer’s content appear throughout your flash site. If you don’t this, these contents will only be visible on the first keyframe, at the beginning.

And of course, all the other menu elements must be visible throughout the timeline. So make this for each of the remaining layers: menu, blue background and sky.

Below you can see the final look of the timeline.

Now that the site’s navigation system is in place, you will name your buttons (all of them) so that you can issue them commands programatically later.

Naming the menu buttons

50 Unlock the menu layer. Select the Selection tool (V). Click somewhere on stage to unselect anything and everything that might be selected.

51 Click on the first button on the menu from the left to select it (the Home button). Don’t click it’s reflection.Go to the Properties panel, and enter its Instance name in the appropriate field: call it homeBtn. Hit Enter to confirm.

52 Repeat the procedure from the previous step for each one of the menu buttons: call them galleryBtn, musicBtn, linksBtn and contactBtn, respectively.

The Instance names make possible to control your buttons via ActionScript.

53 Now, select the first mirror button – the reflection of the home button (the first from left in the second row). Give it an Instance name – call it homeBtn1.

Why give Instance names to these mirror buttons? Well, precisely because their purpose is to serve only as visual elements – mirrored reflections of real menu buttons. If you left them like this, when a user moved his mouse over them, the hand cursor would have appeared. This would create a really inappropriate confusion. You must always be user-friendly! So, you are naming these mirrored buttons to turn them off later via ActionScript. Once you are going to do that, they won’t function anymore, and will just be graphical elements, which is what you want to accomplish!

54 Give Instance names to all the other mirrored menu buttons: call them galleryBtn1, musicBtn1, linksBtn1 and contactBtn1.

Writing the ActionScript code that powers the menu and the website navigation system

55 Lock this (menu) layer. Create a new layer above all the others and call it actions.

56 Click on the first (and only) keyframe of the new actions layer to select it.

57 Open up the Actions panel (Window > Actions). Write the following line of code inside:

stop();

This simple command stops your movie from going on and looping endlessly.

Now, I want you to do a little test. Test your movie (Control > Test Movie). Move your mouse accross the buttons and their reflections (mirrored buttons). As you can see, the hand cursor will appear over both the menu and its mirror image. And you don’t want that, so now I am going to show you how simply it is to disable these buttons.

58 Write this piece of ActionScript just below the first line you entered in the previous step:

homeBtn1.enabled = false;
galleryBtn1.enabled = false;
musicBtn1.enabled = false;
linksBtn1.enabled = false;
contactBtn1.enabled = false;

Test your movie again (Ctrl+Enter on a PC, Cmd+Enter on a Mac). Move your mouse over the reflection buttons. As you can see, there’s only the standard arrow cursor now – the hand cursor doesn’t appear anymore. You can even try clicking on them – nothing will happen.

Yep, it is that simple! The enabled property of the button symbol can have two values: true or false. By default, it is set to true. So when you set it to false, the button is visible, but doesn’t function any more – it cannot be clicked, even if you tell it to do so via ActionScript. The button stays disabled until its enabled property is set to true again (of course, you’ll leave it at false for the reflected buttons).

59 Append your code with the following lines (again, just put it after the existing code):

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}
galleryBtn.onRelease = function():Void {
gotoAndStop("gallery");
}
musicBtn.onRelease = function():Void {
gotoAndStop("music");
}
linksBtn.onRelease = function():Void {
gotoAndStop("links");
}
contactBtn.onRelease = function():Void {
gotoAndStop("contact");
}

Test your movie (Ctrl+Enter). If you did everything exactly as i wrote up to this point, you should be able to navigate your site. Click on the menu buttons and see for yourself! Easy navigation, isn’t it?

Explaining the ActionScript behind the site menu buttons

First, I want to explain you why you named the frames. Using frame labels (like gallery for example) instead of a frame number (5) has one practical benefit:

If you ever change your site contents by moving the keyframes or inserting new ones, all you have to do is move the frames with labels so that thay stay above their corresponding content keyframes. There is no need to go back to your ActionScript code and rewrite or change the numbers.

Now let’s see how the code for the buttons works. I will explain the code functionality just for one of the menu buttons, because they are basically all the same – only the button Instance name and the frame label change.

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}

The first line,

homeBtn.onRelease = function():Void {

says that a function is assigned the onRelease event for the homeBtn button. The onRelease event happens when a user clicks and releases his mouse over the button.

If you want you can put the onPress event here instead, that happens immediately when a user has just pressed his mouse over the button. But that event is more likely to be used in games, when something has to happen immediately when the mouse has been pressed – like a spaceship shooting, for example. I like to assign the “standard” (onRelease) click for the buttons, menus and various other kinds of website interfaces.

So, once the onRelease event has happened, a function gets executed. You certainly noticed the :Void keyword after the function() keyword. This means that the function in question does not return a value. In many cases, a function in ActionScript has to return a value. Look at this example:

function mySum():Number {
var a:Number = 3;
var b:Number = 4;
var sum:Number = a+b;
return sum;
}

This function calculates a sum of two variables’ values. The last line tells to return the value of sum to whatever object that called the function. So that’s why the :Number keyword after the function’s name. It states that the value returned by this particular function will be a numerical one and not a text value or any other.

So, in the case of your menu button, the type of value that the function returns is Void. This means nothing, zero – the function does not return any value, it just serves to advance the playhead to a particular frame on the timeline.

And just what is it that gets run when the function is executed? Everything between its curly braces – { and }. Here it’s about just one line of code:

gotoAndStop("home");

This line tells Flash to jump to the frame which is labelled home and stay there. That’s all there is! Simple! Just one more thing, however: if you wanted to insert a frame number instead of a frame label here, you must do it without the quotation marks. Like this:

gotoAndStop(1);

Fine. Before wrapping this tutorial up, just read some advice below.

A little bit about site navigation and usability

You have seen how to make a slick menu. However, always keep in mind your site (or your client’s site) users. The user is king. If a site happens to be difficult to navigate and counter-intuitive, the most beautiful and appealing graphics and design won’t help.

In fact, what is often overlooked, is that the design inolves thinking and responding to your users’ needs. Make a button look like a button – this doesn’t mean it has to look ugly or too similar to a real-world button. There many, many examples of beautifully designed navigation interfaces and menus who are also intuitive and easy to use.

You know that the reflection buttons you made in this lesson are real button symbols. The user sees them as a nice graphic element only, which is exactly how it should be.

Usabilty is a science in itself, that applies equally to HTML and Flash websites. HTML is simple, and yet there are many things you have to think about when building such a site. When confronted with all the powerful and rich possibilities that Flash has to offer, this just gets more complicated. When you have a myriad of possibilites for design and developement, don’t get overwhelmed and think that you must try and implement every single great gizmo in your Flash website. Be nice to your users and they’ll like your site

Related posts:

1. Glowing neon playback control buttons
2. How to make a complete Flash website navigation system with a built-in preloader for external content
3. Glowing neon playback control buttons

Related posts brought to you by Yet Another Related Posts Plugin.

You can define the font-style, font-weight, font-variant, font-size and font-family all at once.

Value: font-style, font-weight, font-variant, font-size and font-family

<p style="font: italic bold 20px Verdana;">Sample Text</p>

Output:

font-family
You can choose which font family to use. You can put other font-family alternatives just in case the first font-family is not available in the user’s system. In our example below, if Arial is not available in the user’s system fonts, then it will use Helvetica . You can use many other generic fonts. They will be prioritized according to their order.

Value: font name

<p style="font-family: Arial, Helvetica">Sample Text</p>

Output:

font-size
used for setting the size of the font

Possible Values:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
percentage

<p style="font-size: large;">Sample Text</p>

Output:

font-style
Used for setting the style of the font

Value: normal, italic, oblique

<p style="font-style: italic;">Sample Text</p>

Output:

font-variant
Used for setting fonts to small caps or in normal format

Possible Values: normal, small-caps

<p style="font-variant: small-caps;">Sample Text</p>

Output:

font-weight
Used for setting the weight of the font

Possible Values:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

<p style="font-weight: bold;">Sample Text</p>

Output:

color
Used for setting the color of a text. The color value may be a color name: (blue, red, etc.), a hexadecimal number:(#ff00ff, #333443) or an RGB color: (rgb(255,255,000), rgb 122,234,123).

Value: color

<p style="color: red;">Sample Text</p>

Output:

direction
Used for setting the text direction

Possible Values: ltr, rtl

ltr (left to right) default
rtl (right to left)

<p style="direction: rtl;">Sample Text Sample Text2 Sample Text3</p>

Output:

line-height

Used for setting the spacing between lines.

Possible Values:
normal
number
length
percentage

<p style="line-height: 30px;">
Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph
</p>

Output:

letter-spacing

Used for adjusting the space between letters

Possible Values: normal, length

<p style="letter-spacing: 5px;">Sample Text</p>

Output:

text-align

Used for setting the text alignment

Possible Values:
left
right
center
justify

<p style="text-align: center;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph Sample Paragraph
</p>
<p style="text-align: justify;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
<p style="text-align: left;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
<p style="text-align: right;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>

Output:

text-decoration

Used for adding decoration to texts

Possible Values:
none
underline
overline
line-through
blink

<p style="text-decoration: line-through;">Sample Text</p>

Output:

text-indent
Used for indenting the first line of a text

Possible Values: length, percentage

<p style="text-indent: 20px;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
Output:

text-transform

Used for controlling text display

Possible Values:
none
capitalize
uppercase
lowercase

<p style="text-transform: uppercase;">Sample Text</p>

Output:

white-space

Used for controlling white spaces

Possible Values:
normal
pre
nowrap

<p style="white-space: pre;">
Sample Text
Sample Text Sample
Text Sample Text Sample Text</p>

Output:

word-spacing

Used to control the spacing between words

Possible Values: normal length

<p style="word-spacing: 10px;">Sample Text Sample Text</p>

Output:

Related posts:

1. Internet Explorer CSS bug fixes
2. Two column layout using pure css and divider image
3. CSS borders

Related posts brought to you by Yet Another Related Posts Plugin.

Some time ago I was trying to figure out how to create two column css layout where left column will be divided from the right one with a vertical line.
It would be simple when you are trying to use a table layout - simply apply a left border to the right column and done, but I wanted to do completely table-less layout. When you use border in css for left or right <div> then depends on the length of the columns you might end up with a line shorter than the column with the content.

This tutorial explains how to design two column css layout with a line dividing left column from the right going through the whole length of the page, regardless of the length of the columns. See it in action: Demo

To start with we need to design a structure of the layout.
Please copy and paste the following structure in between the <body></body> tags of your page.

<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left">
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="right"></div>
<div></div>
</div>
<div id="footer"><p>©</p></div>
</div>

Create a small, 1px by 1px image with some background (it would be best to give it the same colour as a border of your template) and save it as divider.gif.
You can also get this image from here:

Now create a style sheet and link it to our document.
Open style sheet and copy and paste the following content.

html, body {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #3F4554;
text-align: center;
line-height: 1.8em;
}
#wrapper {
width: 800px;
margin: 15px auto 15px auto;
padding: 0px;
text-align: left;
border: solid 1px #dadada;
}
#header {
width: 100%;
height: 70px;
background-color: #f1f1f1;
border-bottom: solid 1px #dadada;
}
#container {
width: 100%;
height: auto;
margin: 0px;
padding:2px 0px;
background-image: url(divider.gif);
background-repeat: repeat-y;
background-position: 200px 0px;
}
#left {
width: 160px;
height: auto;
float: left;
padding: 20px;
margin: 0px;
}
#right {
width: 530px;
height: auto;
float: left;
padding: 20px 50px 20px 20px;
margin: 0px;
}
#right p {
margin: 0px;
}
.clearer {
font-size: 0px;
height: 0px;
width: 100%;
display: block;
clear: both;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
list-style-image: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: inline;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color:#3F4554;
text-decoration: none;
display: block;
margin: 0px;
padding: 0px;
width: 160px;
}
#nav li a:hover {
color: #ccc;
text-decoration: none;
}
#footer {
padding: 0px;
margin: 0px;
border-top: solid 1px #dadada;
text-align: center;
}
#footer p {
margin: 0px auto 0px auto;
padding: 10px 0px 10px 0px;
color: #aaa;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #aaa;
text-decoration: none;
}
#footer a:hover {
color: #ccc;
text-decoration: none;
}

The whole magic with the vertical line is done by using the background image in #container and giving it the position and repeat-y property (bolded code).

Now regardless whether the left of right column has more content, the line in between the columns will always be going from the top to the bottom of the page container.

Related posts:

1. 2 Column Layout
2. CSS Layout Technique – Achieving 100% Height
3. CSS Shortcuts

Related posts brought to you by Yet Another Related Posts Plugin.

This article is for people who have little to no experience with CSS. I will explain very detailed which codes to use and how to use them. At the end of this tutorial, you can code yourself this rollover menu, completed in CSS and HTML.

!tip ALWAYS check your code on faults. You can validate CSS and (x)HTML.

!tip Use tabs and space to organize your codes (WordPress wouldn’t allow me to). You can download the files (with organization) below.
We’ll start. First, you should create 2 files. One called rollovers.css and the other one rollover.html. Those files should be empty. The next step is to open up rollover.html. In this file, our content will be stored. In the file, past these codes:

Those codes will tell your browser everything it needs to know. It is written in XHTML 1.0, so your browser will render your webpage the XHTML 1.0- way.

We are ready to start with the rollover menu. First, we will only code the structure. If we have completed that part, we can start changing the style.

So, you want the codes. No, I’ll first tell you something about the structure. It may sound strange when you hear this for the first time, but rollover menus are built from Unordered lists. When I first heard this I thought it wasn’t possible. I thought CSS could never change the expression of a list that much. But CSS can!

Everything that is content will need to be coded between the <body> </body> area. That’s where we start typing too. We’ll start with a list, which you can call for with the <ul></ul> attribute. For every item you want add, you need a <li></li> between the <ul> attribute. Example:

<ul>
	<li>item</li>
	<li>item2</li>
</ul>

You can add as many items as you want, but maybe it’s easier to keep it two or three items at this time. When we are finished, there’s enough room for more items.
In a rollover menu, there need to be clickable links. All you have to do is add a <a href=”"> before and a </a> after your item.

<ul>
	<li><a href="http://www.divitodesign.com/wp-admin/item.html">item</a></li>
	<li><a href="http://www.divitodesign.com/wp-admin/item2.html">item2</a></li>
</ul>

Your menu structure is finished! The only thing we have to do in the .html file is to make sure the right style file is included. We do this with an extern CSS file. You have to include this in the rollovers.html through the following codes.

As you can see, we include the rollovers.css as the extern CSS file.

Now, save the file and see how it looks. We will now start with the CSS in the rollover.css file!

CSS

Open up your CSS file and make sure it is empty. In CSS, you style existing attributes like <ul> , <body> and <font> as the way you write them. Example:

ul {
color:#fff;
}

With this very simple code, you style all the ul> attributes in the webpage. You can add a lot of style-attributes to every attribute you would like to style.

If you want to style a link attribute inside a ul> attribute, this is the way you should do it.

ul a {
color:#fff;
}

When you take a look on your rollover.html file, you see that your menu has this structure:

<ul>
	<li><a></a></li>
</ul>

As you can see, the a> attribute is inside the li>, and the li> is inside the ul> attribute. To style the links inside your menu, you have to call for it in your CSS file like this. This order only.

ul li a{
color:#fff;
}

And, because we will need to style all the ‘menu items’, we need to style ul li too. Take a look below for some basic style on the ul, ul li and ul li a styles. Explanation is beneath the codes.

ul{
margin: 0;
padding: 0;
font: 13px 'Lucida Grande', Arial, sans-serif;
list-style-type: none;
}
ul li{
display: inline;
}
ul li a{
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #b0f664;
border:1px solid #8bda35;
}

Let’s start with the ul attribute. Margin is the distance outside the list, padding is inside the box. Font is just the font used, size of the font etc. Now an attribute you might have never heard of. It’s called list-style-type and it defines what should be shown before every item. When you look at your default list-style-type, you’ll notice there are black dots before every item. This is something we do not want on our menu, so we set its value to none. If you want your whole menu to show something, like font size, you can change it all in this ul attribute.

The ul li attribute. I have not much to tell you about this one. Only thing I change from the default version is the display value. When you look at your default list, you see the items are beneath each other. This is something we don’t want with the menu we are making. When you want a vertical menu, you should not change this value.

Now, take a look at the ul li a style values. In this style, you can change everything you see when you don’t roll over the menu with your mouse. You see I wanted a border, a background-color, a text color and some space between the text and the border, called by with padding. At default, a link has a blue color, with an underline. I deleted the underline by changing text-decoration to none.

Please save your file and see what changed. You could also save it after you have added a single line, so you know which things changes with every aspect you add.

To finish this menu, you might want a different background color when you roll over an item. You can do this with changing the ul li a:hover attribute. Take a look below for the codes.

ul li a:hover{
background-color: #ccf69f;
border:1px solid #a8e765;
}

You don’t have to re-type all the things you don’t want to change on the rollover. Only the things, like background-color and border, you would like to change goes here.

We are finished! This is the easiest way to make a rollover menu. Best of all, this is written the standard way! I love standards, and I hope when you have read this tutorial, you think the same.

Related posts:

1. Horizontal CSS Menus That Grow on You
2. CSS borders
3. CSS Shortcuts

Related posts brought to you by Yet Another Related Posts Plugin.