8 Useful Frames and Border Fonts for Web Designers

Fonts always play a key role in your designing so choosing a right font is very important. When you talk about Frames and Border you always think about CSS, but today I am going to share some very useful fonts that design your Frames and Border.

Here are some most wanted fonts for Frames and Border:

Border Corners 1

Border Corners 1 contains 26 symbols. They are all lower case from a to z.



Download: border_corners11.zip

Border Corners 2

Border Corners 2 contains 26 symbols. They are all lower case from a to z. Good and useful. Great for decorating book covers.



Download: border_corners2.zip

Frames

A very nice and useful collection of frames.



Download: DBLFrames.zip

Frames and Borders

Combination of Frames and Borders. A very worthwhile for Web Designers. It can be very useful when you are going to design some dating Templates, Mailers, Pop-up messages etc.



Download: DBLFramesAndBorders.zip

Frames and Borders II

Combination of Frames and Borders. A very worthwhile for Web Designers. It can be very useful when you are going to design some dating Templates, Mailers, Pop-up messages etc.



Download: DBLFramesAndBordersII.zip

Frames and Borders III

Combination of Frames and Borders. A very worthwhile for Web Designers. It can be very useful when you are going to design some dating Templates, Mailers, Pop-up messages etc.



Download: DBLFramesAndBordersIII.zip

Frames and Headers

Combination of Frames and Headers. A very worthwhile for Web Designers. It can be very useful when you are going to design some special feature Headers for your Templates.



Download: Frames_and_Headers.zip

Deco Borders

Deco Border contains 26 symbols. Good and useful. Great for decorating book covers.



Download: decobord.zip

Do you have any opinion, Leave your comment

Source: 1001fonts.com

How to Design a Nice Vertical Menu with CSS

In this tutorial I would like to teach you how to design a Vertical Menu with the help of little CSS. This is very nice Vertical Menu style tutorial for beginners.

In this Vertical Menu you'll see mouse over effect on sub menus, which is very interesting and you'll always love to learn through out this tutorial.

Here's a image of Vertical Menu that we are going to learn:



















For this I am using following two images with css:








I am using following CSS to design a Vertical Menu:


.main_cont
{
float:left;
width:220px;
background-color:#4d7986;
padding:10px;
}

.menu_top_bg
{
width:223px;
background:url(../grfx/menu_top_bg.gif) repeat-x;
height:22px;
padding-top:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
margin-bottom:1px;
}

.sub_menu ul
{
padding:0px;
margin:0px;
}

.sub_menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
line-height:32px;
border-bottom:1px dotted #93bcc3;
list-style-type:none;
text-indent:8px;
}

.sub_menu ul li a
{
text-decoration:none;
color:#FFFFFF;
}

.sub_menu ul li a.selected
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}

.sub_menu ul li a:hover
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}


Use following code to attach above CSS manually to HTML document:

<link href="css/left_menu.css" rel="stylesheet" type="text/css" />

Use following HMTL to get a final result:

<div class="main_cont">
<div class="menu_top_bg">TOP HEADER TEXT</div>
<div class="sub_menu">
<ul>
<li><a href="#" class="selected">Menu Text 1</a></li>
<li><a href="#">Menu Text 2</a></li>
<li><a href="#">Menu Text 3</a></li>
<li><a href="#">Menu Text 4</a></li>
<li><a href="#">Menu Text 5</a></li>
<li><a href="#">Menu Text 6</a></li>
</ul>
</div>
</div>

Now you are done. If you find any difficulty to implement above code please leave a comment.

12 Excellent Thumb Image Styles for Web Designers

In this post I would like to share some ready to use modern thumb image styles that you always looking for. These images created in Photoshop by me and free to use for all my readers. I am here sharing a downloadable psd file to help you. Web Designers who use Photoshop can easily use this file according to their needs.

If you have any query please leave a comment. I'll try my best to help you. Enjoy!!!

Download thumb_view_style.psd

1. Wide Border Image Style

This image style is very common now a days. You might have noticed this style in different web sites. Creating clean border style is very easy. Take any image of any size you want to use. Make a new layer (proportionately big from existing image) just below the existing layer and fill with white color. Now use a Stroke option by using Blending option to give border. You'll get final result like me.

