Fresh Tools and Code Snippets for Web Designers -- PSD to HTML Blog

45 Fresh Tools and Code Snippets for Web Designers

May 3, 2013

Why invent the wheel over and over again? We don’t want to discuss this philosophical question. We just want to offer you a collection of fresh tools and trendy code snippets which can help to save some time when designing a new website.

Snippets for Menus, Scrolling, Sliding and Collapsing

1). Responsive Multi-Level Menu
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
by Mary Lou: “A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.”

2). How to create a resizing menu bar
http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/
by Antonio Pratas: “Lately some websites, like This is the Brigade and All You, have started featuring a dynamic and animated menu that resizes on scroll down. Minimizing the main navigation to allow more space for the content. In this tutorial, I’ll explain how you can create this menu yourself with HTML5, CSS3 and just a bit of jQuery.”

3). 25 Free Dropdown Menus in HTML5 and CSS3
http://smashinghub.com/25-free-dropdown-menus-in-html5-and-css3.htm
by Ali Qayyum

4). How To Create a Simple Collapsing Header Effect
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
by Chris Spooner: “A collapsing header effect, where the page header or banner would gradually shorten and disappear upon page scroll.”

5). Build a Single-Page Sliding Navigation Bar with jQuery
http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/
by Jake Rocheleau: “Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.”

6). Elastic Content Slider
http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
by Mary Lou: “A fluid content slider that will adjust in width and height depending on the size of its parent.”

7). Trendy Responsive jQuery Sliders
http://www.queness.com/post/14074/trendy-responsive-jquery-sliders
by Kevin Liew: “There are hundreds of slider plugins out there, although premium Javascript sliders usually provide more features, however, some free and well-maintained sliders do have outstanding features, vast configurations and well-documented… Here we have 11 Free jQuery Sliders that supports responsive layout, not just that, most of them are featured packed too.”

8). Flexisel – Responsive Carousel jQuery Plugin
http://9bitstudios.github.io/flexisel/
by 9bit Studios

9). Nested Accordion
http://tympanus.net/codrops/2013/03/29/nested-accordion/
by Mary Lou: “A simple, nestable accordion with some examples of nesting levels and a media query.”

10). Retina Web Design – Info, Tools And Techniques
http://www.designresourcebox.com/retina-web-design-info-tools-and-techniques/
by admin: “…why we should design something just for the visitors who own Apple products and a small number of other devices. For those of you who share his opinion, we should do it because it is the proper way, something like cross-browser optimization but not quite like it. ”

11). 10 jQuery Horizonal Scroll Demos & Plugins
http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
by Sam Deering: “…we bring to you 10 jQuery Horizonal Scroll Demos & Plugins useful for those who see things horizontally.”

12). Background Slideshow
http://tympanus.net/codrops/2013/04/17/background-slideshow/
by Mary Lou: “A simple fullscreen background slideshow with auto-play and controls to navigate and pause.”

CSS and CSS3

1). Detect Unmatched CSS Selectors with Helium
http://davidwalsh.name/detect-unmatched-css-selectors
by David Walsh: “One thing I can’t stand is extra code. Whether it’s an extra CSS or JavaScript file that’s been included by the page, bloated HTML, or unoptimized images, we’re making our millions of desktop and mobile visitors pay for our laziness and mistakes.”

2). How to Center Anything With CSS
http://designshack.net/articles/css/how-to-center-anything-with-css/
by Joshua Johnson: “We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?”

3). A Super Simple And Sexy Tooltip [Only CSS]
http://www.gonzoblog.nl/2013/03/27/a-super-simple-and-sexy-tooltip-only-css/
by Jan Rajtoral: “So far I can check, this CSS Tooltip works in all modern browsers, but you can always use modernizr to make this magic also happen in IE6,7 and 8.”

4). How to Create a Responsive Centered Image in CSS3
http://www.sitepoint.com/css3-responsive-centered-image/
by Craig Buckler: “Until recently, image lightboxes would need to implement several equations to determine the viewport and image dimensions then size and center accordingly. Fortunately, we can now rely on CSS3 media queries and transforms to do the hard work for us.”

5). 30+ Hot CSS3 Image Hover Scripts
http://www.tripwiremagazine.com/2013/04/css3-image-hover-scripts.html
by Lars: “CSS image hover scripts makes it simple to add cool dynamic effects on otherwise ‘static’ images whenever the mouse hovers over them.”

