14 สุดยอด Free Text Editor ที่ Programmer นิยมใช้มากที่สุด

<br /> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 1. Notepad++</h2> <div> <br /></div> <div> นับว่าเป็น Free <span style="background-color: white; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;">Text Editor ที่นิยมใช้มากที่สุด เพราะใช้งานง่ายมากๆ ที่สำคัญ Support ภาษาไทยด้วย ผมใช้ตัวนี้มานานแล้ว คอนเฟิร์มเลยครับ ว่า น่าใช้มาก   </span><span style="text-align: left;"> </span></div> <div style="text-align: left;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_132g5vw3ght_b" style="color: #2b6690;"><img height="368" src="http://docs.google.com/File?id=dcwmstfp_132g5vw3ght_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> </div> <h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"> Notepad++</h2> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br /> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <img alt="Notepad++" class="alignnone size-full wp-image-1996" height="170" src="http://rabbitinblack.com/wp-content/uploads/2012/03/notepadplusplus.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Notepad++" width="220" /></div> <div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;"> Download ที่นี่ : <a href="http://notepad-plus-plus.org/download/" style="color: #ff4f92; text-decoration: none;" target="_blank">Notepad++</a></div> <br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 22px;"> </div> <h2 style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <span style="font-size: 30px;">2 .</span><span style="font-size: x-large;"> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; line-height: 50px;">Sublime Text</span></span></h2> <div style="font-size: 15px;"> <img height="396" id="il_fi" src="http://burtonator.files.wordpress.com/2008/01/200801181502.jpg" style="color: #333333; padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="640" /> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 50px;"><br /> </span></div> <br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> </div> <h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"> Sublime Text</h2> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br /> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <img alt="Sublime Text" class="alignnone size-full wp-image-2003" height="154" src="http://rabbitinblack.com/wp-content/uploads/2012/03/sublimetext.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Sublime Text" width="600" /></div> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> จริง ๆ แล้ว Sublime Text นั้นก็มีในแบบเสียเงิน แต่สำหรับคนเริ่มต้นแล้ว เท่าที่ฟรีของมันก็เพียงพอแล้วครับ</div> <div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;"> Download ที่นี่ : <a href="http://rabbitinblack.com/2012/03/free-text-editor-web-developer/www.sublimetext.com/" style="color: #ff4f92; text-decoration: none;" target="_blank">Sublime Text</a></div> <br /> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <br /> </h2> <div> <br /></div> <div> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 3. Programmer's Notepad</h2> <div> <br /></div> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Programmer's Notepad is a light weight Notepad replacement that is aimed at programmers and web monkeys.</span><br /> <span style="font-family: Georgia, 'Times New Roman', Times, serif;"><span style="font-size: 15px; line-height: 22px;"><br /> </span></span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_133fw56rfc5_b" style="color: #2b6690;"><img height="269" src="http://docs.google.com/File?id=dcwmstfp_133fw56rfc5_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> </div> <h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"> Programmer’s Notepad</h2> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br /> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <img alt="Programmer's Notepad" class="alignnone size-full wp-image-2000" height="94" src="http://rabbitinblack.com/wp-content/uploads/2012/03/programmernotepad.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Programmer's Notepad" width="724" /></div> <div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;"> Download ที่นี่ : <a href="http://www.pnotepad.org/download/" style="color: #ff4f92; text-decoration: none;" target="_blank">Programmer’s Notepad</a></div> <br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 4. TotalEdit</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">TotalEdit is a free for commercial and non commercial use text editor for Windows. It supports all features expected out of a programmer's text editor like syntax coloring, code folding and line numbering</span><br /> <img alt="TotalEdit Now Completely Free" height="204" longdesc="http://www.codertools.com/TotalEdit%20Now%20Completely%20Free" src="http://www.codertools.com/web2/images/products/totaledit-case-small.png" width="150" /><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_134d2tjhjd4_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_134d2tjhjd4_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> Some of the features that make it stand apart from the crowd are backup and version comparison - you can compare the currently edited file with its previous version from within TotalEdit, a built-in spell checker and its fully portable mode - you can run it off a USB stick.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.codertools.com/download.aspx" style="color: #2b6690;">Download TotalEdit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 5. Notepad2</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">If what you want is a blaring fast text editor that starts instantly at the touch of a mouse and that gets things done as fast as possible, then Notepad2 is for you. Notepad2 is aimed at coders who need a little more oomph than the generic Notepad in Windows.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_135rznfhjmk_b" style="color: #2b6690;"><img height="279" src="http://docs.google.com/File?id=dcwmstfp_135rznfhjmk_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It supports a number of programming languages. Hit F12, select the scheme and press OK. If you wish to replace the generic Notepad with Notepad2, here are the instructions <a href="http://blogs.msdn.com/omars/archive/2004/04/30/124093.aspx" style="color: #2b6690;">for Windows XP</a> and <a href="http://www.mattberther.com/?p=828" style="color: #2b6690;">for Windows Vista.</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.flos-freeware.ch/notepad2.html" style="color: #2b6690;">Download Notepad2</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 6. XML Notepad 2007</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">It is sadistic to force humans to edit XML files. But still, lot of people are unfortunate enough to do this on a regular basis especially java programmers. XML Notepad to your rescue.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_136f7hxgrd2_b" style="color: #2b6690;"><img height="365" src="http://docs.google.com/File?id=dcwmstfp_136f7hxgrd2_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> XML Notepad has a simple interface with a tree view of tags on left and their values displayed on right. Use this one as it reduces the chances of human errors in generating properly validated XML files.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.microsoft.com/downloads/details.aspx?familyid=72d6aa49-787d-4118-ba5f-4f30fe913628&displaylang=en#Overview" style="color: #2b6690;">Download XML Notepad 2007</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 7. ConTEXT</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">ConTEXT is a free and recently made open source programmer's text editor.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_137h4sft2ft_b" style="color: #2b6690;"></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_138hbvvsfg2_b" style="color: #2b6690;"></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_139gs43brch_b" style="color: #2b6690;"><img height="311" src="http://docs.google.com/File?id=dcwmstfp_139gs43brch_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> ConTEXT is very light weight, is simple to use and hardly uses any RAM. It supports a large number of programming languages like C/C++, Delphi/Pascal, Java, Java Script, Visual Basic, Perl/CGI, HTML, CSS, SQL, FoxPro, 80x86 assembler, Python, PHP, Tcl/Tk, XML, Fortran, Foxpro and InnoSetup scripts.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.contexteditor.org/downloads.html" style="color: #2b6690;">Download ConTEXT</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 8. jEdit</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">jEdit is written in Java can can run on Windows, Linux and Mac OSX.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_142d43jnxdj_b" style="color: #2b6690;"><img height="368" src="http://docs.google.com/File?id=dcwmstfp_142d43jnxdj_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> jEdit is highly configurable and customizable using macros and plugins. It carries all standard and advanced features like syntax highlighting, auto indentation, file management and bookmarks. It provides keyboard shortcuts for almost anything. So go for this if you are a keyboard ninja.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.jedit.org/" style="color: #2b6690;">Download jEdit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 9. Komodo Edit</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Komodo Edit is a text editor from ActiveState - a company famous for its port of Perl, Python and TCL to Windows. Komodo Edit is a free and open source text editor (or should rather be called a mini IDE).</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_150dw455cd7_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_150dw455cd7_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It supports many features that one would find in IDEs like code completion and call tips. It supports CSS, HTML, JavaScript, XML, Perl, PHP, Python, Ruby, Tcl, RHTML, Template-Toolkit, HTML-Smarty and Django template styles. If you are coming from a Vim or Emacs background, you can also set Komodo Edit to emulate Vim or Emacs key bindings.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.activestate.com/komodo_edit/" style="color: #2b6690;">Download Komodo Edit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 10. SourceEdit</h2> <div> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_151dqkhgfxh_b" style="color: #2b6690;"><img height="394" src="http://docs.google.com/File?id=dcwmstfp_151dqkhgfxh_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> SourceEdit will appeal more to the web developer community because of it built-in FTP manager and support for previewing the HTML code in the web browser directly from within SourceEdit. It supports languages like ASP, PHP, Java, C/C++, C#, Visual Basic, Pascal, Perl, Cold Fusion, SQL, HTML, CSS and XML. Web developers will also find its color mixer quite useful. This software is highly customizable. All keyboard shortcuts can be changed to suite your taste. All color coding for any language can be changed and SourceEdit will remember to use that color coding next time you launch a text file of that programming language.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.brixoft.net/download.asp#ID1" style="color: #2b6690;">Download SourceEdit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 11. PSPad</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">PSPad is another code editor that would be of interest to web developers because of its built-in FTP client. You can log in to an FTP server, browser files, edit and save them to the server all from within PSPad.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_144g8t6wjfh_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_144g8t6wjfh_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It highlights the matching closing and starting tag when you place your cursor at the middle of a tag. This one also has integrated TiDy library for formatting and checking HTML code, conversion to CSS, XML, XHTML. It also comes with a HEX editor and a diff tool.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.pspad.com/en/download.php" style="color: #2b6690;">Download PSPad</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 12. Crimson Editor</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Crimson Editor calls itself the professional source code editor for Windows.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_145fnhjh5ch_b" style="color: #2b6690;"><img height="418" src="http://docs.google.com/File?id=dcwmstfp_145fnhjh5ch_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It is lightning fast in loading and can run of a floppy disk. It supports syntax highlighting for HTML, C/C++, Perl, Java, Matlab and LaTeX. Full features of Crimson Editor can be found <a href="http://www.crimsoneditor.com/english/features.html" style="color: #2b6690;">here</a> .</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.crimsoneditor.com/" style="color: #2b6690;">Download Crimson Editor</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 13. VIM</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">When it comes to text editors, there are two holy grails - vim and emacs. Both are really great text editors, but both are complex and hence there is a slightly steep learning curve that you have to climb over before using them.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_147fqpphddr_b" style="color: #2b6690;"><img height="509" src="http://docs.google.com/File?id=dcwmstfp_147fqpphddr_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> Vim stands for 'vi improved' denoting that it is an improved version of the earlier used vi editor. Vim can run in a wide variety of platforms including Windows, Linux and Mac OSX. The screenshot shown above is of Graphical vim (gvim).<br /> This <a href="http://en.wikipedia.org/wiki/Vim_%28text_editor%29" style="color: #2b6690;">Wikipedia page</a> would be a good starting place to know about vim. The <a href="http://www.vim.org/" style="color: #2b6690;">official vim site</a> and the <a href="http://vim.wikia.com/wiki/Main_Page" style="color: #2b6690;">vim tips wiki</a> page are also of great help to anyone starting out with vim.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.vim.org/download.php" style="color: #2b6690;">Download Vim</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 14. Emacs</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Emacs like vi has a very long history dating back to the 1970s. Emacs was written by hard core programmers intended to be used by hard core programmers - the type of people who would understand stuff like "emacs is an extensible, customizable, self-documenting, real-time display editor".</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_148hjmjzsd4_b" style="color: #2b6690;"><img height="375" src="http://docs.google.com/File?id=dcwmstfp_148hjmjzsd4_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> The <a href="http://www.gnu.org/software/emacs/emacs.html" style="color: #2b6690;">GNU Emacs home page</a>, the <a href="http://www.gnu.org/software/emacs/tour/" style="color: #2b6690;">emacs tour</a> and <a href="http://xahlee.org/emacs/emacs.html" style="color: #2b6690;">this tutorial</a> are great places to start learning emacs.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.gnu.org/software/emacs/emacs.html#Obtaining" style="color: #2b6690;">Download Emacs</a></div> <br class="Apple-interchange-newline" />