2. Sleek Border Image Style

This is also a very famous style I always use during designing. All you need to create effect like this just reduce proportionate size of stroked layer and rest steps are same as above. This style is very common in ----- galleries.

3. Sleek Border with Drop Shadow

Just give a drop shadow effect to your sleek border layer created in "Sleek Border Image Style" above. To give drop shadow effect you'll have to use blending option.

4. Behind Drop Shadow

This is very modern style for thumb view image and of course my favorite too. If you are a Photoshop user then download psd file from above link and learn how to create style like this.

5. Flip Shadow Style

A very unique and clean style used for horizontal thumb view in ----- galleries. Download psd file from above to learn the process for creating this style. You will notice that all steps are same like above (In Wide Border Image Style), Just added flip drop shadow style to create it.

6. Bottom Corner Cut

Bottom Corner Cut style is very unique style for ----- galleries. Follow a Style like above in "Sleek Border Image Style" and cut a bottom corner of image by using marquee tool.

7. Wide Rounded Border

A very simple and sober border style. To give a style like this click on blending option and choose stroke outside with 3 or 4 size. Download psd file from above to quick reference.

8. Top Flip Shadow

Another style by using drop shadow effect. You can apply this style on top left or top right side of the image. It gives natural gallery image look. Very trendy style now a days.

9. Classic Rounded Corner Style

Classic Rounded Corner Style is very common now a days and very easy to create. A time saving style for your ----- gallery images. There's number of image styles but this style is still famous among design community.

10. Dotted Border Style

Dotted Border Style gives different look from solid border image style. Some contest design sites started to use this style. You can say that this is new Web 2.0 style.

11. Classic Drop Shadow

A very old classic drop shadow style used by designers in early 90's, but still famous among designers. You can use this with stroke or without stroke images. Even some designers use this with default value of drop shadow.

12. Transparent Shadow Style

A famous Web 2.0 style among design community. You can create this style by using blending option. Follow psd link above to learn it. Every 6 sites out of 10 are using this style.

Do you have any suggestions? Leave your comment.

10 Free Forms for Blogger & Websites

If you are looking 'how to put a any form in a blogger' then this post is going to help you. Putting a form in blogger is very easy. All you need to do just create a new post and put a form code (Provided by following sites below) in body section of your post and publish it. That's it.

There are various sites across the web which offers free forms to use for Blogger & Websites. Here I am going to share top 10 sites which offers free forms for Blogger & Websites with embedded code.

1. Google Docs

Google Docs provide embedded code forms for your blog or website. Just login to docs.google.com and click on the New > From Template > Forms. Choose form of your choice and copy embedded code. Follow steps mentioned below:





2. FormSmarts

FormSmarts is an integrated web form service that lets you create forms, publish them online, and get form results. Add a web form to your site or blog, or let visitors access your form from MySpace®, Facebook®, and anywhere you can post a link.



3. Kontactr

Kontactr is a one-click free contact form service. With Kontactr, you can fight against the amount of spam that you receive daily. Protect your email address by using our highly secure contact form. You can also use our simple tools to embed the form right into your own website.



4. Wufoo

Wufoo offers easy, copy/paste solutions for integrating a Wufoo form into a web page. For advanced users, full CSS and XHTML markup is also included. To simplify the process even further, the intuitive Wufoo theme manager allows you to customize the look of your form with a few clicks of the mouse so that your form seamlessly matches the look of your site.



5. ZOHO

Zoho Creator provides you with an easy drag-and-drop html form builder to build html forms online. Zoho Creator also makes it easy to embed HTML Forms in your website through simple copy/paste. Once you have collected data through HTML Forms, you can manage and edit the collected data online and share the data with others



6. My Contact Form

It is now easier than ever to keep in touch with your site's visitors. The arduous task of creating contact forms, email forms, feedback forms, questionnaires, surveys, order forms, polls, or any other type of web form is a thing of the past!



7. Free Contact Form

Script provided by this site works for a wide variety of website forms, not just contact us forms. These scripts are sometimes refered to as the following: contact form, website contact form, email form, PHP contact form, Javascript contact form, form to email, form 2 email, form2email, form generator, form builder, form maker, automatic contact form or contact form script.



