Tips For Creating Cool Web Forms

1. Use Labels

You don’t need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and associate them together. The use of the tag is not only semantically correct, but it gives you the opportunity to style them uniquely with CSS.

2. Float Your Labels

This is how you achieve that table-like structure on forms without having to actually use a table. Just set a static width, float it the left, align the text to the right, and give it a little right-margin. Beautiful.

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}

3. Careful To Not Wreck Your Default Styling

A lot of browsers have default styling applied to input buttons. This provides a nice consistent user experience, so if you choose to interfere with this, make sure you have a good reason. A common way to break this is by using a CSS Reset technique that includes something like this:

* {
border: none;
  outline: none;
  padding: 0px;
  margin: 0px;
}

4. Use the :focus Pseudo Class

You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the border color on those elements like so:

textarea:focus, input:focus {
border: 2px solid #900;
}
// Will not work in IE

5. Prefill With Hints, But Clear Them Away

It can be useful to prefill your input fields and textareas with little hints or reminders. For example if you have a general contact form and a textarea labeled “Message:”, you may want to prefill that textarea with something like “Your positive comments or constructive criticism here.” Or, you could have a name field which is prefilled with “First Middle Last” so that you can remind users that is the order they should fill in their name. You can do that just by including text within your tags:

Hint goes here.

Photoshop Vs Fireworks

It's a challenge to say anything about it, but i will dare to do it.

I’ve been developing websites for more than 4 years. No one really used image editing programs back then.

When it came time to start using a program to make web graphics, I chose Fireworks because it’s made specifically for web graphics.

Photoshop’s steep learning and often clumsy UI has always been a problem for me. Most of the features are things I would never use for a website.

Fireworks, on the other hand, is what I’ve used since it came out, and that’s only because I used Dreamweaver, which is really what introduced me to it.

As you said in the article, Photoshop is for, well, photos. It’s a full-blown image editor. Fireworks, while it does have the ability to edit images, is all about the web.

My vote goes to Fireworks, hands down.

Comparing Photoshop with Fireworks is a little like comparing apples and oranges. Both are delicious but are different in a number of ways.
Photoshop is the bitmap editor, and was designed for artists working on images for print. Fireworks is the top of the line, software for creating images for the Web.
Fireworks is vector based, so it actually has more in common with Illustrator than Photoshop. If you are comfortable with vectors, you'll love it.

Cheers!

My Latest Work

http://www.drink2health.net/
http://www.manakjewels.com/
http://www.olddalians.org/
http://61.246.241.36/webdesign/big-khandan/index.html (Currently Working)
http://61.246.241.36/webdesign/itc/index.html (Currently Working)
http://61.246.241.36/webdesign/yamini/index.html (Currently Working)
http://www.chatfiles.com/
http://www.indoreonline.com

MouseOver and MouseOut Scripts for SilverLight

MouseOver Animation for text and shapes
private void rectangle_MouseEnter(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState(this,”hover”,true);
}

private void rectangle_MouseLeave(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState(this, “mout”, true);
}

Rollover Color Effect in Silverlight
private void design_txt_MouseEnter(object sender, MouseEventArgs e)
{
design_txt.Foreground = new SolidColorBrush(Color.FromArgb(255, 0xFF, 0×66, 0×00));
}
private void design_txt_MouseLeave(object sender, MouseEventArgs e)
{
design_txt.Foreground = new SolidColorBrush(Colors.Black);
}

Rollover Colors in Silverlight

//Just Paste this code in your CS file on Mouse Over Handler
private void design_txt_MouseEnter(object sender, MouseEventArgs e)
{
design_txt.Foreground = new SolidColorBrush(Color.FromArgb(255, 0xFF, 0x66, 0x00));
}
private void design_txt_MouseLeave(object sender, MouseEventArgs e)
{
design_txt.Foreground = new SolidColorBrush(Colors.Black);
}

What is JQuery?

It's a JavaScript library that makes it easy to create wonderful web effects in just a few lines of code.

“jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun. jQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.”

May be you are thinking…Why I would need another JavaScript library? Just give a try and you will see how simple and powerful it is.

jQuery is a Power

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript jQuery: The Basics

This is a basic new, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating a new HTML page.