6). Hover Effect on Images From Different Directions Using Pure CSS
http://demosthenes.info/blog/639/Hover-Effect-on-Images-From-Different-Directions-Using-Pure-CSS
by Dudley Storey: “…there’s been a UI trend in which moving your mouse over an element from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. ”

HTML5 Code Snippets and Tools

1). Markup Framework
http://www.markupframework.org
by New Vintage Media: “The Markup Framework is a collection of layouts, widgets, typographic styles and other UI components to use as a starting point for your own Web designs.”

2). HTML5 code snippets to take your website to the next level
http://www.catswhocode.com/blog/html5-code-snippets-to-take-your-website-to-the-next-level
by Jean-Baptiste Jung: “In this article I have compiled awesome HTML5 code snippets to take your website to the next level.”

3). 10 Best Online HTML5 Tools for Web Designers
http://www.webdesignfact.com/2013/03/10-best-online-html5-tools.html
by admin: “…there are still many who don’t know HTML5 properly. It is currently being enhanced by experts to provide us web designers & developers with awesome new revolutionary website features.”

4). How to use HTML5 audio (part 1)
http://www.webdesignerdepot.com/2013/04/how-to-use-html5-audio-part-1/
by Sam Piggott: “The introduction of the HTML5 spec introduced new tags for presenting media on a webpage; the ‘audio’ and ‘video’ tags, rendering the ‘object’ tag no longer fit for video and audio streaming.”

5). How to use the download attribute
http://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/
by Sara Vieira: “HTML5 came with all new APIs, new input types and attributes for forms. As is often the case, those major additions often obscure the minor upgrades and I think that this is particularly true of the download attribute.”

6). Making Websites Location Aware With HTML5 Geolocation
http://webdesign.tutsplus.com/tutorials/ux-tutorials/making-websites-location-aware-with-html5-geolocation/
by Aaron Lumsden: “Geolocation API. This allows your site to receive geographic positioning information using JavaScript.”

7). How to use the Fullscreen API
http://www.webdesignerdepot.com/2013/03/how-to-use-the-fullscreen-api/
by Sara Vieira: “…the Fullscreen API provides a native way for the browser to do what was only possible in flash for a long time: display the webpage in fullscreen mode for the user.”

Working with Colors and Images

1). Two new colour tools to try today
http://www.creativebloq.com/design-tools/two-new-colour-tools-try-today-2131973
by admin: “Browser-based tools Pretty IP and Hailpixel Color help you find the colours you need in a simple and intuitive way. How have you coped without them?”

2). 10 Time Saving Online Color Tools for Web Designers
http://line25.com/articles/10-time-saving-online-color-tools-for-web-designers
by Chris Spooner: “Working with colors is a time consuming task for a web designer, for starters you need to pick out a color palette for your designs, then there’s all kinds of code values to remember and convert from hex to RGBa. To speed things up and make the designer’s life much easier a bunch of handy tools are available online. These tools help you pick, choose and convert your color selections with ease for your next web design project.”

3). The 5 best colour search tools for designers
http://www.creativebloq.com/colour/best-tools-3132246
by Luke Clum: “Have you ever felt the lack of a sophisticated and intuitive way to search for colour inspiration? If so, you’ll find a remedy here.”

4). The best image compression tools
http://www.netmagazine.com/features/best-image-compression-tools
by Mike Williams: “Save bandwidth and accelerate your site’s performance with these powerful free tools.”

5). Helpful Tools to Optimize Images for the Web
http://www.onextrapixel.com/2013/04/01/helpful-tools-to-optimize-images-for-the-web/
by Mike Brown: “You can use many ways to achieve a fast loading website. One of these many ways is image optimization. Image optimization is the practice of reducing the file size of an image without necessarily losing its aesthetic features.”

6). 7 Jquery plugins To Deal With Image Cropping
http://www.webdeveloperjuice.com/2010/12/24/7-jquery-plugins-to-deal-with-image-cropping/
by techshadow

7). Dynamic jQuery Image Avatar Cropping Effect
http://blog.teamtreehouse.com/dynamic-jquery-image-avatar-cropping-effect
by Jake Rocheleau: “I can still remember the old digg.com user profiles with dynamic avatar cropping via JavaScript. Their user interface was clean, easy to use, displayed a sample before you cropped, and would auto-update as you changed the selection box. I have always admired this design and have been on the lookout for a great jQuery plugin which can offer similar features with less custom code.”

