반응형
반응형

HTML5 게임 - http://cocos2d-javascript.org/



반응형
반응형

30+ High Performing HTML5 Templates for Web Design

image

HTML5 templates have become very popular and for a good reason. HTML5 is still a work in process standard, but it has brought a lot of new features to the table. Recent versions of the major browsers support many of them already, and they continue to add new features.

The new tags available in HTML5 includes the <canvas> element for 2D drawing, the <video> and <audio> elements for media playback, the new content-specific elements, like <article>, <footer>, <header>, <nav>, <section> and new form controls, like calendar, date, time, email, url, search. In addition, the arrival of CSS3 adds even more power in the hands of web designers.

The benefits of HTML5 are many and new tags will help web designers build stunning future proof websites without need for proprietary plugins like e.g. Flash.

In this article I share with you high quality HTML5 templates to provide inspiration and insights about HTML5 based web design. Hopefully, this collection will help in creating your own HTML5 powered website.


SmartStart – Responsive HTML5 Template – MORE INFO

smartstart-hml5-template

This is a professional theme with a clean and simple attitude. It is designed for portfolio or business websites. SmartStart has been crafted with the latest CSS3 and HTML5 techniques. It will easily adjust to any browsing device, including mobile phones and tablets, because of its responsive feature. You can also get this template in the WordPress version.

Perspective – Responsive HTML5 Template – MORE INFO

perspective-hml5-template

Perspective is a template that is ideal for all kinds of business websites. It is packed with plenty of HTML shortcodes and jQuery plugins like accordion, sliders and tabs. The design is responsive, and it can be edited easily.

Agora HTML5 Template – MORE INFO

agora-hml5-template

This is a nice HTML5 template that is ideal for showcasing fashion, studios and creative. It can be customized easily with 13 pages and powerful full screen gallery that can showcase big sized works on the homepage directly. The customization process can be enhanced by the Serif and Sans Serif styles that are included with the template. In addition, the themes is mobile friendly.

VividPhoto HTML5 and CSS3 Template (free) – MORE INFO

vivid-photo-hml5-template

VividPhoto is a stunning photography HTML5 and CSS3 template that is designed to showcase a portfolio of images.

Vega HTML5 Responsive Template – MÒRE INFO

vega-hml5-template

Vega is a HTML5 template that is dynamic, stylish and creative. It is easy to customize and user friendly. Vega is a great way of showcasing your media.

Popular – Responsive HTML5 Theme – MORE INFO

popular-hml5-template

This template was designed with HTML5 and CSS3, and has a corporate and agency appearance. It’s fully responsive feature is created with Bootstrap.

Royale’ Creative HTML5 Template – MORE INFO

royale-hml5-template

This is a creative template that can enhance your video or photography showcase. The complete page template set will provide the possibility to showcase your work and brand in a professional and refined manner.

Minimalism HTML5 and CSS3 Template (free) – MORE INFO

minimalism-hml5-template

Minimalism is an HTML5 and CSS3 template that is minimal and beautiful in its simplicity. Combines multiple-column groupings and newspaper style column.

Harmony – Multipurpose HTML5 Template – MORE INFO

harmony-hml5-template

Harmony is packed with easy to use and built in features that will make user experience an exciting, pleasant and intuitive one. The package includes 4 Home page sliders , 16 color schemes, a working contact form with validation and more. IT is not responsive though.

Chromatron HTML5 Admin Backend – MORE INFO

chromatron-hml5-template

This is a professional and simple HTML5 template that can be used for both desktop and mobile devices. Chromatron has a lot of features and build in jQuery. There are 4 default colors available, each packed with popular and basic user interface widgets.

Folder (free) – MORE INFO

folder-hml5-template

Folder is a free HTML5 portfolio theme with responsive design.

Neutron – HTML5 Templat – MORE INFO

neutron-hml5-template

This HTML5 template is modern and clean. It is great for any portfolio or business website. It has jQuery features available and 12 page templates.

Retro – HTML5 Template – MORE INFO

retro-hml5-template

This is a modern and clean template that is best suited for business or portfolio websites. Easy and fast to set up, Retro also has a WordPress version.

NeoArts (free) – MORE INFO

neoarts-hml5-template

NeoArts is a modern and elegant web template designed for Design/Studio websites. All-in-One page with an animated theme.

Qreator – Corporate HTML5 template – MORE INFO

