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.
Make stunning drop down menus, jQuery plugin
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
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
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
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
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!
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
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
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
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
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.
Leave a comment
46 comments for Useful tools and resources for web designers and developers