Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Useful tools and resources for web designers and developers

Comments and suggestions in here

Hello guys, it’s Friday and there’s no better way to finish the week that offering you a big list with all our the latest web and design tools that have been included either in our webpage or our social streams, some of them include awesome plugins, web tools, freebies and more great things that can be helpful for every person involved in the web design field.

This week features some sparkling jQuery plugins, nice CSS3 deployments and helpful online tools for developers. Don’t forget that you can send us all your web / design-related news so we can feature them in our stream with the corresponding credits to the submitter.

designews00

Make stunning drop down menus, jQuery plugin

DropDown01

This great jQuery plugin grabs standard HTML nested lists and turns them into horizontal mega menus. With this plugin you can display all options simultaneously and every group can easily be customized with a bit of CSS, the plugin features a WordPress-powered version for all the lovers of this popular CMS. Among some of the features that you’ll find on this plugin we have:

  • Establish the number of submenus in each row.
  • Customize the drop down speed for very row of the menu.
  • Switch between ‘slide’ or ‘fade’ animations.

Original link: jQuery Mega Drop Down Plugin

Columnizer: Easily work with columns with jQuery

columnizer01

This jQuery plugin aids you with the automating process of any content’s formatting, saving you a considerable amount of time whilst offering you a wide range of features to work with columns.

Columnizer will automatically layout all your content in newspaper-like column format; you can also establish width values for your columns or leaving them static. Since the latest version, the plugin presents the following features:

  • All the JavaScript events that were attached to content before adding the column format are now preserved for non-IE browsers.
  • A new function name doneFunc has been incorporated, this option will be called when the columning process has been completed.
  • Another new option named target that determines where the content should be columned. Since this version you’re able to put all of your content into a hidden div, and have it columned and displayed in it’s final location. This removes the content flicker when the page loads but isn’t still in columns
  • ignoreImageLoading (on by default): When this option is set to false, Columnizer will try to wait until all images in the content are loaded so it can start the columning process. This can help conserve more consistent column heights for all data. The preferred fix is to always specify a width and height for your images in your columned content.
  • The float option lets you specify “left” or “right” floating for columns. Handy for right-to-left languages or simply styling.
  • With the lastNeverTallest Boolean option you can make sure that the last column isn’t going to be the tallest column.

Original link: Columnizer

A huge guide about CSS3 features and properties

css3guide01

Christian Krammer has brought to us an extraordinary guide for better understanding CSS3. The guide parses all the major CSS3 properties and is up to date with the latest news (Firefox 4 is already featured).

You can read about background, borders, color, fonts (@font-face), gradients, shadows, transform and transition properties as well as the main subcategories for each property.

Original Link: CSS3 Files

Zoomooz, easily incorporate zoom to web elements

zoom02

Adding zoom to your different elements is something that can always be helpful as it aids people to better visualize your contents. There are many different plugins and scripts that can help you with this and today we want to tell you about Zoomooz.

The plugin offers great support for all the latest webkit browsers, including Firefox 4. To understand its functionality we can say that the plugin basically inserts a simple zoom on clicking to elements through the ‘zoomTarget‘ class.

Original link: Zoomooz

jStat, execute advanced statistical operations with JavaScript

jStat01

Every time you need to perform statistical operations the necessity of a dedicated statistical language to help you do things is evident. That process is effective but kind of archaic as it consumers a lot of time during its process.

Thanks to jStat it’s now possible to execute complex statistical operations without appealing to dedicated statistical languages and therefore reducing your working times. jStat offers you a high maneuverability by letting you adjust different parameters to make the fittest graphics according to your needs.

Original link: jStat

Automatically generate sliding boxes & captions with Mosaic!

designews01

Mosaic is a jQuery plugin developed to help developers generate sliding boxes and captions with ease. The plugin also allows slide and fade animations with custom directions, preload images within boxes and work with a few properties such as Animation, speed, opacity, preload and more.

Original link: Mosaic!

A complete review on CSS3 gradients

Gradients01

Prior the CSS33 era working with gradients for web was a very tedious process that made us go back to the graphic program every time we saw something wrong in the design, increasing the working hours drastically and making the job something really boring.

Now with CSS3 you have the chance to work with gradients in real time without having to rely on graphic programs. This guide will help you understand how gradients work in CSS3 so you won’t ever need to go back to graphic software.

Original link: CSS3 linear gradients

Free credit card Icons

crediticons00