qreator-hml5-template

Almost anything can be changed in this template. You can make your own creative design and set up color for all site elements using CSS. It includes 5 preset Home page layouts, Google webfont directory support (320+ Fonts) and more.

Limitless – Multipurpose HTML5 Template – MORE INFO

limitless-hml5-template

Limitless HTML5 template is packed full of user friendly features and plenty of PSD and HTML files. Limitless was designed with SEO in mind.

Responsive Brownie (Free) Html5 Template – MORE INFO

brownie-hml5-template

An awesome free, responsive HTML5 template aimed at businesses and portfolios.

Simplex – Responsive HTML5 Template – MORE INFO

simplex-hml5-template

Clean, responsive and simple would be the perfect words to describe Simplex HTML5 template. Simplex has been designed with mobile devices in consideration and is well suited for studios and digital agencies. The template will adjust its size automatically on different devices, ensuring a nice experience for every visitor.

Projection – Responsive HTML5 Template – MORE INFO

projection-hml5-template

This template is entirely responsive and designed with an elegant and minimal look. The package includes CSS3 and HTML5 codes.

Manifest – Premium HTML5 Template – MORE INFO

manifest-hml5-template

Manifest is a HTML5 template that is very flexible and clean. It has a minimalist and modern design that is ideal for galleries, creative blogs, portfolios and other types of websites. The package includes 6 predefined skins to customize your website easily.

Muro (free) HTML5 Template – MORE INFO

muro-hml5-template

Muro is a brilliantly designed web template that comes with 3 different skins, 7 page layouts as well as jQuery functionality.

Energetic – Responsive HTML5 Template – MORE INFO

energetic-hml5-template

This is a professional and clean template that is ideal for portfolio, business and hosting websites. It has a responsive design that was created with HTML5 and CSS3, making it compatible with all kinds of devices including iPhone, iPad and Androids.

White Noise – HTML5 Template – MORE INFO

white-noise-hml5-template

This template is easy to customize and full of features. Show off your work with this easy-to-customize and fully featured Site Template.

Basix – Premium HTML5 Template – MORE INFO

basix-hml5-template

This theme is easy to customize and use. Basix is a minimal HTML 5 template that is full of features like unlimited colors, jQuery, 960 grid system and working contact form. The portfolio section is filtered using Isotope. In addition, this theme is also well documented, with a lot of shortcodes and features for creating your own pages.

Moderna Responsive HTML5 Template – MORE INFO

moderna-hml5-template

A clean and responsive HTML5 template. Moderna is ideal for both creative personal portfolio and professional business websites. The theme has two skins, which are stretched and boxed. The boxed version has 15 patterns so that you can have unlimited options in managing and organizing your contents.

LEFT HTML5 Theme (free) – MORE INFO

left[5]-hml5-template

LEFT web template is designed in HTML5 and offers more than 6 page layouts with a unique skin system.

Weiss – Responsive HTML5 Template – MORE INFO

weiss-hml5-template

If you are looking for a responsive and clean theme that is suitable for a wide variety of uses, Weiss HTML5 template would be a great choice.

Canopus – Responsive HTML5 Template – MORE INFO

canopus-hml5-template

This is a responsive HTML5 template that is ideal for business and portfolio websites. It was created using the best web design practices such as Microformats. Canopus is ideal for iPhone, iPad and other mobile devices.

Oreva Business HTML5 Template – MORE INFO

oreva-hml5-template

Oreva is very minimal and clean HTML5 business template that can be used for all kinds of personal and business websites. The template has 2 color variations that can fulfill all the requirements of modern web development.

Impromptu – Responsive HTML5 Template – MORE INFO

impromptu-hml5-template

Classy and responsive, Impromptu HTML5 template is perfect for portfolio blog or business websites.

Magazine HTML5 Responsive Template – MORE INFO

magazine-hml5-template

This minimalist and clean HTML5 template was created for WordPress. It is ideal for blogs, magazine, personal and news websites.

Responsy – Responsive HTML5 Portfolio – MORE INFO

responsy-hml5-template

This responsive HTML5 template is most suited for creative agency and portfolio websites. The solid responsive layout is flexible and can scale down from 1170 pixels to 320 pixels.

Mustach – Responsive Html5 Theme – MORE INFO

mustach-hml5-template

Simple yet packed with a lot of options, Mustach can be used for personal portfolio and small business sites. The template comes with a clean and neat code, making it easy to understand when making variations in the template.

