Sleek, Sexy and Stylish!

No, these are nothing like the buttons used to fasten shirts and unfasten women’s blouses these are the type used to create wonderfully stylish clickable areas on web pages. In total, there are 21 free Gimp button brushes waiting to be downloaded. They are easy enough to use but I have provided full instructions and tips below for those who need them. Those instructions along with their usage and redistribution notes are also in the the Readme file packaged with the download.

The buttons are in greyscale so can be colored any way you like; they are without text to make it easier for you to customize them; and they are quicker to use than the scripts that originally created them. The ones shown in the image are only exemplary of the goodies given away in the download.

Website Buttons (108)

INSTALLATION

Unzip the downloaded file and place the gbr files contained in the GIMP-Brushes-Web-Buttons folder into your GIMP Brushes folder. Linux will find this in home/.gimp-2.6/brushes. Windows users, why don’t you migrate to Linux???? Just kidding  look for GIMP under Program Files then locate your Brushes folder under that.

USAGE INSTRUCTIONS

1. create a blank canvass (File>New). Use a white background,
2. select a brush color,
3. select the paint brush icon from the Toolbox,
4. select one of the buttons (brushes) from the Layers and Channels box,
5. paint the brush onto the canvass (press the left mouse button multiple times if you want a deeper colour),
6. follow this step if your chosen button has curved edges, otherwise skip to step 7:
   1. select the fuzzy select tool (it’s in the Toolbox, 4th one from the left along the top row, looks like a magic wand). Adjust the threshold for precision (between 90 and 100 is usually best),
   2. left click on the canvass (not the button),
   3. make the selected areas transparent (right click and select Colours>Colour to Alpha and follow the presented instructions),
7. autocrop the image (Image>Autocrop Image),
8. save the image (for safety),
9. if required, add text with the Text Tool (it’s in the Toolbox),
10. save the image again but with a different name. This could be your inactive button.
11. select the button layer,
12. darken or lighten the image (Colours>Brightness-Contrast etc),
13. save it again with a different name to the last one saved. This could be your active button.
14. darken or lighten the image (Colours>Brightness-Contrast etc),
15. save it again with a different name to the last one saved. This could be your hover button.

TIPS

1. Two of the brushes are shadows. One is for use in combination with the Aqua Pill button, the other is for the Aqua Bou button. They are handy for creating shadows of different colour to the main button. The Aqua buttons already come in non-shadowed and shadowed form;
2. Some of the buttons may be filled with gradients (Colours>Map>Gradient Map) etc;
3. It’s best to use dark colors or a combination of a light colour with a secondary dark color (with lowered opacity) superimposed over it i.e. use the same brush twice but with different colors;
4. If a button’s background needs to be changed from transparent to a color just right click the image layer, create a new layer, fill it with your chosen color then move the layer’s position in the layer stack to place it under the button’s layer.

I wish you the best of fun with them.

Website Buttons (108)

  Copyright secured by Digiprove © 2010

From top to bottom: unstyled, illusionary gloss, true glossy menu buttons

“Ooh, look at that website with nice sleek and shiny page tabs. I bet it turns all the geeks heads. Why can’t I be like that guy?”

Recognize those thoughts? Of course you do. We all have feelings of inadequacy at times. Luckily for us regular guys, website sexiness can be learned. With a few easily digested and remembered tips you too will style websites that will make other webmasters sick with envy.

Back in October last year I showed you how to use CSS to highlight HTML elements when specific id and class names coincide on a page. For those who didn’t pay attention or who missed the lesson the original article is here and the example pages with all the required CSS and HTML displayed on them are here.

When I first wrote that guide I intended to follow it up with another one to show how to jazz-up those page tabs. I’ll be honest, I forgot to do it. Will you forgive me if I write that guide now? Please… Pretty please…. Whether you do or do not, I don’t really care because I know that deep down inside, somewhere close to the bottom of your soul you have already forgiven me; and here is that long awaited guide for those who want to know how to create glossy look navigation tabs. As with the previous guide, the HTML and CSS code for each page is printed on the page it effects. So now’s the time for you to switch on some music, relax and read as I show you how to turn this

The basic layout - no jazz

into this

Decorated CSS Controlled Navbar Tab

and this

Real glossy-look navbar buttons

It is advisable for you to look at the old example pages and the new example pages here and here just so you get an idea of where we are headed. The HTML and CSS for each page is included on each page it creates. Instructions to create true glossy tabs follow the simple “illusionary” method

Before we play around with the menu tabs, let’s jazz-up the pages and give them a little style 8-)

Most websites use one background style and image for every page. I think that’s a little bland. Granted, JournalXtra uses one style for nearly every page but JournalXtra is a Wordpress blog and not a finely crafted piece of HTML art. If I wanted to use separate designs for each page of JournalXtra then I would create multiple templates but I’m too lazy to do that for my own blog.

