Category Archives: Tips

55 + 1 Sources for Web Design Inspiration

Here is the list ….

  1. The Best Designs
  2. Six Shooter Media’s Free Templates
  3. 2Advanced Studios
  4. Andreas Viklund Free Website Templates
  5. Studio7Designs
  6. Style Grind
  7. Open Source Web Design
  8. The Web Design Inspiration Photoset
  9. Most Inspired
  10. Open Source Templates
  11. Templates Box
  12. Smashing Magazine
  13. CSS Beauty
  14. CSS Galleries
  15. Drupal Sites
  16. Open Source Web Templates
  17. CSS Remix
  18. Glenn Wolsey 10 Most Beautiful Blog Designs
  19. CSS Drive
  20. Perfection
  21. CSS Elite
  22. SyleGala
  23. Creative Pakistan
  24. The FWA
  25. CSS Hazard
  26. Beautifully Webdesign
  27. Unmatched Style
  28. CSS Import
  29. Light on Dark
  30. StyleBoost
  31. CSS Bloom
  32. Screen Fluent
  33. CSS Websites
  34. Website Design Awards
  35. 3point7designs
  36. CSS Galaxy
  37. Screenalicio.us
  38. The Dreamer
  39. Style Crunch
  40. CSS Flavor
  41. Inspiration King
  42. CSS Thesis
  43. Web Creme
  44. CSS Zen Garden
  45. CSS Reboot
  46. WebDigity
  47. The Pixel Creativity
  48. Top Wordpess Themes
  49. CSSClip
  50. Deviant Art
  51. 83 Beautiful WordPress Themes (smashing magazine)
  52. Go Drupal
  53. One Pixel Army
  54. CSS Mania
  55. Design Shack
  56. Css Gallery

Upload with progressbar

New uploading Script Available on jQuery Community.

There are many solution to work in the net. There implementation for a default usage is quite simple.  And all have good documentations.


swfUpload

The classic and maybe the predecessor of all scripts that use a flash component to show the progress of the uploading status is swfupload. This main reason I stopped using this is because i found many versions. Each version not working with some browsers.  I also needed to change the script to implement a database insetion to store the uploaded media. This upload solutions is very versatile and customizable. Here you can see some demos.
Multiple file selection is supported.

Features

  • Multiple file selection is supported.
  • Customizable Folder, Action when All completed, One completed.
  • Size Limit
  • Custom File Extensions
  • Post/Get  Form Data
  • .NET 2.0 Support

upload_01


jQuploader

Another solution works with jQuery 1.2.xx JS Framework. The drawback is that latest jQuery framework doesn’t work ok with this. I used this for some time now. The fla file is included and i was able to implement actions to call js functions when the files uploading procedure was finished.  This solutions is the most compatible one i ve ever used. Works ok with FF, IE, Opera, Chrome, Sleipnir, Safari and also with Flash9 and 10. A very strong aspect of this solutions is that you can also send Form variables.

Check out the demos.

Features

  • Multiple file selection is not supported.
  • Asynchronous or synchronous file submitting is also supported.
  • Customizable Folder, Action when All completed, One completed.
  • Editable Flash Upload script. (Default = ‘upload.php’)
  • Size Limit
  • Custom Allowed Extensions

upload_02


apgetwikiimage

uploadify

This is actual the reason i made this post. This looks to be the most compatible version of all the above. It has all features mentioned and works with 1.3.x jQuery.
Features

  • Multiple file selection is supported.
  • Asynchronous or synchronous file submitting is also supported.
  • Restriction of the number of simultaneous uploads is also supported.
  • Customizable Folder, Actions for (onInit, inSelect, onSelectOnce, onCancel, onClearQueue, onError, onProgress, onComplete, onCompleteAll, onCheck)
  • Editable Flash Upload script. (Default = ‘upload.php’)
  • Domain restriction
  • Size Limit
  • Custom Allowed Extensions
  • Post Form Data
  • wmode for flash (i found that very important)
  • fileupload autostart option

Check out the uploadify, demos and this brief documentation.
The impementation is very simple.
upload_03

Fix IE8 Styling and behavior

ie8_icon

IE8 is still in a premature version. For all the developers that need to re-insure that web pages will be displayed and work as before there is one quick tip. A single line of code to add to your pages.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


This meta tag will make IE8 work as IE7 did.
Maybe there are still very few ppl that browse with IE8 (browser statistics) but i thought you should know this tip.

Copy command to USB printer

roller_printer3
If you need to sent a dump text to your printer for testing purposes you can you this command

> copy test.txt lpt1:
(in case your printer is connected to that port)

What do you do when we want to use copy command to a usb connected printer ?
In the printer properties , Ports tab, as you can see the port name is usually as USB001 or USB002.

If you change the command to
> copy test.txt usb001
a new file named usb001 will be created as a copy of test.txt.
But we need to sent the test.txt content for printing..

Here is what we do to override this..

First Step
>net use lpt1: \\localhost\printername
(lpt1: will be useless after that, also printer must me shared)
Second Step
> copy test.txt lpt1:

try it…
it will do the job if you want to make your tests.

Photoshop add transparency technique

Let’s say you have an image with no transparency.
This is a  technique i found to make photos transparent to a specific color.

In the following tut color was black.

You can follow these step to add the desired transparency
PHOTOSHOP NEEDED

Step no 1.
Make a copy of the image. Make it in grayscale. Play a little with the levels so you can do the grey areas whiter.
Make a brush with this image. (DEFINE BRUSH)

Step 2.
Take the original image with no transparency and add a layer mask.
Then use the brush you made in the first step.

Step 3.
Save image in psd or png format. You re Done!!!

These are the before and after images
Original Image

The image “with transparency” (added a random background there to see the result)

The cool thing using this technique is that you dont need to lasso or feather anything. All steps are a standard procedure. The only thing you must master is the leveling so that you can make the transparency to a desired level.