반응형
반응형

20 New Essential jQuery Plugins

Latest jQuery Plugins and scripts for web designers and developers. Today I selected 20 essential jQuery plugins, sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, mobile interfaces , accordion menus, tooltips plugins and many other useful jQuery scripts collected in one place.

jQuery plugin are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you.

You may be interested in the following modern trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to Subscribe to  our  RSS-feed subscribe to our RSS-feed and Follow  us on  Twitter follow us on Twitter — for recent updates and follow me on Google+ Googleplus

20 New jQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. (via jquery.com)

jQuery Lightweight Tooltip Plugin :Tooltipster

jQuery Lightweight Tooltip Plugin :Tooltipster

Tooltipster is a lightweight jQuery plugin that enables you to easily create clean, HTML5 validated tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease.

Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

Website: http://calebjacob.com/tooltipster/

RoyalSlider – Professional Image Gallery and Responsive Content jQuery Slider Plugin

RoyalSlider – Professional Image Gallery and Responsive Content jQuery Slider Plugin

Royal Slider is a professional touch-enabled jQuery plugin for displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features.

The slider focuses on providing great user experience on every desktop and mobile device.

The slider is very customizable with 50+ options, 4 skins with PSD files, 9 pre-built templates (and more coming) and full CSS styling.

Compatibility: All Modern Browsers
Website: http://dimsemenov.com/plugins/royal-slider/
Demo: http://dimsemenov.com/plugins/royal-slider/templates/

Cross-Browser JavaScript Drag & Drop File Uploader: FileDrop

Cross-Browser JavaScript Drag and Drop File Uploader: FileDrop

FileDrop is a JavaScript cross-browser class for quickly creating drag & drop and AJAX (multiple) file uploader interfaces.

The class doesn’t require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

Compatibility: All Modern Browsers
Website: http://proger.i-forge.net/FileDrop_%E2%80%93_cross-browser_JavaScript_Drag_-amp_Drop_file_upload/7CC

Really Simple Slideshow: A Flexible Larger Slider jQuery Plugin

Really Simple Slideshow: A Flexible Larger Slider jQuery Plugin

Really Simple Slideshow is a flexible jQuery plugin for creating image sliders of any kind. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

The plugin converts any list of images into a slideshow, it can display captions with each slide, include links and there are multiple transition effects.

Compatibility: All Modern Browsers
Website: http://reallysimpleworks.com/slideshow/
Download:https://github.com/reallysimple/Really-Simple-Slideshow

Responsive jQuery Slider: iView Slider

Responsive jQuery Slider: iView Slider

iView Slider is a responsive jQuery image slider plugin with animated captions, for featuring any type of content (images, HTML, video). Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

The plugin has support for responsive layouts down to mobile and it works well with touch interfaces.

Slider has 35 built-in transition effects which is completely compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

Requirements: jQuery & Raphael
Website: http://iprodev.com/2012/07/iview/
Demo:http://iprodev.com/iview/

Lightweight Framework For Mobile Web Apps: Sidetap

Lightweight Framework For Mobile Web Apps: Sidetap

Sidetap is a lightweight framework for mobile web apps (2kb minified, gzipped).

The framework actually focuses on providing a flexible side-navigation similar to the one we know from Facebook’s mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app.

Lightweight Sidetap only weighs 2k when minifyied and gzipped!

Device Support Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.

Less Decisions to Make By embracing convention over configuration, Sidetap lets you start building your mobile interfaces right away.

Simple Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.

Requirements: jQuery or Zepto.js
Compatibility: All Modern Browsers
Website: http://sidetap.it/
Demo:http://sidetap.it/demo/stonehenge/index.html
Download:https://github.com/harvesthq/Sidetap

Javascript Slideshow For Flickr Images :Flickrshow

Javascript Slideshow For Flickr Images :Flickrshow

Flickrshow is a simple JavaScript slideshow for Flickr images.

The JavaScript slideshow doesn’t require any development expertise but, if jQuery is detected, it can function like any other jQuery plugin.

It has the ability to display images of a specific user, set, group, gallery and/or tags.

The number of images to be shown “per page”, autoplay being on/off, user control being on/off and the interval between each item can all be defined.

Website: http://www.flickrshow.co.uk/
Download: https://github.com/beseku/javascript.flickrshow