To give each page it’s own distinct look we must give them each an identity. The best place to attach this identity is its <html> tag. For our demonstration pages, we will use

<html id="one">
<html id="two">
<html id="three">
<html id="four">
<html id="five">
<html id="six">


Next we add a CSS control for each <html> tag. The CSS for <html id=”one”> controls the HTML element of page number one and looks like this:

html#one
{
background-image: url(smoke-background-page-one.jpg);
background-position: top left;
background-repeat: no-repeat;
}


That CSS gives the page a nice non-repeated background image which is drawn from the utmost top-left of the page.

The <html> tag for each page with an ID is styled by similar CSS. It looks more complicated than it is. Once you begin to do it you will find it easy to do. Look at the HTML and CSS printed on the example pages to get an idea of how individual HTML tags are written and styled.

The CSS that is common to all <html> tags is written separately to the identified <html> styles, like this:

html
{
width : 100%;
background-color: #000000;
color: #ffffff;
}


Have a look at page number one to see all the HTML and CSS laid out side by side.

Now that’s out of the way, let’s sleek up the navigation bar with glossy tabs

In the original guide we learned to instruct browsers to display page tabs differently according to whether they are active, inactive or hovered over. We did that by specifying a CSS control for the coincidence of two classes, two ID’s or a class and an ID. For example, we can tell a browser to display a red tab for page one when page one is active and blue tabs for all the other pages because they are inactive; and a blue tab for page one when one of the other pages are active and page one is inactive.

The part of the original example page CSS that specifies the button style for the active page looks like this:

body#pageone a#itemone,
body#pagetwo a#itemtwo,
body#pagethree a#itemthree,
body#pagefour a#itemfour,
body#pagefive a#itemfive,
body#pagesix a#itemsix
{
background: red; /* active button's colour*/
color:#000000;
border: 2px ridge #CDD5DA;
}


That CSS instructs a web browser to display a red background for an <a> tag with a specific ID when it is displayed on a <body> tag with a specified ID e.g #pageone and #itemone OR #pagetwo and #itemtwo.

To sleek it up we must change the background setting from a color to an image and give the web browser four  instructions:

1. which image to display,
   
2. to repeat that image horizontally,
3. to not display a border, and
4. to use a more suitable text color

In essence, the above CSS becomes:

body#pageone a#itemone,
body#pagetwo a#itemtwo,
body#pagethree a#itemthree,
body#pagefour a#itemfour,
body#pagefive a#itemfive,
body#pagesix a#itemsix
{
background-color: black;
background-image: url(active-glossy-tab.jpg);
repeat: repeat-x;
color: white;
}


Similar edits must also be made to the other elements of the menu that control the design of the inactive button and the hovered over button. Those elements are

a.ment

and

a:hover.ment

We change them to give a more suitable text color, background color, background image and to remove any borders.

Once the border is removed, the menu buttons must be enlarged horizontally by a pixel or two to compensate for the space that was previously taken by it. Without this compensation, the menu will appear slightly shrunken relative to the rest of the page.

To calculate the proper size for each menu item simply divide the width of the menu’s encasing div by the number of tabs within it (in this case 840 pixels divided by 6 menu items). In this the menu case has the ID of #menucase and the width of the button is specified in a.ment

Creating the Buttons

The illusionary method

The easiest way to create a glossy look navbar is to create active, inactive and hover-over buttons with two-tone color graphics (a graphic with one color at it’s top half and another color at its bottom half). Be aware that this method is only a trick of the eye and works for small tabs only.

The illusionary glossy menu

To make two tone graphics we use a simple graphics program like Paint (Windows) or Kolourpaint (Linux). The full instructions are:

1. create a canvas 10 pixels wide and 31 pixels high,
2. zoom in %800,
   
3. draw a pixel wide line horizontally across the middle of the canvass (15 pixels from the top or 15 pixels from the bottom),
4. fill the bottom half of the canvass with one color,
5. fill the top half of the canvass with a lighter or darker tone of the color used for the bottom half of the canvass,
6. fill the dividing line with either of the colors above or below it.
7. resize the canvass so that it is 1 pixel wide and only as high as required for the buttons,
8. repeat the process until you have a button background for the buttons’ active, inactive and hover states (you should have 3 graphics in total).

Creating a Two-Tone Graphic with Kolourpaint

Color is the key consideration here, for greatest effect the top and bottom colors shouldn’t be too dissimilar and should not be too dark. The color of the page and the button text also contribute to the effect. Light text colors work best because they impress glint.

For example page one’s CSS, the active button is specified in body#pageone a#itemone the inactive button is specified in a.ment and the hover button is specified in a:hover.ment. a:active.ment is only used to specify the text color of the active tab.

The non-illusionary method

Any image such as a picture, texture or gradient may be used as the background of a button or other HTML element. Were I to really style up those menu buttons I would create a truly glossy graphic with GIMP or Photoshop (I prefer GIMP). To give you the general idea, here is the same menu with buttons created with a gradient (gradient buttons):

