Web Tool to Create Rounded Corner

Cornershop is a free web tool to generate rounded corner boxes.

When you click Create Graphics, you will get four images, CSS code, and HTML code that you can use to make your own rounded-corner boxes.

Cornershop

Fancy Menu

Guillermo Rauch has come out with combination of CSS and Javascript to create fancy menu with a nice effect. Move the mouse over the menu link and have the element served as background animated following the mouse over.

Fancy Menu

The Fancy Menu needs Mootools library and it is cross-browser (tested on Internet Explorer 6/7, Firefox and Safari).

Download Fancy Menu here.

How to Compress Your Javascript Files

Julien Lecomte has come out with a Javascript compressor. As quoted in his blog, its aim is to create a compressor that is as safe as JSMin and has better compression than the Dojo compressor.

What is the YUI Compressor?

The YUI Compressor is a new JavaScript minifier. Its level of compaction is higher than the Dojo compressor, and it is as safe as JSMin. Tests on the YUI library have shown savings of about 18% compared to JSMin and 10% compared to the Dojo compressor (these respectively become 10% and 5% after HTTP compression)

How does it work?

The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement). The YUI Compressor is open-source, so don’t hesitate to look at the code to understand exactly how it works.

Download YUI Compressor 1.0 here.

Unobstrusive AJAX Rating Star Bar

Ryan Masuga came out with an unobstrusive AJAX rating star bar. It allows user to rate things and since it uses AJAX, user won’t see page refresh after rating is done. You probably has seen it in Amazon, Netflix, or Web-2.0-style web site.

Unobstrusive AJAX Rating Star Bar

You need PHP and MySQL to implement this AJAX Rating Star Bar. You can set the number of rating units you want to use, i.e. 4 stars, 10 stars, etc. The web site also teaches you how to customize the script, e.g. changing the graphic size, integrating with WordPress, etc.

AJAX Rating Star Bar is under a Creative Commons Attribution 3.0 License.

Create Site Tours

According to 37Signals in their book Getting Real, one of the powerful method to promote your web site is to give your customer a site tour. A site tour guides site visitors through various features available in the web site with some screen shots and/or interactive demo. By guiding your site visitors, you improve the usability of your web site.

Writing a good site tour can take a lot of time. Fortunately, you can use Amberjack, a a lightweight Javascript library to create a cool site tour easily. Best of all, you don’t need to install or learn anything. You can use the Tool Wizard to help you quickly creating your site tour.

Amberjack - Site Tour Creator

It is under a LGPL license.

Add Image Reflection

What is the best way to add reflection to an image, as it can be seen in many Web 2.0 logos, without touching the image?

Reflection.js 1.6 will do the job for you. It uses an unobtrusive Javascript to keep your code clean. It works in all major web browsers: IE 5.5+, FireFox 1.5+, Opera 9+, and Safari.

Reflection.js

It is freely distributed under an MIT license.

Feed Icons

A nice collection of 34 feed icons in PNG format (32 and 16 pixels).

Feedicons

Feedicons

It is distributed under Creative Commons License v3.0.

Color Inspiration

COLOURlovers If you are a designer, you will need a handy tool to select colors for the web, ad campaigns, product design, etc. Selecting the right color is part of design process and it is important as it communicates the brand vision to outsider.

Meet COLOURlovers. It is a resource that monitors and influences color trends. It is also a place to check out a world of color, compare color palettes, read color articles, and submit news and comments.

Scrollover - New Way to Scroll

Have you tried to impress users visiting your web site? A clever combination of Javascript and CSS called Scrollover will scroll any hyperlink on your web page. Move your mouse over a hyperlink and you will see the hyperlink scrolls up and down, by using this script.

Scrollover

Here is the demo:

MOUSE OVER HERE

It can be used for personal and business use, but you need to get the author’s consent if you use it for commercial product.

YUI 2.3.0 Launched

YUI has released version 2.3.0 with 6 new features, new skinning, and new visual treatments. It also has 250 enhancements and bug fixes.

Here is the summary of what is new in YUI 2.3.0:

  1. Rich Text Editor: Rich Text Editor is a rich-text-editing with A-grade browser support.
  2. Base CSS: Base CSS now includes Reset CSS to neutralize browser treatment, Base CSS to apply common treatment, Font CSS for typography, and Grids CSS for layout design.
  3. YUILoader Utility: This utility is a mechanism for loading YUI components and your components via client-side script. YUILoader knows the dependency of YUI components and it loads only the required components.
  4. ImageLoader Utility: You can use this utility to defer images loaded on your pages to speed up the loading process.
  5. Color Picker Control: Color Picker Control is color-selection widget, featuring HSV, Hex input/output, RGB, and web-safe color selection watch.
  6. YUI Test Utility: This utility is the answer for unit-testing framework for YUI ecosystem.

YUI 2.3.0

It is released as open source under a BSD license and is free for all users.