Showing posts with label Web Design Tutorial. Show all posts
Showing posts with label Web Design Tutorial. Show all posts

Thursday, July 26, 2012

Using HTML "Fieldsets & Legends"

I had to use the "Legend" attribute of HTML in a project today, normally this is used in forms but I had to use it to post a Cautionary Statement on the home page of a project, you can take a live look at that here; http://samnelson.biz/jsr/ Also you can use the "View Source" option to check how I setup this stuff using aid from CSS. But there is one issue, I am still not able to find out a way to "center" the legend text i.e. "Cautionary Statement" here in IE. :) I am using IE 8 and it's showing it on the Left, both FireFox and Chrome are showing it in the center, for Chrome the css property "text-align:center;" works and for FireFox simple aligm="center" makes it in the middle of the top border, I also change the border style with CSS by using;
style="border: solid 1px #b9d9ed;"

You can find more help on this at this page: http://www.htmlgoodies.com/tutorials/forms/article.php/3479111/Fieldsets-and-Legends.htm 

Thursday, September 08, 2011

Tutorial: Nav Button - Designing Buttons in Adobe Fireworks. FREE Source.

Designing navigation buttons in Adobe Fireworks using gradients and two squares with  little bit rounded corners. I recently used this button on my latest project www.april-laundry.com

"Right-Click - Open In New Tab" to view larger image.
To bring the effect of the semi-transparent cut in the middle of button, I have given the 2nd rectangle's 1st grandient color and opacity of 18% and the 2nd is 0% because it's already out of button dimensions and gives the upper color a light effect. The engraved arrow has an inner shadow, you can view the shadow color and values in the source file.

Download the source Fireworks PNG from the following link to get more insight.

Download Link: https://rapidshare.com/files/4143501687/btn_home.png
File Type: Adobe Fireworks Source PNG
Software Requirements: Min Fireworks 8.