HTML Generator for jQuery Mobile Framework: jqmPhp

HTML Generator for jQuery Mobile Framework: jqmPhp

jqmPhp is an open source HTML code generator for jQuery mobile framework, the project that aims to simplify using jQuery Mobile with PHP.

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

Website: http://www.jqmphp.com/
Download: http://code.google.com/p/jqmphp/downloads/list

UI Notifications Framework: Backbone.Notifier

UI Notifications Framework: Backbone.Notifier

Backbone.Notifier is a powerful UI notifications framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Requirements: jQuery, Backbone.js and Underscore.js
Compatibility: All Major Browsers
Website: http://e-w.co.il/backbone.notifier/
Download: https://github.com/ewebdev/backbone.notifier/

Easiest Google Maps Integration With GMaps.js

Easiest Google Maps Integration With GMaps.js

GMaps.js, is a jQuery plugin, allows Google Maps integration in a easiest way. Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

Requirements: jQuery
Website: http://hpneo.github.com/gmaps/
Demo:http://hpneo.github.com/gmaps/examples.html
Download:https://github.com/HPNeo/gmaps

Chronoline.js : JavaScript Library For Display Graphical Timeline Of Events

Chronoline.js : JavaScript Library For Display Graphical Timeline Of Events

Chronoline.js is a JavaScript library for creating a chronological graphical timeline of events.

The timeline is is displayed horizontally, list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and events placed on it can be any days long and details about the events are shown in a tooltip when hovered.

Requirements: Raphael.js, jQuery, jQuery qTip2 plugin
Compatibility: All Modern Browsers
Website: http://stoicloofah.github.com/chronoline.js/

JavaScript WYSIWYG Editor With Drag ‘n’ Drop : Redactor

JavaScript WYSIWYG Editor With Drag ‘n’ Drop : Redactor

Redactor is a free JavaScript WYSIWYG editor with drag ‘n’ drop images and files on the web. Redactor powered by jQuery its have clear interface.

It auto-converts textarea fields into an editor and the editor is capable of all the major actions (text-styling, adding image/file/video/tables/lists).

Compatibility: All Modern Browsers
Website: http://redactorjs.com/
Demo: http://redactorjs.com/examples/

Awesome Scrolling Effects jQuery Plugin: SuperScrollorama

Awesome Scrolling Effects jQuery Plugin: SuperScrollorama

I m sure you not forget the previous version “Scrollorama, the popular jQuery plugin creating scrolling effects in scrolling of web pages.

There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

Compatibility: All Modern Browsers
Website: http://johnpolacek.github.com/superscrollorama/
Download:https://github.com/johnpolacek/superscrollorama

Drop Down Menus With Images jQuery Plugin :ddSlick

Drop Down Menus With Images jQuery Plugin :ddSlick

ddSlick, a free lightweight jQuery plugin for creating drop down menus (list menus) with images and description, list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

Compatibility: All Modern Browsers
Website: http://designwithpc.com/Plugins/ddSlick

Awesome jQuery Calendar :jQuery Verbose Calendar

Awesome jQuery Calendar :jQuery Verbose Calendar

jQuery Verbose Calendar is an awesome jquery plugin created by John Patrick Given (software developer & interface designer), The jQuery plugin creating a calendar that shows the whole months and days of a year at the same time and you can also change month and year.

When its loaded, it auto-scrolls to “today date” and displays the day names when hovered to any date in a tooltip.

Requirements jQuery + Tipsy & jQuery.ScrollTo plugins
Compatibility All Major Browsers
Website: http://iamjpg.github.com/jQuery-Verbose-Calendar/
Download; https://github.com/iamjpg/jQuery-Verbose-Calendar

Vector Maps With jQuery, Vector Graphic Maps for Modern Browsers :JQVMAP

Vector Maps With jQuery, Vector Graphic Maps for Modern Browsers :JQVMAP

JQVMap is a jQuery plugin for render vector graphic maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes withready-to-use maps of “world, USA, Europe and Germany”.

There are several customization options for beautifying the maps including colors, borders or their opacity.

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Compatibility: All Modern Browsers
Website: http://jqvmap.com/
Download: https://github.com/manifestinteractive/jqvmap

jCS Media Library (jCSML) For Creating Cross-Browser Animation

jCS Media Library (jCSML) For Creating Cross-Browser Animation