8. FormSpring

FormSpring gives businesses and organizations an easy way to build any type of online form, integrate it with their website and begin collecting data. Once you have started collecting that data you can use the information you gathered in our online database or export it. With FormSpring anyone can build all types of web forms, collect data online and do it simply and efficiently.



9. Web Form Designer

WebFormDesigner can automatically validate your user's input - ensure the required fields are properly complete, and check that a valid email is input. Restrict input to alphanumeric, numerals only or just letters.



10. Kampyle

Customize the look and feel of your feedback forms to fit your website's, as well as your business needs. Create multiple feedback forms for different locations of your website with the relevant questions for each page.



Do you have any suggestions? Leave your comment.

Thirty "Nice-To-Have" Firefox 3.0 Add-ons

In my earlier post I had shared '9 Must have IE and Mozilla add-ons' with my readers. I got tremendous feedback from my readers. Now I going to share some more useful Add-ons to help Web Designers and Developers.

Because maximum readers of my blog use Mozilla Firefox so this post would be very handy for them. I hope these add-ons will help you in better way.

If you want to add these Add-ons to your Firefox all you need to do is just pick up add-ons of your choice below and search it by using following Mozilla Firefox link:

https://addons.mozilla.org/en-US/firefox/

Important: These all Add-ons are compatible with Mozilla 3.0 only.

MeasureIt 0.3.8

I like MeasureIt and use it frequently. It draw out a ruler to get the pixel width and height of any elements on a webpage.



ColorZilla

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.



Window Resizer

Resize your browser to various standard resolution sizes.

The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes. Supports the 640x480, 800x600, 1024x768, 1280x800, 1280x1024, 1600x1200 resolutions.



Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... Firebug 1.3 requires Firefox 3.0.



CodeBurner for Firebug

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

The extension's core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.



FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.

You must have Firebug installed and the "Net" panel enabled to use this extension. You must also download a PHP library from http://www.firephp.org/HQ/



Pixel Perfect

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. By toggling the composition on and off, the developer can visually see how many pixels they are off in development.

Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both
the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.

* Requires Firebug



Jiffy

Jiffy-Web is a fine-grained and flexible website performance tracking and analysis suite written by Scott Ruthfield, Ben Maldonado, Don Shanks, Travis Pearl of Whitepages.com. The library provides a simple way to insert and capture time measurements in your Javascript code and save them to a backend service for later analysis.

Jiffy is compatible with Firefox 1.5 - 3.0.



Inline Code Finder for Firebug

Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of the below issues:

* Inline JavaScript events
* Inline style
* javascript: links

Detailed description can be found at http://www.robertnyman.com/inline-code-finder/



Library Detector

Detects what javascript libraries are being used on the current page and displays the result as icons with detailed tooltips in the statusbar. Currently supports jQuery, jQuery UI, Prototype, Scriptaculous, Dojo, YUI, Qooxdoo, MooTools and Spry.

Library Detector is copatible with Firefox: 1.5 – 3.6a1pre



Poster

A developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results.

Add to Firefox



Web Developer

Adds a menu and a toolbar with various web developer tools. Compatible with Firefox: 1.0 – 3.5.*



Platypus

Platypus is a Firefox extension which lets you modify a Web page from your browser -- "What You See Is What You Get" -- and then save those changes as a Greasemonkey script so that they'll be repeated the next time you visit the page.

Shareaholic for Firefox

Shareaholic is the ultimate add-on for the link sharing addict! If you use any site like Facebook, Twitter, MySpace, Digg, Google Gmail, StumbleUpon, etc you'll likely enjoy having Shareaholic by your side. Make your life easier. No more looking for web publisher provided buttons, and no more bookmarklets piling up.



XQuery USE ME

XqUSEme allows one to perform XQueries on single or multiple local or remote XML files. One can also conveniently query the document currently loaded in the current Firefox tab/window, and if it is poorly formed HTML, it may still be possible to query, since the extension will use Firefox to attempt to convert the HTML into a well-formed (but not validated) document.



Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.

You can write your own scripts, too. Check out http://wiki.greasespot.net/ to get started.



Greasefire

Automatically find Greasemonkey scripts on Userscripts.org

