Author: Lucas Rohm, Owner of Mission Bay Media, A San Diego web design firm.
Whether your field of expertise or interest is in Internet Marketing, Web Design and Development or SEO, it’s always nice to have a few tricks up your sleeve for your clients or friends. If you’re involved in editing or administering a website of any kind, there’s a chance you’ll have to perform some general Web Design related tasks, and what follows are some great (FREE) online resources and tools to streamline and optimize those tasks.
1) Dynamic Drive’s Favicon Generator –
One great, easy way to give a professional feel to any website is by including a Favicon. In case you’re not familiar, a website’s Favicon is the small image or icon that shows up next to the website’s name in the web browser’s tab or URL bar. Favicons usually come in .ICO file format. The best way to create a Favicon is to design an “iconic” representation of your site or logo in your favorite image editor, being sure to make the dimensions of that icon 16 pixels by 16 pixels. You can save that icon as a .PNG, .JPG or .GIF to start with. Once you visit Dynamic Drive’s Favicon Generator, you can upload your icon in any of the above image formats, and the Favicon Generator will allow you to download that icon in the proper .ICO format. Simply upload your new .ICO file to the root directory of your website and your new Favicon should install automatically!
2) CSS Checkbox –
If you spend a lot of time writing CSS code, especially in relation to creating and styling form elements such as checkboxes, radio button and input fields, you’ll love this next free web designer resource. Designers looking for nice looking form elements and code, in particular free Checkbox CSS code, can check out CSS Checkbox for a variety of CSS and Image based checkbox styles that are available for free download.
CSS Checkbox sports a relatively large Checkbox code package that is open source, and hosts a CSS Checkbox generator that creates custom Checkbox CSS for specific situations. Whether you’re designing Opt-In forms for Newsletters or Checkout Forms for Ecommerce applications, having nice looking checkboxes from CSS Checkbox goes a long way. These CSS Checkboxes are “class”-based, which means that even if you run a site built on WordPress or Magento, you can retroactively install these beautiful checkbox styles. They even take requests for new checkbox styles, so if you have an idea of your own you can go share it with CSS Checkbox, and if you’re lucky they’ll post the CSS Checkbox style you’ve always dreamed of to their site.
3) CSS 3 Gen –
This site is a really wonderful resource for generating specific CSS styles for your HTML elements. CSS3Gen gives you an incredibly simple interface for creating cross-browser CSS3 styles for some of the more impressive CSS properties included within the CSS3 specification. By using sliders and editing simple configuration values, CSS3Gen can generate CSS code for the CSS box-shadow property, the CSS text-shadow property and the CSS gradient property, all of which are revolutionary when it comes to web design in the sense that prior to CSS3, these effects were achievable only through the use of images. CSS3Gen also provides some awesome tools to create CSS buttons for your menus and forms, as well as a generator for the CSS border-radius property — the CSS property that miraculously allows you to add rounded corners to your HTML elements.
4) Font Squirrel –
If you spend any time on a computer at all, chances are you are at least partially obsessed with fonts that are NOT Times, Helvetica or Arial. If that’s the case, you’ll absolutely love Font Squirrel. This Website offers “handpicked, free fonts”, which are great if you’re working on a personal project or designing something professional on a budget.
In addition to offering a really fabulous directory of sleek and impressive typefaces, Font Squirrel also offers a CSS @font-face Generator tool. This tool basically allows you to upload a font or typeface of your choice, and will subsequently use that typeface to generate a CSS @font-face kit that you can download free of charge. The @font-face kit will provide you several different file formats for your font (this allows for Cross-browser custom font implementation through CSS), a CSS file with example @font-face syntax (the CSS code that allows you to embed custom fonts in a website), and a demo HTML file so you can see your custom fonts in action. A quick word of advice–if you want to give your website or web project a little professional flare, take full advantage of this free tool and Font Squirrel’s incredible font database.
Did you learn something fun or interesting in this post? If so then please share the love and share the wisdom!
photo credit: luxuryluke via photopin cc