14 สุดยอด Free Text Editor ที่ Programmer นิยมใช้มากที่สุด

1. Notepad++ นับว่าเป็น Free  Text Editor ที่นิยมใช้มากที่สุด เพราะใช้งานง่ายมากๆ ที่สำคัญ Support ภาษาไทยด้วย ผมใช้ตัวนี้มานานแล้ว ค...

อ่านเพิ่มเติม »

30 สุดยอด HTML5 Effect

<br /> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 1. <a href="http://meru.ca/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Animated Logo HTML5</a><span style="color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em;"> </span></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-01.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7895" height="281" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-01.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-01.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://meru.ca/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> </div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 2. <a href="http://code.google.com/p/flashcanvas/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">FlashCanvas</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> FlashCanvas is a JavaScript library which adds the HTML5 Canvas support to Internet Explorer. It renders shapes and images via Flash drawing API, and in many cases, runs faster than other similar libraries which use VML or Silverlight.</div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-02.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7897" height="355" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-02.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-02.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://tomtheisen.com/spread/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 3. <a href="http://silveiraneto.net/2011/06/02/simple-html5-animation-clouds-over-background/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 animation: clouds over background</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> Display clouds animation with HTML5</div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-03.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7898" height="354" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-03.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-03.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://silveiraneto.net/2011/06/02/simple-html5-animation-clouds-over-background/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 4. <a href="http://nine2011.9elements.com/#!/project/c8" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Experiment</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-04.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7899" height="299" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-04.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-04.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://9elements.com/io/projects/html5/canvas/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 5. <a href="http://html5readiness.com/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><strong style="color: black; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">HTML5</strong> & <em style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">CSS3</em> Readiness</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-05.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7900" height="275" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-05.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-05.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 6. <a href="http://slides.html5rocks.com/#landing-slide" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Presentation Using HTML5 Website</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-06.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7901" height="288" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-06.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-06.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://slides.html5rocks.com/#landing-slide" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 7. <a href="http://hakim.se/experiments/html5/origami/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Design Origami with HTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-07.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7902" height="353" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-07.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-07.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://hakim.se/experiments/html5/origami/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 8. <a href="http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Tunneler HTM</a><a href="http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">L5 Animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-08.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7903" height="328" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-08.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-08.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 9. <a href="http://guciek.net/burn_canvas/en" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Burn Canvas</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-09.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7904" height="325" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-09.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-09.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://guciek.net/burn_canvas/en" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 10. <a href="http://guciek.net/burn_canvas/en" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">FlowerPower HTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-10.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7905" height="278" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-10.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-10.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://guciek.net/burn_canvas/en" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 11. <a href="http://www.professorcloud.com/mainsite/cache-canvas.htm" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Canvas Caching</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> Vector graphics in Canvas can be cpu-intensive, especially with complex designs. Pile on the shapes along with effects such as strokes and gradient fills, and things can get very sluggish.</div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.professorcloud.com/mainsite/cache-canvas.htm" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7907" height="329" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-11.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-11.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://www.professorcloud.com/mainsite/cache-canvas.htm" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 12. <a href="http://spielzeugz.de/html5/liquid-particles.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Liquid</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://spielzeugz.de/html5/liquid-particles.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7908" height="326" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-12.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-12.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://spielzeugz.de/html5/liquid-particles.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 13. <a href="http://www.craftymind.com/factory/html5video/CanvasVideo.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Video</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.craftymind.com/factory/html5video/CanvasVideo.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7909" height="288" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-13.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-13.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://www.craftymind.com/factory/html5video/CanvasVideo.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 14. <a href="http://hakim.se/experiments/html5/magnetic/02/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Magnetic</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://hakim.se/experiments/html5/magnetic/02/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7910" height="344" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-14.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-14.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h3 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; font-size: 1.2em; line-height: 24px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"> <a href="http://hakim.se/experiments/html5/magnetic/02/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Demo</a></h3> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 15. <a href="http://www.the389.com/7/3/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Create line with HTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-15.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7911" height="330" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-15.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-15.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 16. <a href="http://mrdoob.com/projects/harmony/#simple" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Drawing With HTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://mrdoob.com/projects/harmony/#simple" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7912" height="316" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-16.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-16.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 17. <a href="http://mrdoob.com/129/Voxels" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Voxels HTML5 Animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://mrdoob.com/129/Voxels" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7913" height="335" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-17.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-17.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 18. <a href="http://mrdoob.com/131/Clouds" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Clouds Animation with HTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://mrdoob.com/131/Clouds" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7914" height="340" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-18.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-18.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 19. <a href="http://mrdoob.com/124/Plane_Deformations" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Style Effect with HTML5 Animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://mrdoob.com/124/Plane_Deformations" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7915" height="329" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-19.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-19.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 20. <a href="http://onecm.com/projects/canopy/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Canopy AnimationHTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://onecm.com/projects/canopy/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7916" height="355" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-20.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-20.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 21. <a href="http://onecm.com/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Onecm</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://onecm.com/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7917" height="264" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-21.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-21.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 22. <a href="http://www.yvoschaap.com/chainrxn/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Chain Reaction HTML5 Animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.yvoschaap.com/chainrxn/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7918" height="327" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-22.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-22.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 23. <a href="http://hakim.se/experiments/html5/core/01/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5  Core</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/hakim.se/experiments/html5/core/01/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7919" height="310" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-23.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-23.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 24. <a href="http://hakim.se/experiments/html5/coil/?debug=1" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Coil</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://hakim.se/experiments/html5/coil/?debug=1" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7920" height="324" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-24.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-24.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 25. <a href="http://3.paulhamill.com/node/39" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Interactive HTML5 canvas animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://3.paulhamill.com/node/39" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7921" height="330" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-25.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-25.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 26. <a href="http://www.chiptune.com/kaleidoscope/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Kaleidoscope HTML5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.chiptune.com/kaleidoscope/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7922" height="325" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-26.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-26.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 27. <a href="http://webdev.stephband.info/parallax_demos.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Parallax</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://webdev.stephband.info/parallax_demos.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7923" height="290" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-27.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-27.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 28. <a href="http://www.addyosmani.com/resources/canvasphoto/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Move Photo with HTMl5</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.addyosmani.com/resources/canvasphoto/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7924" height="359" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-28.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-28.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 29. <a href="http://randomibis.com/coolclock/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Analog Clock HTML5 Animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://randomibis.com/coolclock/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7925" height="319" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-29.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-29.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 30. <a href="http://sebleedelisle.com/demos/html5landscape.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">3D Landscape on HTML5 Animation</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-30.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7926" height="253" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-30.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-30.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 31. <a href="http://dl.dropbox.com/u/621993/voronoi/voronoi.html" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Voronoi</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> This project uses HTML5 and JS to create a “Voronoi diagram” of constantly moving points.</div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-312.jpg" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7932" height="375" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-312.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-312.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 1px 1px 5px; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(204, 204, 204) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <h2 style="background-color: #fffefe; color: #1e598e; font-family: 'Merienda One', cursive; line-height: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 5px; text-align: left;"> 32. <a href="http://sketch-out.appspot.com/" style="color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML5 Sketchout</a></h2> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <a href="http://sketch-out.appspot.com/" style="background-attachment: initial; background-clip: initial; background-color: #e3edf4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #1e598e; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="30+Amazing HTML5 Examples You Should Know" class="aligncenter size-full wp-image-7933" height="342" original="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-32.jpg" src="http://www.freshdesignweb.com/wp-content/uploads/2011/11/html5-animation-32.jpg" style="-webkit-box-shadow: rgb(153, 153, 153) 1px 1px 5px; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; box-shadow: rgb(153, 153, 153) 1px 1px 5px; display: block; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 97.5%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; width: auto;" title="30+Amazing HTML5 Examples You Should Know photo" width="500" /></a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> credit : <a href="http://www.freshdesignweb.com/canvas-html5-examples.html" style="background-color: transparent;">http://www.freshdesignweb.com</a></div> <div style="background-color: #fffefe; color: #0f1017; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; margin-bottom: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;"> <br /></div>

30 สุดยอด HTML5 Effect

1.  Animated Logo HTML5   Demo 2.  FlashCanvas FlashCanvas is a JavaScript library which adds the HTML5 Canvas support to I...

อ่านเพิ่มเติม »