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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

Create a Rating System With CSS, Web fonts and Sprites

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-create-a-rating-system-with-css-web-fonts-and-sprites/

http://webdesigntutsplus.s3.amazonaws.com/tuts/318_adi_QT/star_demo/index.html

How to create QR code reader in HTML5 website

javascript QRCode scanner

https://github.com/LazarSoft

How to Turn jQuery Accordion into CSS3 Accordion

http://css.dzone.com/articles/how-turn-jquery-accordion-css3

Have you ever used ordinary accordion plugins in your projects? I would believe so! Most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as an accordion plugin for out test purposes. See how it works:

Live Demo

That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.

animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!

INTERFACE SKETCH http://interfacesketch.tumblr.com/

스케치, http://enva.to/uxlzdf에 스케치를 얻을 수 있도록 인쇄 서식 파일의 전체 더미 인터페이스

Free sketch templates for web, mobile and tablet.

If you're designing a website or app, these simple templates are designed to help you sketch your ideas on paper.

How to use

Download a template. Print it out. Start sketching! You can print in colour or black-and-white; on laser or inkjet printer. All templates are in PDF (portable document format). Some of the templates contain a grid of dots to help with alignment when you sketch. These dots do not represent the pixel dimensions of the device or browser.

Printing tip

Some templates contain pages in landscape and portrait sizes. To print these templates correctly, look for the checkbox option in your print dialog box that states auto-rotate (in some PDF readers, it may say auto-rotate and center). Make sure this option is selected; this will ensure that pages are printed in their correct orientation.

The templates (in PDF)

These templates are hosted on Google Docs. When you click a link below, a preview of the template will open in your browser. To save the template to your computer as a PDF file, press Ctrl+S or click the File menu and then choose Download.

Web browser

• A4 (5.8 MB)
• US Letter (5.5 MB)

iPad

• A4 (221 KB)
• US Letter (222 KB)

iPhone 4

• A4 (711 KB)
• US Letter (692 KB)

iPhone 5

• A4 (871 KB)
• US Letter (956 KB)

Nexus 7 tablet

• A4 (918 KB)
• US Letter (729 KB)

Android phone

• A4 (944 KB)
• US Letter (904 KB)

Windows 8 phone

• A4 (1.5 MB)
• US Letter (2 MB)

Feature phone

• A4 (185 KB)
• US Letter (179 KB)

Comments or feedback to: interface.sketch at gmail.com