jCS Media Library (jCSML) is powered by jQuery and it is specifically designed for creating cross-browser animation and be able to run them everywhere without having to tweak anything for individual browsers or platforms.

jCSML create flash-quality animations can be built that will run from IE7 all the way to the iPad/iPhone without changing a single line of code. It can produce highly effective animations using the jCSML scripting construct. The animations can also be easily packaged up and sold like .SWF files.

JCSML works everywhere like IE7 browsers, android Or an iPad/iPhone.

Requirement: jQuery & jQuery easing library
Compatibility: All Major Browsers
Website: http://jcsml.com/
Demo: http://jcsml.com/pageshell.html?root=Tutorials&target=Starship#
Download: http://www.jcsml.com/pageshell.html?root=PurchasePages&target=PurchasePage&TOCEnabled=FALSE

minjs: Lightweight JavaScript Components

minjs: Lightweight JavaScript Components

minjs is a collection of independent JavaScript components, built on jQuery, that aims to accomplish a specific job with lightweight code.

minjs stays out of your way. It does not dictate how you to design your UI. It tries to make no assumptions about the layout of the HTML or CSS it’s running in.

Currently, there are 3 components: minform, longtable and dtcal.

minform brings cross-browser compatibility to HTML5 form enhancements(for attributes: placeholder, required and autofocus).

Compatibility: All Major Browsers
Website: http://www.minjs.com/

Real Shadow: jQuery Plugin For Mouse-Sensitive & Realistic Shadows

Real Shadow: jQuery Plugin For Mouse-Sensitive & Realistic Shadows

Real Shadow is a simple-yet-effective jQuery plugin for mouse-sensitive & creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

So, the shadow’s location and size is determined by the element’s distance to the mouse pointer which ends up in a cool effect.

Compatibility: All Modern Browsers
Website: http://indamix.github.com/real-shadow/
Download: https://github.com/Indamix/real-shadow/

MiniJs: A Suite Of jQuery Plugins Written In CoffeeScript

MiniJs: A Suite Of jQuery Plugins Written In CoffeeScript

Matthieu Aussaguel a web developer working at Envoto, releasing MiniJs plugins.

MiniJs is a free and open source suite of jQuery plugins that are written in CoffeeScript.

The plugins are perfect for everyday-use and include: slider, tooltip, notification, Twitter feed and counter (new ones are on the way).

They are all built with simplicity in mind and very easy-to-use with only few important parameters.

Compatibility: All Major Browsers
Website: http://minijs.com/
Download: https://github.com/minijs

jPages: Awesome JavaScript Pagination Plugin

jPages: Awesome JavaScript Pagination Plugin

jPages is a client-side JavaScript pagination plugin (jQuery plugin) with have lots of features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel and also integration with Animate.css and Lazy Load.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

Compatibility: All Major Browsers
Website: http://luis-almeida.github.com/jPages/
Demo: http://luis-almeida.github.com/jPages/defaults.html
Download: https://github.com/luis-almeida/jPages


반응형
반응형

Compass is an open-source CSS Authoring Framework.


Why designers love Compass.

  1. Experience cleaner markup without presentational classes.
  2. It’s chock full of the web’s best reusable patterns.
  3. It makes creating sprites a breeze.
  4. Compass mixins make CSS3 easy.
  5. Create beautiful typographic rhythms.
  6. Download and create extensions with ease.

Compass uses Sass.

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.


반응형
반응형

Style : http://tympanus.net/codrops/

Flipboard Effect
 : http://tympanus.net/Development/FlipboardPageLayout/?page=0

Annotation Overlay Effect with CSS3
 : http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/

Animated 3D Bar Chart with CSS3
 : http://tympanus.net/Tutorials/Animated3DBarChart/

3D Bouncing Ball with CSS3
 : http://tympanus.net/Tutorials/CSS3BouncingBall/

Full Screen Slit Slider
 : http://tympanus.net/Tutorials/FullscreenSlitSlider/

Vertical Showcase Slider
 : http://tympanus.net/Tutorials/VerticalShowcaseSlider/

반응형
반응형

15 Online HTML5 Tools for Web Designers

by Andy on October 10, 2012

image

Online HTML5 tools are quite useful for web designers who wants to forge ahead of the competition, and have more satisfied clients. It is of course important to follow developments and keep an eye on new tools that emerge.

