Up until recently HTML5 & CSS3 had issues with cross-browser support. That is now quickly dissipating. All of the latest versions of every modern browser supports almost all if not all features of these technologies and HTML5 is now competing against native apps for mobile devices. Here are 12 very helpful tools to help you streamline development with HTML5 and CSS3.
2# Adobe Edge Animate
3# HTML Kickstart
Kickstart is another fantastic tool for HTML5 development. Kickstart offers a large set of building blocks for HTML5 websites. It is similar to the Twitter Bootstrap application. There are buttons, icons, color sets, styles, menus, typography, tooltips and the list goes on and on. Kickstart is extremely easy to setup. Just download the files and add this block of code into your template/site’s area.
4# HTML5 Reset
5# CSS3, please!
CSS3, Please! Is an online CSS3 cross browser rule generator that was created by developers, Paul Irish and Jonathan Neal. It offers very helpful snippets that correctly implement the new features of CSS3. The best part about this is the box that is outputted to the screen which shows the styling in real-time. You can toggle the on and off state of every style rule. Rules include border-radius, gradients and other new CSS3 styling and features.
6# CSS3 Gradient Button Generator
CSS3 has given us some fantastic features that allow us to create great designs without the use of background images. The days of needing to use small precise images to give a rounded look to an element are over. Now we can even add pure CSS3 gradients to buttons and other elements. The Gradient Button Generator let’s us do this easily and allows us to view the different colors for the gradient and generate the code in just seconds.
Visit Gradient Button Generator
7# HTML5 & CSS3 Support
We can use Modernizr and other tools to test for HTML5 and CSS3 features, but we can also get the answer very quickly by using the HTML5 and CSS3 Support chart at fmbip.com. This is an updated table which displays the latest features along with which browser supports or does not support them. Need to know if IE8 supports a certain feature, such as border-radius or CSS3 transitions? You can find out in seconds.
Visit HTML5 & CSS3 Support
8# CSS3 Cheat Sheet
Smashingmagazine.com has a really helpful cheat sheet with all of the CSS3 features and code. I as a developer, have many of these types of cheat sheets and I will say that this is one of the best ones. There is a massive amount of information squeezed on to one page. There is a GIF preview version as well as a pdf version of the CSS3 Cheat Sheet.
A “sprite” is an image which we can use to give the effect of multiple images by using the “background-position” property. Sprites are usually used to change an image when hovered over. Sprites perform much better and faster than actually having multiple images. Spritebox is an online WYSIWYG tool which quickly creates CSS ids and classes from a sprite image and correctly align areas of the sprit into block elements on a page. Spritebox is based on HTML5, CSS3 and JQuery and is completely free to use.
Patternizer is another online generator tool that allows us to create really nice complicated patterns using the HTML5 “Canvas” feature. Patterns are great for backgrounds in headers, footers and other website elements. The canvas feature has better performance than if we were to use a background image. You can create and generate the code for your website in seconds. The patterns that you create can easily be saved and shared with anybody.
12# Font Dragr
I actually just found this tool today. Font Dragr allows you to test different fonts right on their website. It does this by using the CSS @font-face rule. You can drag any font from your computer into the select list at the top of their web page and it will transform all of the text on the page automatically without editing of any HTML or CSS. This is extremely helpful to be able to try out different sets of fonts for a website. You can find all the fonts on your Windows PC by going to “Control Panel->Appearance->Fonts”. You can then drag them to Font Dragr.
Visit Font Dragr
Brad Traversy is a web developer and tech writer at Tech Guy Web Solutions. Tech Guy specializes in affordable web design and open source website development as well as technologies such as PHP, MySQL and Ruby on Rails.