Every week we see designers and blogs releasing fantastic freebies for all of us, they’re usually great icon sets, layouts, templates and basically every design source that might be helpful for designers. One of the best freebies released during these recent days was definitely Iconshock’s credit card icons. The set includes more than 450 payment and credit card icons in 9 different sizes, ranging from pixel perfect to vector versions.

Original files are included, both AI (vector sources) and PSD (pixel perfect files) so you can choose the most suitable option for your projects

Original link: Iconshock Credit card Icons

Stacey, a lightweight CMS without database

CMS01

Stacey is a lightweight CMS that stands out due the fact that does not require a database setup nor installation files, you only have to drag the application to your server and you’re ready to go. All your content is handled by creating folders and working with text files. On the official page you will find all the instructions to implement Stacey on your server as well as installing templates, RSS / Atom support, working examples, latest news and support.

Original link: Stacey

Spritebox, CSS classes and IDs from a single sprite image

Spritebox02

Our friend Gilbert Sinnott is the mastermind behind Spritebox, an useful tool that lets you make CSS classes and ID’s from an unique sprite image, making things much simpler for web designers and developers. The tool takes advantage of the background-position property to align specific areas of a sprite image into block elements of a webpage.

You will find many more great features whilst working with this tool, but however here’s a short list of some of the main features included in Spritebox:

  • Utilize the Z key to activate the zoom mode.
  • Press Shift + Z to indicate the zoom amount.
  • Hitting the X key displays crosshairs.
  • Use the main panel to determine different properties such as Mass and Repeat.

Original link: Spritebox

And this is it, a quick repass through some of the most relevant web and design news of the latest days, don’t forget to check all our latest articles and follow us in Facebook and Twitter to find many more great resources and articles. We also like to remind you again that we’re receiving design news from all of you, so feel free to shot us an email with your recommendations.


26 Responses to “Useful tools and resources for web designers and developers”

  1. Absolutely stunning, definitely great designs and great tips for the professionals. Keep up the good work. Thanks

    • WebDesignShock
      April 13th

      You’re welcome, it’s great to see our work helping others :)…

    • It’s wdoenrufl to have you on our side, haha!

  2. Patricks
    April 18th

    Nice compilation and definitely some useful design freebies, thanks for sharing

    • WebDesignShock
      April 18th

      You’re welcome mate, thanks for your comment…

  3. As always coming up with great and useful content, thanks.

  4. Stephanedesign
    May 2nd

    Thank you for being here to keep bringing us this information fresh and updated. A trustworthy source always.

    • WebDesignShock
      May 2nd

      Thanks Stephane, we really appreciate your words…

  5. Dale S.
    May 11th

    Been toooling around with your recommendations guys

    • WebDesignShock
      May 11th

      Thanks Dale, don’t forget to visit ThemeShock for more awesome design freebies and resources…

    • You’re welcome Reegan, great you find it useful!

  6. I’m pretty sure that many people would have been using those tools on the web already! There are different companies that could actually use these. They would probably be the ones coming from the IT and SEO industries! Plus, it’s not just them who’d benefit, but also individuals who are doing such things, too! There have been wide resources, and people should really be grateful!

  7. Thanks Marilee! keep stopping by for more great articles!

  8. I would add PNG compressor to the list: http://pngmini.com It beats all photoshop optimization tricks.

    • Pandaa, it’s a nice one, however, some psd tricks can work even better for specific files. anyway would be great to have a review of your software in our site :)

  9. It’s great that you’ve made the time to share this informative details on tools resources in here ‘cos it can be surely a big help.

  10. It’s indeed a very great topic as always about useful tools as this in web design, so thanks for taking the time in sharing it here.

  11. RT @WebDesignShock: Useful tools and resources for web designers and developers http://t.co/r8cFqL8S #design #useful

  12. Useful Design Tools «http://t.co/excSOuiE» Resources for Web Designers and Developers

  13. Useful tools and resources for web designers and developers http://t.co/r8cFqL8S #design #useful

  14. RT @WebDesignShock: Useful tools and resources for web designers and developers http://t.co/r8cFqL8S #design #useful

  15. RT @WebDesignShock: Useful tools and resources for web designers and developers http://t.co/r8cFqL8S #design #useful

  16. RT @WebDesignShock: Useful tools and resources for web designers and developers http://t.co/r8cFqL8S #design #useful

  17. RT @WebDesignShock: Useful tools and resources for web designers and developers http://t.co/r8cFqL8S #design #useful

Leave a Reply

Comments

*