When you visit a web page that has compatible user scripts on Userscripts.org, this extension will highlight the Greasemonkey icon in the status bar. Right click the Greasemonkey icon and choose the "X scripts available" item to see and install the scripts available for the current page.



XHTML Mobile Profile

Firefox does not natively support the mime-type application/vnd.wap.xhtml+xml. This is one of the possible mime-types for XHTML Mobile Profile. This extension adds support for this mime-type.

To use this effectively, you will need to modify the user agent string to spoof a mobile device that supports the required content type. For this, use Modify Headers (http://modifyheaders.mozdev.org/) or the User Agent Switcher (http://useragentswitcher.mozdev.org/).

Print Hint

This extension helps you to quickly find printer-friendly versions of webpages. A green icon indicates the presence of a 'print stylesheet'. Webpages with a print stylesheet have been specifically formatted for printing. Click on the green icon to print.



Xinha Here!

Portable WYSIWYG editor! No matter what site you're visiting you can launch a WYSIWYG right in your browser. Xinha Here! is a wrapper for the Xinha HTML editor that enables WYSIWYG editing in any HTML textarea and text input elements.
To use Xinha Here! simply select Xinha Here! from the context menu of the desired textarea or text input element. Up will pop a Xinha WYSIWYG HTML editor. Press OK and the raw HTML is pushed back to the original text box. Simple as that.



XHTML Ruby Support

Adds XHTML Ruby support. Ruby texts will be rendered above the base texts, as a small text. This supports both simple ruby and complex ruby of W3C spec.



IE NetRenderer

Adds buttons, tools menu and contextual menu entries to get a screenshot of the current page with IE NetRenderer.

Keyboard shortcuts are also available: Ctrl+Shift+F5/F6/F7/F8 to render the page in IE5.5/6/7/8 Beta 2 (Cmd+Shift+F* on Mac).

Really useful for webmasters which are not using Windows!



Mac Shortcuts

Adds some Mac keyboard shortcuts to Firefox on Windows and Linux. This makes Firefox on Windows more familiar to users used to Macs, and makes functions like quitting and changing preferences easier to access from the keyboard.

Currently supported shortcuts are:
Ctrl+Q - Quit
Ctrl+, - Preferences

TableTools

TableTools sorts, filters or copies any HTML table. Two filtering modes supported: select filtering (each column has one drop down menu allowing you to select a certain value); search filtering (each column has one search box allowing you to search for any value in the column using keyword(s) or javascript regular expressions, very powerful and flexible!)



Data Analytics

DataAnalytics is a Firefox extension that enables importation, manipulation, analysis and graphing of data. Often websites lock their information in static tables.



CacheIt!

Displays an archived version of the web page you are viewing, or the link you are hovering. You can quickly view or copy the URL to the cache of the page.



Grab Them All

GrabThemAll extesnion takes screenshot of sites specifed in external file and write them as JPG or PNG file to selected directory. URLs of sites to shot must be written in *.txt file and start with http:// or https:// prefix, URL separated by new line sign.



Split Browser

This splits the content area of the browser window as you like. It will help you in various cases. For example, to compare multiple webpages, to show a calendar always, and so on.



Unwrap Text

(1) Unwraps a multi-line URL and opens it in a new tab.

(2) Unwraps a multi-line street address and opens it in Google maps.

Removes unwanted carriage returns, newlines, spaces, ">" symbols (usually from email replies) from 2 different kinds of text lines:
* URLs, opens them in a new tab
* Street address, opens using Google maps.

Highlight the text in the browser window, right click, select "Unwrap URL" or "Unwrap Street Address" from the context menu.

See http://www.volleynerd.com/firefox/extensions for examples.




ErrorZilla Plus

This extension is a replacement of Firefox official error page, which adds some useful tools to aid your troubleshooting.

The tools include:
- Google Cache (view the page cached by Google)
- Coralize (use Coral CDN proxy to connect again)
- Wayback (view an earlier version of this page)
- Ping (use a server to ping the target server)
- Trace (trace the network route from you to the server)
- Whois (look up who owns the website)
- Proxify (use your custom web proxy to connect)



Do you have any suggestions? Leave your comment.