2011年50个最好的 CSS 3 和 HTML5 教程

     <p>本文是个CSS 3和HTML5教程的收集，2011年度最好的教程集合。</p>    <p><strong>1. <a href="/misc/goto?guid=4958198973142197187" rel="nofollow" target="_blank">HTML5 File Uploads with jQuery</a></strong></p>    <p>Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.<br /> <a href="/misc/goto?guid=4958198973889492085" target="_blank"><img title="HTML5 Tutorials 2011" border="0" alt="HTML5 Tutorials 2011" src="https://simg.open-open.com/show/34e1244d5d66f91fba88f012b9773336.jpg" width="500" height="292" /></a></p>    <p><strong>2. <a href="/misc/goto?guid=4958198974620150199" rel="nofollow" target="_blank">Making a Beautiful HTML5 Portfolio</a></strong></p>    <p>In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.<br /> <a href="/misc/goto?guid=4958198975348374645" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_2.jpg" /></a></p>    <p><strong>3. <a href="/misc/goto?guid=4958198976083118273" rel="nofollow" target="_blank">How to Code a Clean Website Template in HTML5 & CSS3</a></strong></p>    <p><a href="/misc/goto?guid=4958198976820526834" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_3.jpg" /></a></p>    <p><strong>4. <a href="/misc/goto?guid=4958183433132682899" rel="nofollow" target="_blank">Create a Stylish Contact Form with HTML5 & CSS3</a></strong></p>    <p>Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.<br /> <a href="/misc/goto?guid=4958198978227511166" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_4.jpg" /></a></p>    <p><strong>5. <a href="/misc/goto?guid=4958198978965169409" rel="nofollow" target="_blank">HTML5′s New “form” Attribute</a></strong></p>    <p>One challenge that developers have faced when creating forms is the inability to separate a form control from its parent</p> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.    <br />    <a href="/misc/goto?guid=4958198979690195562" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_5.jpg" /></a>    <p><strong>6. <a href="/misc/goto?guid=4958198980419506033" rel="nofollow" target="_blank">Create Vector Masks using the HTML5 Canvas<br /> </a></strong></p>    <p>The HTML5 canvas can be used to create a lot of cool things, like games, video effects, graphs and more. It can also be used to produce some slightly less complex effects, like manipulating images on the page.<br /> <a href="/misc/goto?guid=4958198981164092357" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_6.jpg" /></a></p>    <p><strong>7. <a href="/misc/goto?guid=4958198981890589251" rel="nofollow" target="_blank">Create a Grid Based Web Design in HTML5 & CSS3</a></strong></p>    <p>Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.<br /> <a href="/misc/goto?guid=4958198982630129511" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_7.jpg" /></a></p>    <p><strong>8. <a href="/misc/goto?guid=4958184458914217857" rel="nofollow" target="_blank">Fullscreen Slideshow with HTML5 Audio and jQuery</a></strong></p>    <p>In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.<br /> <a href="/misc/goto?guid=4958198984029765772" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_8.jpg" /></a></p>    <p><strong>9. <a href="/misc/goto?guid=4958198984765579627" rel="nofollow" target="_blank">How to Create an HTML5 Microdata Powered Resume </a></strong></p>    <p>This tutorial demonstrates how to create an online resume that incorporates Schema.org Microdata. The tutorial also includes instructions on how to use Authorship Markup!<br /> <a href="/misc/goto?guid=4958198985495626464" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_9.jpg" /></a></p>    <p><strong>10. <a href="/misc/goto?guid=4958198986248266500" rel="nofollow" target="_blank">HTML5 Grayscale Image Hover</a></strong></p>    <p>Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify’s partner) for the jQuery and Javascript code.<br /> <a href="/misc/goto?guid=4958198986991136517" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_10.jpg" /></a></p>    <p><strong>11. <a href="/misc/goto?guid=4958198987726504503" rel="nofollow" target="_blank">Build your First Game with HTML5 </a></strong></p>    <p>HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed…even in the gaming world! Today, you’ll make your first game using Box2D and HTML5′s canvas tag.<br /> <a href="/misc/goto?guid=4958198988457498488" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_11.jpg" /></a></p>    <p><strong>12. <a href="/misc/goto?guid=4958198989193684513" rel="nofollow" target="_blank">Scoped Styles in HTML5</a></strong></p>    <p>The topic of scoped CSS styles in HTML5 came up twice in the comments of a recent post by Chris Coyier.<br /> <a href="/misc/goto?guid=4958198989924375075" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_12.jpg" /></a></p>    <p><strong>13. <a href="/misc/goto?guid=4958183434540833297" rel="nofollow" target="_blank">How to Build Cross-Browser HTML5 Forms</a></strong></p>    <p>In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.<br /> <a href="/misc/goto?guid=4958198991337686145" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_13.jpg" /></a></p>    <p><strong>14. <a href="/misc/goto?guid=4958198992063023215" rel="nofollow" target="_blank">My Preferred Syntax Style for HTML5 Markup</a></strong></p>    <p>Ever since HTML5 has started to gain wider use, many developers have wondered what syntax style should be most prevalent. When coding HTML in XML format, it was easy–because the validator forced you to code in a consistent manner.<br /> <a href="/misc/goto?guid=4958198992792164915" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_14.jpg" /></a></p>    <p><strong>15. <a href="/misc/goto?guid=4958198993526691524" rel="nofollow" target="_blank">Creating a HTML5 & CSS3 Single Page Web Layout</a></strong></p>    <p>Today we will create HTML5 web template with combination with CSS3 and jQuery. Current template will contain header area (with logo and navigation menu), promo area (I will use jQuery Nivo Slider), center area with some content, bottom area (which you can use for footer links as example), and footer itself.<br /> <a href="/misc/goto?guid=4958198994258779392" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_15.jpg" /></a></p>    <p><strong>16. <a href="/misc/goto?guid=4958198995001094676" rel="nofollow" target="_blank">Build your own HTML5 3D engine</a></strong></p>    <p>When Toronto agency Jam3 built www.bjork.com, a site that features an interactive real-time rendered 3D model, they decided to create their own engine to ensure it turned out the way they wanted. Here senior developer Mikko Haapoja explains how you can do the same with a little bit of help of JavaScript and HTML5 Canvas<br /> <a href="/misc/goto?guid=4958198995739891854" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_16.jpg" /></a></p>    <p><strong>17. <a href="/misc/goto?guid=4958195606109646724" rel="nofollow" target="_blank">Build a Neat HTML5 Powered Contact Form</a></strong></p>    <p>In this tutorial, we are going to learn how to create a swanky HTML5 AJAX powered contact form. The form will use some of the new HTML5 input elements and attributes, and will be validated using the browser’s built-in form validation.<br /> <a href="/misc/goto?guid=4958198997142534845" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_17.jpg" /></a></p>    <p><strong>18. <a href="/misc/goto?guid=4958198997874815435" rel="nofollow" target="_blank">Create a stylish HTML5 template from scratch</a></strong></p>    <p>HTML5 is certainly one of the latest buzzwords in the web community. It isn’t something new anymore and we’ve already seen how cool it is. Features like simplified doctype, more semantic markup, input types and placeholders are just some of the reasons you’d like to use HTML5.<br /> <a href="/misc/goto?guid=4958198998628154388" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_18.jpg" /></a></p>    <p><strong>19. <a href="/misc/goto?guid=4958198999345833451" rel="nofollow" target="_blank">Create a page flip effect with HTML5 canvas</a></strong></p>    <p>For a long time, web developers leaned on plug-ins to bring truly immersive and rich interactive experiences to their users. HTML5 has begun to change all this by bringing some of the most crucial building blocks of these web augmentations to the open web.<br /> <a href="/misc/goto?guid=4958199000082526676" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_19.jpg" /></a></p>    <p><strong>20. <a href="/misc/goto?guid=4958199000812164796" rel="nofollow" target="_blank">Making Forms Fabulous with HTML5</a></strong></p>    <p>Not many people get excited about forms, but HTML5 brings some big improvements, both for the developers creating them and for the users filling them out. New form elements, attributes, input types, browser-based validation, CSS3 styling techniques, and the FormData object make it easier and hopefully more enjoyable to create forms.<br /> <a href="/misc/goto?guid=4958199001550272857" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_20.jpg" /></a></p>    <p><strong>21. <a href="/misc/goto?guid=4958199002292391780" rel="nofollow" target="_blank">Learning To Use HTML5 Semantic Elements</a></strong></p>    <p>HTML5 has several new layers, including a new set of semantic tags. While there is still some debate about whether or not we should be using and styling these tags I think at the very least we should start learning them.<br /> <a href="/misc/goto?guid=4958199003019262008" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_21.jpg" /></a></p>    <p><strong>22. <a href="/misc/goto?guid=4958199003760564708" rel="nofollow" target="_blank">Use Paper.js to create HTML5 interactive vector animations</a></strong></p>    <p>Paper.js is an open source vector graphics JavaScript framework built on top of HTML5 canvas and developed by the incredible Jürg Lehni and Jonathan Puckey. Dr Woohoo, Claus Wahlers and Rasmus Blaesbjerg from HAUS create an example that explores Paper.js<br /> <a href="/misc/goto?guid=4958199004492844919" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_22.jpg" /></a></p>    <p><strong>23. <a href="/misc/goto?guid=4958199005223929711" rel="nofollow" target="_blank">Automated Optimization with HTML5 Boilerplate Build </a></strong></p>    <p>HTML5 Boilerplate is widely recognized as a rock-solid foundation for building new web-based sites and applications. That said, few are aware that the tool offers more than simply setting up your development environment. It also helps you “wrap up” your work by providing an awesome cross-platform build process.<br /> <a href="/misc/goto?guid=4958199005967622964" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_23.jpg" /></a></p>    <p><strong>24. <a href="/misc/goto?guid=4958199006699876698" rel="nofollow" target="_blank">HTML5 Techniques for Optimizing Mobile Performance</a></strong></p>    <p>In this article, we will discuss the bare minimum of what it takes to create a mobile HTML5 web app. The main point is to unmask the hidden complexities which today’s mobile frameworks try to hide. You will see a minimalistic approach (using core HTML5 APIs) and basic fundamentals that will empower you to write your own framework or contribute to the one you currently use.<br /> <a href="/misc/goto?guid=4958199007430462589" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_24.jpg" /></a></p>    <p><strong>25. <a href="/misc/goto?guid=4958199008183145245" rel="nofollow" target="_blank">How to Build Asteroids with the Impact HTML5 Game Engine</a></strong></p>    <p>In this tutorial, I’m going to show you how to build a simple space-based asteroids game using the Impact game engine, one of the more robust engines out at the moment.<br /> <a href="/misc/goto?guid=4958199008905637700" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_25.jpg" /></a></p>    <p><strong>26. <a href="/misc/goto?guid=4958199009639306139" rel="nofollow" target="_blank">How to create a Progress bar with HTML5 Canvas</a></strong></p>    <p>There is a great amount of articles about Canvas on the internet, but I would like to show the example of how you can use Canvas on practice, namely the creation of animated progress bar.<br /> <a href="/misc/goto?guid=4958199010380322666" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_26.jpg" /></a></p>    <p><strong>27. <a href="/misc/goto?guid=4958199011106654754" rel="nofollow" target="_blank">Syncing Content With HTML5 Video</a></strong></p>    <p>One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic</p>    <p><strong>28. <a href="/misc/goto?guid=4958199011847052021" rel="nofollow" target="_blank">HTML5: New Functions Of The Old Tags</a></strong></p>    <p>It is well known that tags b, i, s, small are presentational, and consequently, in terms of a paradigm “structure, presentation, behavior” their use is not welcomed. Elements strong, em, del are seemed more usual. So it was during the long years of development practice. However a great deal changed in semantics of these elements with arrival of HTML5. Now we have 4 new tags with sense and our thoughts are in a muddle.<br /> <a href="/misc/goto?guid=4958199012581553644" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_28.jpg" /></a></p>    <p><strong>29. <a href="/misc/goto?guid=4958199013319405273" rel="nofollow" target="_blank">Native Audio with HTML5</a></strong></p>    <p>Today, we have another option: HTML5</p>    <p><strong>30. <a href="/misc/goto?guid=4958199014059077604" rel="nofollow" target="_blank">Learning the basics of HTML5 canvas</a></strong></p>    <p>By now you should already have a good idea about what canvas is and why it’s a fantastic part of HTML5. In this article, we will take a proper look at the features of canvas, from learning how to actually get it into a HTML document to drawing shapes and other kinds of objects on it. We will also look at how to change how shapes and objects are drawn on canvas, as well as finding out how to erase it. Finally, we’ll end with an example showing you how to make canvas the same size as the browser window, an integral skill to have for developing immersive games. I hope by the end of this tutorial that you feel even more excited about HTML5 canvas and the possibilities that it opens up in front of you.<br /> <a href="/misc/goto?guid=4958199014787505913" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_30.jpg" /></a></p>    <p><strong>31. <a href="/misc/goto?guid=4958199015517550724" rel="nofollow" target="_blank">Auto-Resizing HTML5 Games</a></strong></p>    <p>In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device.<br /> <a href="/misc/goto?guid=4958199016258845147" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_31.jpg" /></a></p>    <p><strong>32. <a href="/misc/goto?guid=4958199016988212171" rel="nofollow" target="_blank">How to Make Your Own Video Player On HTML5 Video</a></strong></p>    <p>Today we are going to cope with the task of creating your own video player on HTML5 Video. Let me remind you that the video-element by itself already provides the necessary set of controls for playback controlling. In order you could see the playback control panel, it’s necessary to set the controls attribute.<br /> <a href="/misc/goto?guid=4958199017724462118" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_32.jpg" /></a></p>    <p><strong>33. <a href="/misc/goto?guid=4958183441625230823" rel="nofollow" target="_blank">How to Create a Contact Form using HTML5, CSS3 and PHP</a></strong></p>    <p>Personally, I feel it is important to be aware of the [positive] impact HTML5 will have on forms and the way they will function in years to come. Realistically, we can’t implement all of the new features today, but you don’t want to be lagging behind the rest of the industry when these features finally become widely supported.<br /> <a href="/misc/goto?guid=4958199019137211630" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_33.jpg" /></a></p>    <p><strong>34. <a href="/misc/goto?guid=4958199019871929561" rel="nofollow" target="_blank">Content editable Feature in HTML5</a></strong></p>    <p>One of the HTML5 innovations has become the ability to edit the page in the browser. This feature is called content editable. It works in all modern browsers. To make the page editable, you need to put the tag attribute contenteditable = “true”. Under the tag can be almost everything: formatted text, images, lists, and even flash-movies. But you can add only text, the rest can only be removed. In this post I’ll show an example of using content editable on the website.<br /> <a href="/misc/goto?guid=4958199020604121531" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_34.jpg" /></a></p>    <p><strong>35. <a href="/misc/goto?guid=4958199021340384432" rel="nofollow" target="_blank">Link users to geolocation data with HTML5</a></strong></p>    <p>Using geolocation, site builders can now enable visitors to interact with content and applications in new ways. In this tutorial, I’ll walk you through how to use the new HTML5 GeoLocation jQuery Plugin – which works even when geolocation isn’t supported by the user’s browser – along with address information written in hCard microformats, to indicate which locations are closest.<br /> <a href="/misc/goto?guid=4958199022072899910" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_35.jpg" /></a></p>    <p><strong>36. <a href="/misc/goto?guid=4958199022812795460" rel="nofollow" target="_blank">Using HTML5′s New Semantic Tags Today</a></strong></p>    <p>HTML5. Everybody’s talking about it. If it isn’t my friend who threw together a pretty sweet audio drum kit, it’s that buzzword-loving Vice President of Marketing who read somewhere that Flash is dead and HTML5 is the future. But just because everybody’s talking about it, doesn’t mean everyone understands it.<br /> <a href="/misc/goto?guid=4958199023542188489" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_36.jpg" /></a></p>    <p><strong>37. <a href="/misc/goto?guid=4958199024267356604" rel="nofollow" target="_blank">HTML5 Placeholder stylization with the help of CSS</a></strong></p>    <p>HTML5 has a wonderful attribute – placeholder (text prompts for input elements). It can be specified in a following way:<br /> <a href="/misc/goto?guid=4958199025011350790" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_37.jpg" /></a></p>    <p><strong>38. <a href="/misc/goto?guid=4958199025747122489" rel="nofollow" target="_blank">HTML5 & CSS3 – What You Should Know</a></strong></p>    <p>HTML5, in conjunction with CSS3, will be a major alteration of how web pages are built once it is fully implemented. HTML4 was originally released in 1999 after only two years of work. There have been some minor adaptations since then, but the full upgrade to HTML5 has been “in committee” since 2001. The predicted finalization date was, at one point, extended as far out as 2022. That estimate has since been adjusted and the final release date is now believed to be sometime in 2014. As always, the biggest factor in the delays has been Microsoft. The behemoth simply doesn’t make quick adjustments. For years, they didn’t seem to be making any effort to adapt IE for using HTML5. Presently, they are working toward it and IE 9 can use some of the new features.<br /> <a href="/misc/goto?guid=4958199026473511508" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_38.jpg" /></a></p>    <p><strong>39. <a href="/misc/goto?guid=4958199027214858439" rel="nofollow" target="_blank">“Mobifying” Your HTML5 Site</a></strong></p>    <p>Developing for the mobile web is a hot topic these days. This year, for the first time ever, smart phones out sold PCs. More and more users are using a mobile device to traverse the web, which means it’s becoming critical for developers to optimize their sites for the mobile browsers.<br /> <a href="/misc/goto?guid=4958199027951821218" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_39.jpg" /></a></p>    <p><strong>40. <a href="/misc/goto?guid=4958199028682127274" rel="nofollow" target="_blank">Accessibility and HTML5 Block Links</a></strong></p>    <p>In HTML5, it is valid and considered to be perfectly acceptable to create links that surround block level content. The only exception is that you can’t nest links. So how does this play out in browsers and assistive technologies that weren’t designed with this in mind?<br /> <a href="/misc/goto?guid=4958199029420122494" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_40.jpg" /></a></p>    <p><strong>41. <a href="/misc/goto?guid=4958199030157370290" rel="nofollow" target="_blank">Creating an HTML5 Form Using the New Form Types</a></strong></p>    <p>A web form is something that we all use at some stage in our online activities. As web designers and developers, we are always finding ourselves building or designing one, which at the least, would be the contact page of our website project. Unfortunately, it is not the nicest job in the world and can become quite a chore as some forms can get very complicated when you start talking about validation, error handling and styling. We either validate and catch our errors using a server side language such as PHP, or we use Javascript, or even both?<br /> <a href="/misc/goto?guid=4958199030889939947" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_41.jpg" /></a></p>    <p><strong>42. <a href="/misc/goto?guid=4958199031622621091" rel="nofollow" target="_blank">Simple Tool to Create Free HTML5 Slideshows of Images</a></strong></p>    <p>In today’s world where attention spans are less and having your photos shown in a quick slide-show is better as some people might not want to look at all the photos without a preview of sorts.<br /> <a href="/misc/goto?guid=4958199032367686632" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_42.jpg" /></a></p>    <p><strong>43. <a href="/misc/goto?guid=4958199033090626189" rel="nofollow" target="_blank">Cross-Browser HTML5 Placeholder Text</a></strong></p>    <p>One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.<br /> <a href="/misc/goto?guid=4958199033833109849" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_43.jpg" /></a></p>    <p><strong>44. <a href="/misc/goto?guid=4958199034561165766" rel="nofollow" target="_blank">A Drag and Drop Planning Board with HTML5</a></strong></p>    <p>The Drag and Drop API is one of the new JavaScript APIs that let us add dynamic effects to our sites. There are two flavors of Drag & Drop:<br /> <a href="/misc/goto?guid=4958199035300523146" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_44.jpg" /></a></p>    <p><strong>45. <a href="/misc/goto?guid=4958199036028546352" rel="nofollow" target="_blank">Detect Geolocation On Web Browser Using HTML5</a></strong></p>    <p>HTML5 is been a part of many of my projects and once again I want to share a pretty interesting usage of HTML5 to detect geolocation of the user from the web browser. Currently most of the web browser support HTML5 except the lame Internet Explorer and this geolocation detection works fine with Firefox, Opera, Chrome and Safari. If you have an iPhone, you can see the thing happening in it. The geolocation feature user Google maps along with the javascript object – navigator.geolocation and HTML5. This is not a pure HTML5 source, but its good to have these here.<br /> <a href="/misc/goto?guid=4958199036767150176" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_45.jpg" /></a></p>    <p><strong>46. <a href="/misc/goto?guid=4958199037508447965" rel="nofollow" target="_blank">How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery</a></strong></p>    <p>The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.<br /> <a href="/misc/goto?guid=4958199038248183543" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_46.jpg" /></a></p>    <p><strong>47. <a href="/misc/goto?guid=4958199038980217548" rel="nofollow" target="_blank">Create a Posticks (Sticky Notes) app with HTML5, CSS3 and jQuery</a></strong></p>    <p>While I was on vacation in Dominican Republic, I had some free time to work in a small application that creates Posticks notes, or sticky notes, in the browsers and save it in the localStorage of the browser. If you want to know what I am talking about you can visit the demo. In addition, I would like to recommend reading about the following topics: HTML5, CSS3, contenteditable, and localStorage.<br /> <a href="/misc/goto?guid=4958199039724286620" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_47.jpg" /></a></p>    <p><strong>48. <a href="/misc/goto?guid=4958199040455318282" rel="nofollow" target="_blank">Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC</a></strong></p>    <p>This tutorial will teach you the basics of how to work with editor templates, display templates, and the jQuery UI datepicker popup calendar in an ASP.NET MVC Web application.<br /> <a href="/misc/goto?guid=4958199041199808829" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_48.jpg" /></a></p>    <p><strong>49. <a href="/misc/goto?guid=4958199041938495419" rel="nofollow" target="_blank">Learn HTML5 With This Simple Avoider Game Tutorial </a></strong></p>    <p>In this tutorial (the first of a series), you’ll learn the basics of HTML5 game development with JavaScript and the canvas element. You don’t need to have any programming experience, or even any HTML experience (apart from this one article). Let’s get started!<br /> <a href="/misc/goto?guid=4958199042671218903" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_49.jpg" /></a></p>    <p><strong>50. <a href="/misc/goto?guid=4958199043411852323" rel="nofollow">Avoiding common HTML5 mistakes </a></strong></p>    <p>Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them.<br /> <a href="/misc/goto?guid=4958199044153782045" target="_blank"><img style="cursor:pointer;" title="HTML5 Tutorials 2011" alt="HTML5 Tutorials 2011" src="http://webdesign14.com/wp-content/uploads/2011/10/html5_tutorial_2011_50.jpg" /></a></p>