8). Essential JavaScript: the top five graphical libraries
http://www.netmagazine.com/features/essential-javascript-top-five-graphical-libraries
by Jack Franklin: “Jack Franklin explores five libraries for doing graphical work with JavaScript, covering data visualisation, 3D work and game-building.”

9). Neat jQuery Animation Plugins – 20 Examples
http://www.designresourcebox.com/neat-jquery-animation-plugins-20-examples/
by admin: “If you are looking for a jQuery plugin to animate something on your website, you landed in the right place cause you will find here 29 Jquery animation plugins to help you do that.”

Collections of Web Design Tools and Plugins

1). Unheap – A tidy repository of jQuery plugins
http://www.unheap.com
by admin: “Unheap was assembled in 2010 as an internal team resource. We found other repositories underwhelming and wanted to build a better experience for browsing & staying on top of the latest jQuery plugins. We made the site public on November 2012.”

2). 15 underrated web design tools to check out today
http://www.creativebloq.com/web-design-tips/underrated-web-design-tools-1232782
by Kieran Potts, Sam Hampton-Smith and Tom May: “…we take a look at the more underrated tools that can help you improve client-side browser development and rigorously test everything that you build. Hopefully you’ll find something useful in our feature that you’ve not heard about previously.”

3). 25 Fresh Web Design Resources Tools
http://smashinghub.com/25-fresh-web-design-resources-tools.htm
by Ali Qayyum: “With so many tools being released in vast numbers each day, you might find it hard to select the right tool for the right task. Listed below are the best fresh web design resources tools to make the process of web designing more convenient.”

4). 8 Fresh and Really Useful jQuery Plugins
http://www.webdesignfact.com/2013/04/useful-jquery-plugins.html
by admin

5). 50 Time-Saving Web Design – Developer Tools
http://designmodo.com/web-design-developer-tools/
by Ezequiel Lavaca: “Mock Up Tools, Icons, Textures, Stock Images, Fonts, Feature Detection Tools, Image Galleries, Sliders, and a Sprite Generator.”

6). Essential tools for every web designer
http://www.webdesignerdepot.com/2013/04/essential-tools-for-every-web-designer/
by Andy Leverenz: “Luckily enough for us and our fellow design community there are tools available to assist in completing the job quicker and more efficiently. Below, I have outlined a list of tools I recommend for any web designer.”

7). Most Helpful Webapps & Resources for Building Modern Websites
http://blog.teamtreehouse.com/most-helpful-webapps-resources-for-building-modern-websites
by Jake Rocheleau: “…a small collection of websites and webapps to help developers work smarter and faster. You may not find all of these tools useful, but they are worth looking into and doing a bit of research. Plus there are new resources launching online every month.”

8). 30 New Open Source Plugins and Scripts for Dynamic Websites
http://spyrestudios.com/30-new-open-source-plugins-scripts/
by Jake Rocheleau: “…30 amazing JS plugins for web developers. Each is completely free to download and use within your own website projects, and you may customize features as needed. The most popular items also have a Github repo which includes an FAQ wiki and other support questions.”

9). 20 Incredibly useful tools and resources for Web designers
http://thenextweb.com/dd/2013/04/12/25-incredibly-useful-tools-for-web-designers/
by Harrison Weber: “Of course, we’re big fans of getting down to the basics, like putting pencil to paper, but sometimes finding new apps and resources can help you get those creative juices flowing.”

10). 10 Kick Ass jQuery Plugins for your Next Project
http://www.onextrapixel.com/2013/03/22/10-kick-ass-jquery-plugins-for-your-next-project/
by Pete R.: “Sometimes your knowledge of programming can limit your design perspective. You may have this idea of interaction that you want to do for your next project but you decided to let it go because you think it is impossible. Later on, you discovered that someone already wrote a plugin for it and you wish you’d found the plugin before you started the project.”

11). 19 Best Tools to Check Website Performance and Speed
http://seobuzzworld.com/19-best-tools-to-check-website-performance-and-speed/
by admin

Please note:
To find the latest links and posts on tools for web design and code snippets, follow our Pinterest board Tools for web design and devs.