Website to capture screenshot

Most of our website have contact forms where visitors can fill in their email address and send a message directly to the site owners with some limitations. But some issues might be clear or some might not.

The visitor cannot attach image files with the message.

Here is a easy solution. To solve this very problem and make things a bit more convenient for your visitors, SnapABug has released a simple JavaScript based Help widget that can be added to any website with a simple copy and paste.

The Snapabug widget will add a "help" button to your website and when visitors click this help button, they can not only send a message to your email address but they can also chose to include a screen capture of the web page with the message.

SnapABug will automatically attach a screenshot with the browser’s user-agent string and OS details of the visitor. And the Help widget is absolutely free

So what for you waiting for, have a TRY!

Read more...

Adobe Web 2.0 Productivity Workshop

Great News for web developer and web designers, here is an opportunity to have a full session of knowing the web2.0 cutting edge latest technology of Adobe Productivity Workshop.

Adobe is conducting a one day program in Chennai. So if you are interested, here is an opportunity to know the latest adobe Productivity Workshop.

Venue: Hotel Park Sheraton

Date: 16th Sep 09

Time: 9am - 5pm

Detailed Agenda
09:45am - 10:15am Registration

10:15am - 11:00am Professional website design with Adobe Dreamweaver CS4

11:00am - 11:15am Tea Break

11:15am - 12:45pm Rich interactive content development with Adobe Flash CS4 Professional

12:45pm - 01:15pm Web prototyping and image editing with Adobe Fireworks CS4

01:15pm - 02:00pm Lunch Break

02:00pm - 02:30pm Audio creation and editing with Adobe Sound booth CS4

02:30pm - 03:15pm New dimensions in digital imaging with Adobe Photoshop CS4 Extended

03:15pm - 03:45pm Inspired vector graphics creation with Adobe Illustrator CS4

03:45pm - 04:00pm Tea Break

04:00pm - 04:30pm Flexible web publishing with Adobe Contribute CS4

04:30pm - 05:00pm Sneak peek of Adobe Flash catalyst

Hurry! only limited seats. Here is the link to Register.

For more details
Call: 09311 469593
Email: abode@channel-technologies.com

So see you there!

Read more...

Test your Website in different Screen Resolutions in one place

Experts says that when you are publishing a website for viewers, you should optimize the web pages for 1024×768 resolution as it is still the most common size. So you must always keep in mind when you are designing a website, make sure that the layout should be good and readable in all the resolutions.

Have you ever wondered how your website appears to a visitor who might be using a different screen resolution?

Tried of changing your resolution each and every time when you are making changes?

Here is a simple way to check your web page in all the resolution in one place. Viewlike.us is the site you are looking far.

Just type the address of your web page and the tool will show you how that page will look like in different screen resolutions. You can test the layout using most common resolutions like 800×600, 1024×768 or even the iPhone and Wii browser.

Read more...

Create gradient buttons using css

Creating a glossy gradient button effect is easy to make in photoshop. But for example, in your site you want ten buttons to be created. So what you will do, as of all we will be creating 10 different button in photoshop.

But all of these button will make your page weight of having 10 request to the site. So here is a simple trick how to create different buttons with single transparent image.

Follow this simple steps... Download the png file to have the gradient button. And copy the HTML and CSS code. So you will not be creating different image, just this png image will do the magic.

HTML:
<a href="#" class="btn ovrlay ">Super Awesome Button</a>

CSS:
.btn{font:13px arial;color:#fff;text-decoration:none;}
.btn:hover{background:#630030;}
.ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
.btn{background-color:#E33100;border:1px solid #7c1f06}

Just change the color of the .btn class, similarly you can have different n number of buttons by just class....

Before Gradient effect


After Gradient Effect


PNG Transparent Image

Just copy the above png image...

Note:
Do not forget to put png hack for ie6.

Read more...

Convert images to vector formate

Designers used to take images from a famous image selling website for their site to be used. But at some point they also need vector based images to be used such as for logos, header images etc to give a clarity picture.

These vector images can be resized to any size so that the quality of the image will not get damaged. But converting an image to vector formate might be costlier. So what to do? where to go?

Here is a simple solution to convert your image to vector images. Vector Magic.com is a free online image to vector Convert site. Easily convert bitmap images to clean vector art.

Convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software.

Upload the image to be traced and within seconds you will get the image converted to vector format. You can also edit the configuration such as details, colors etc. But the only worry is they leave a water mark of their website at the bottom of the image. I think the designer know what to do with it!

They also provide a desktop version for trail, where you can download and install it in your pc. Then you can work on it. The desktop version also contains the background remover which is not available in online version.

If you want to convert many images to vector, you can go for the trail version and if you are interested you can buy the software. Because i think it gives a better quality and clarity vector images.

And also they provide hand tracing, where you can order for images to be converted and they will do it for you.

Read more...

Center align a div horizontally and bottom of the page

There is an easy way to have the div position to the left or right to the screen with the use of fixed property. But how do you make a div horizontally center aligned and always be at the bottom of the page?

This will be of great useful if you want to make any popup div for display important messages or take any surveys etc. So here is a simple trick to show the content of a div horizontally aligned and always be at the bottom of the page...

HTML:
<div class="parent">
<div class="child">
Content here
</div>
</div>

CSS:
.parent{
position:fixed;
bottom:0px;
width:100%; //width should be 100%
}
.child{
width:300px; //min width should give to center the div.
margin:0px auto; //here it will make center
}

Position fixed will support modern browser including ie7, but for ie6 you have to use microsoft expressions to render the page as position fixed, as it will render wrongly. If you find any solutions without using expression in ie6, please explain use which will be helpful to others.

Read more...