| Posted under Articles

Useful Online Tools for Web Developers & Designers (updated)

 

Favigon Generator

This is one of our favorite tools as it generates all favicon images needed for your site, along with the HTML code for all major browsers & platforms. It includes iOS, android and windows 8 tile icons.
http://realfavicongenerator.net/

Canva

Canva just released (that’s on 2017) a website about colors! Its has lots of great articles to help you with color theory and color combination, but what is more important, it also has lots of color palettes to choose from, a colors meaning browser and a font combinations tool! It just became my favorite tool!
So, to gather all the links:

SpritePad

SpritePad is a free online tool that makes it easy to create your sprite image. Simply drag & drop the images you need and the tool will produce a png sprite image and the CSS needed ready for use.
There is also a premium version where the user gets more advantages, as auto-alignment to automatically fit the images on the canvas.
http://spritepad.wearekiss.com/

Typ.io

Typ.io is actually a guide font pairing with live examples. You may browse through the recommendations, or the most popular fonts, or see their list of websites where they are revealing the fonts used. You may also browse example sites by selected font.
http://www.typ.io/

Font Squirrel

Font Squirrel is a website that features free fonts, that the user may find in various categories.
But it also offers a webfont generator. You upload the font of your choice and simply download a zip file containing all webfonts and CSS needed for your site.
http://www.fontsquirrel.com/tools/webfont-generator

IcoMoon

IcoMoon is an icon library that features various icons from the web. It also features an app that lets you build and use your own icon sets in different formats including SVG, icon font or simple PNG sprites.
https://icomoon.io/app/

CSS3 Generator

CSS3 Generator is an online tool that produces CSS code. You just choose through the list of options, like border radius & transform, select the values you wish and get the code, while the site makes a live example depending on your choices.
http://css3generator.com/

Gradient Editor

HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. This tool is a Photoshop-like gradient editor where you may select the colors of your choice along with their position and get the CSS code automatically produced.
http://www.colorzilla.com/gradient-editor/

CSS Font Stack

CSS Font Stack is a list of web safe fonts. For each font, you may see the font information with percentage usage for MAC and Windows. Also you have the ability to copy the command needed for your CSS in order to use the selected font, with the correct ordering of the font stack.
http://cssfontstack.com/

Google Maps Colorizr

This is one of our favorites, extremely useful when you use Google Maps on your website using the API or a library such as gmaps.js.
Google Maps Colorizr conveniently transfers your HEX RGB colors to the HSL colors used by Google Maps. You can select any element, such as water or landscape, set the color you wish, its visibility and just get the code produced automatically on the right part of the screen.
http://software.stadtwerk.org/google_maps_colorizr

iPad Peek

This site features a simulator for iPad, iPhone and iPhone5 making it easy to test your website. You select the device you like and visit your url and see how it renders. You may also choose to rotate the device.
http://ipadpeek.com/

Lipsum.pro

There are many lorem ipsum generators on the web, but this one differs, as you just click and get the produced lorem ipsum text. You are able to select the number of characters, words, sentences or paragraphs to use.
http://www.lipsum.pro/

Convert Case

Did you ever type something accidentally in all caps or had a text that you had to convert to lower case or uppercase? That is what this site does. Simply enter your text and choose the case you want to convert it to: Sentence case, lower case, upper case, capitalized case or alternating case.
Extremely useful for changes needed in foreign languages.
http://convertcase.net/

0 to 255

0 to255 is a simple tool that helps web designers and developers find variations of any color: lighter and darker colors based on the selected color by the user. Saves you time from guessing or using photoshop and gives a live preview of the colors for visualization.
http://0to255.com/

Google Fonts

The most popular site that offers a collection of webfonts that you can use on your website. You can type in the text you want for preview and select your fonts.
https://www.google.com/fonts

PlaceIt

PlaceIt is a very cool website with a collection of mockup images to use. You can find mockups with tablets, phones, laptops, etc that you can customize for your use.
https://placeit.net/

Subtle Patterns

Subtle Patterns offers a wide collection of patterns that you can test online to see how they look and also download for free.
http://subtlepatterns.com/

Color by hailpixel

In this website you can find color combinations and explore color tones. You just drag your mouse on the screen and select the color you like.
http://color.hailpixel.com/

Thanks for your likes, this will motivate me to write posts more often!