Lowter

Sponsor: The JavaScript Anthology

The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)

Browse Blog Archives

« November 2006 December 2006 January 2007 »

Blog Entries from December 2006

Make Your Own Round Web Button

By Daniel Malmqvist

Photoshop time! Alright, today I am going to guide you through making a stylish round button.

Step 1: Create your document

First, create a new document with the dimensions 120x120 pixels. You can use any background colour that you would like. I will be using a white background (#FFFFFF).

Step 2: Create your circle

Next, create a new layer (CTRL+SHIFT+N). Using the "Elliptical Marquee Tool", make a round selection, holding SHIFT to keep it proportional. You can make the selection any size you would like, although I recommend not to make it too small.

Fill it with a colour; I will be using #92AAB6.

Step 3: Setup the Blending Options

Now you need to add some style to your newly created circle. Right click on the the layer you just made and select "Blending Options".

Under "Inner Shadow" apply these settings:

Under "Inner Glow" apply these settings:

Select "Gradient Overlay", double click on the color bar to open the "Gradient Editor". Apply these settings using the colours you desire. I will be using these three colors: #93DFFF, #4BA4D1, #3A7593.

Finally, add these settings under "Stroke":

Your image should now look like this, differentiating depending on the colours you selected:

Step 4: Add your text

You are almost done! To finish up, you are going to add some text to the button. Grab the "Text Tool" and add whatever text you would like in the centre of the circle.

Step 5: Style your text

After you have added some text, right click on the text layer and select "Blending Options".

Under "Drop Shadow" apply these settings:

Under "Stroke" apply these settings:

And you are done! Until next time, take care and have a happy new year!
Styling <legend> Tags

By Ethan Poole

Recently, when coding Lowter's new layout, I ran into an issue trying to use absolute positioning on a <legend> tag. I was attempting to apply these particular styles to it:

CSS
legend { left: -2000px; position: absolute; width: 990px; }
I wanted to hide the <legend> tag from visitors on a certain form. Using display: none would not have sufficed because then screen-readers would have ignored the form instructions I wanted them to read aloud. The stylings worked fine in Opera, Safari, and Internet Explorer. The browser causing the problem was actually Firefox, which was rather odd considering Firefox typically provides acceptable CSS support.

Browsing around Google, I came across a page that addressed the problem (external link). In a nut shell, Firefox does not offer any positioning abilities on <legend> tags, so make sure to keep that in mind when doing any design work.