The navbar buttons with real gloss

Those buttons were created with GIMP. The method is simple (click the below image to learn the location of the used tools):

1. Create a canvass of 20 pixels by 60 pixels,
2. Select the gradient tool,
3. Choose a foreground color,
4. Choose a background color,
5. Stretch the gradient over the canvass,
6. Save it as the active button graphic,
   
7. Reverse the gradient tools direction,
8. Repaint the gradient,
9. Save it as the inactive button graphic,
10. Create another one for the hover button graphic if required.

Creating a gradient strip with GIMP (click to enlarge)

It really is that easy. The hard part is creating the menu with CSS and HTML and getting the buttons to highlight when selected. But you have nothing to worry about as the CSS and HTML is printed on the example pages

If you really want to thank me for this guide then please backlink to JournalXtra from your directory or somewhere else.

To what else can we apply this CSS control method

We can use the same principle to affect any HTML tag. For example we can tell a web browser to display a different background image for various <div> boxes whenever a specific page loads. To do that we would assign an ID to the <html> tag of each page and specify a CSS control for the coincidence of an <html> tag with a specific ID and a <div> tag with a specific ID. For example:

html#one div#boxone
{
background-image: url(I-am-a-special-box.jpg);
background-position: top left;
background-repeat: no-repeat;
}


The above CSS would tell a browser to load div#boxone and fill it with the background image “I-am-a-special-box.jpg” whenever the page <html> tag has the ID of “one” (i.e <html id=”one”> ).

It is an amazingly simple CSS control principle to implement that is rarely used beyond navigation bar tabs. It’s a shame because the web would be a much more aesthetically pleasant place were it more frequently applied to other page elements.

  Copyright secured by Digiprove © 2010

Have you ever wanted to make the buttons on your webpages remain highlighted when they are clicked and active? I mean, wouldn’t it be great to use CSS to not only make your buttons and tabs change colour when hovered over but to give them a different appearance once they have been clicked?

The trick to changing the appearance of a clicked button or link and fixing that appearance for the time its page is active is to set a CSS style for the simultaneous occurrence of separate conditions. Don’t worry, it’s easy done than said.

Imagine we have two webpages and a menu that links to both pages; and all we want to do is ensure that whenever the link to Page One is clicked then the “Page One” tab changes from dark red to bright red and whenever the link to Page Two is clicked, the “Page One” tab returns to dark red and the “Page Two” tab becomes bright red. For example:

To achieve our aim we must give three instructions to web browsers:

1. Whenever it is browsing Page One it must highlight the menu tab for “Page One”;

2. Whenever it is browsing Page Two it must highlight the menu tab for “Page Two”; and

3. It must not highlight tabs for pages it is not browsing.

The third item generally takes care of itself but the first two items require specific CSS instructions that are triggered by the co-incidence of two element IDs within the HTML of affected and effecting pages. To do this, we:

1. Assign an id to the <body> tag, and

2. Assign an id to every <a> tag within our menu.

Remember that IDs are unique within a page so no two tags (elements) can have the same ID.

So we could have tags like these:

<body id=”pageone”>

<a id=”itemone” href=”#”>Page One</a>

<a id=”itemtwo” href=”#”>Page Two</a>

and

<body id=”pagetwo”>

<a id=”itemone” href=”#”>Page One</a>

<a id=”itemtwo” href=”#”>Page Two</a>

Our CSS would look like this:

a

{

background: #a1012e;

}

body#pageone a#itemone,

body#pagetwo a#itemtwo,

{

background: #c66681; /* active button’s colour*/

color:#000000;

border: 2px ridge #cdd5da;

}

For ease of understanding, here’s a quick reference table of the CSS for <body> and <a> IDs:

The CSS tells a browser to check the ID of the <body>, compare it with the ID of the <a> tag and determine whether any specific styling should be applied. It’s like having two light switches and seeing whether they are both on, both off, one’s on and the other’s off or the other is on and the one is off. In our case, when the browser is on Page One it reads the <body> ID as #pageone so highlights the <a> tag with ID #itemone and does nothing with #itemtwo. It does similar when it is on Page Two.

It is a lot easier to impliment than it looks and the same methodology can be applied to any page element i.e it is not restricted to menus, buttons and links, it could easily be applied to pictures or adapted to work when three or more conditions are met such as on a page within a <div> that’s within another <div>.

I’ve created an annotated example site with this method of highlighting active tabs using CSS and HTML in effect. Full CSS and HTML examples are provided for each page to make it easier to follow. You can visit it here

Go to part 2 to learn how to create glossy effect navbar buttons

Just to be clear about this, I didn’t develop the method described above, I found it on another website when I was learning HTML (the description is all my own work). Although it’s a natural development of HTML I’d like pass attribution to the author who taught it to me; unfortunately, I can not re-find his or her website but when I do I will note the details here.

  Copyright secured by Digiprove © 2010