HTML5 is the new version of the markup language HTML that has been used for presenting and structuring online contents since the early 90s. It is an internet core technology that was proposed originally by Opera Software. If you want to learn more of it’s background and history these HTML5 infographics can help you. HTML has been standing in the shadow of other frameworks like Flash and IE, but the word is, that this is going to change with the arrival of HTML5. As of today, HTML5 is still being developed, but believe me, it is here to stay.

HTML5 has opened a window of opportunities for web designers. Online web design tools based on HTML5 makes it easier to incorporate audio, video, drag and drop, fonts, animations and graphics into web pages. HTML5 also helps web designers build mobile friendly website themes to ensure excellent user-experience when surfing the Internet on mobile devices. However, since such tools are fairly new, some people may still be unaware of their true potentials. Also, some web designers still want to use Flash and other popular framework as their primary tool set.

Below, I have listed 10 useful online HTML5 tools. They can provide developers and web designers with manoeuvrability in making websites more convenient, productive and attractive.


Moqups – HTML5 App For Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts. You can go to their blog and read more about this highly popular project.

moqups

Fontdragr – Online Font Testing Tool

If you are a designer, you might find it difficult to choose a decent font. However, using this online font testing tool can make the process much easier. You can view any font you want in a webpage without changing its CSS or HTML code.

fontdragr

Liveweave – HTML5, CSS3 & JavaScript Playground

Liveweave is a new playground for developers and designers to test HTML, CSS and Javascript. Liveweave editor has built-in context-sensitive autocompletion for HTML4/HTML5 and CSS2/CSS3, that makes life a lot easier.

liveweavwe

Adobe Edge Animate

Edge Animate will allow you to create animated and interactive web contents. It has an easy to use and intuitive interface, precise control, broad reach and more.

adobe-edge

HTML KickStart

HTML KickStart is not really a tool, it is a set of HTML5, CSS, and jQuery building blocks for website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.

html5-kickstART

Stitches – An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click “Generate” and your sprite and stylesheet will be good to go. Currently compatible only with the latest version of Firefox and Chrome.

stitches

Create – Web Editing Interface

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.

create

SpriteBox Online HTML5 Tool

These days, compressing images seems to be the rage. By placing your photos in a Sprite, you can increase the rate of your loading times as well as image transitions. Online Sprite Box Tool will aid in designing photos into sprites with the use of HTML5, CSS3 and jQuery.

sprite-box

Online Velocity Sketch Tool

This unique HTML 5 online canvas drawing tool can make creative, strange looking creations. Use this HTML5 tool to come up with something really awesome for your designs.

velocity-sketch

On/Off Flipswitch HTML5/CSS3 Generator

A beautifully designed and super-easy-to-use tool for generating your own HTML5/CSS3 “On and Off” flipswitches with optional animated transitions.

on-off-switch-generator

Online SVG to HTML5 Canvas Tool

Most vector art packages such as Inkscape and Illustrator can export SVG or Scalable Vector Graphics elements. This tool will allow you to convert SVG files into its HTML 5 canvas equivalent.

svg-to-html5

Online 3D Sketch Tool

This sketch tool uses the capability of HTML canvas in creating 3D drawing. The tool will allow you to draw with dashed lines and vibrate your drawing. You can also rotate the 3D canvas by dragging with the cursor horizontally while pressing down the Space Bar.

sketch-tool

Online Pattern Generator Tool

This is an online tool that can be quite useful for creating header and page backgrounds. Designers can even use the tool to create heading backgrounds. The tool will allow you to try out any pattern you want in just a few seconds.

pattern-tool

Online XRay Tool

Online XRay Tool allows designers to quickly view the details of various page elements that are present in any webpage with just a few clicks of the mouse. Just drag the website bookmarklet into your own book bookmarks, go to the webpage you like to analyze, click on the XRay bookmark and then click on any element of the page. The tool can take care of HTML5 elements like canvas and give you the design data you need. online-Xray-tool

Online HTML5 Audio Maker Tool

Among the best features of HTML5 is the introduction of the audio tag. This tool will help designers get familiar with the newest audio features being offered by HTML5. Even more interesting is the fact that designers can play, not just with audio, but also with video integration using this HTML5 online tool.

html5-audio

Group Discussion!

Please tell us what you think of these HTML5 tools by adding your comments below. And please, if you have considerable experience with an online HTML 5 tool not included in my list, let me know about it. You are also welcome to share this article to your friends and colleagues.

반응형

+ Recent posts