background preloader

10 HTML5 Demos to Make You Forget About Flash

10 HTML5 Demos to Make You Forget About Flash
You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications. If you’ve yet to see what HTML5 can do, I’ve rounded up 10 demos that show off some of its capabilities. So what do you think – will HTML5 replace Flash? Canvas Minimal Particle Animation CanvasMol Flickr and Canvas in 3D Cloth Simulation etchaPhysics Google Images Gift Box – CSS 3D example Liquid Particles HTML5 Canvas Nebula Ball Pool Bomomo About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 1139 shares 20 Fresh CSS3 Tutorials The design industry is probably one of the fastest changing and growing. Read More 559 shares Developing Streamlined and Efficient CSS Styles Related:  Demo

5 awesome HTML5 demos You’ve probably seen a bunch of tutorials or articles about HTML5 on design blogs recently, but didn’t try to use it because most users will not be able to view it anyway. Now to motivate you, I compiled a few HTML5 demos that should make you want to start learning this new markup. Be aware that you may not be able to see some of the demos. To know what elements of HTML5 your browser supports, take a look at this chart. 1. If you only have time to watch one of the demos suggested in this article, take a look at this great slideshow by APIrocks. 2. Ready to see some videos in your browser with no plugin or flash required? 3. This will probably not only blow a video in your browser, it will also blow your mind. 4. The screenshot that you see under this text is taken from the Tetris 3D created in javascript by Ben Joffe using the HTML5 canvas element. 5. Another HTML5 demo using canvas, it shows you some molecules in a rotation. And much more On the HTML5 demo site, go take a look there.

HTML Tag List: Character set and special characters Description HTML uses the character set called the Universal Character Set (UCS), defined in the ISO-10646 specifiation. This standard defines a repertoire of thousands of characters used by communities all over the world. This character set is equivalent to Unicode 2.0. Table of printable Latin-1 Character codes Special characters If you need a to use a special character, like an accented character or a currency sign, you have to use a special notation. ISO 8859-1 (Latin-1) characters Symbols, mathematical symbols, and Greek letters The character entity references in this section produce characters that may be represented by glyphs in the widely available Adobe Symbol font, including Greek characters, various bracketing symbols, and a selection of mathematical operators such as gradient, product, and summation symbols. Note from HTML 4.0 : This entity set contains all the letters used in modern Greek. Markup-significant and internationalization characters

50 impressive CSS drawings « Web Design Blog – WebDesignShock As Wikipedia says, Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. But beyond the web design, you can use CSS to create some pretty cool graphics, as the ones we show you below. 1. 3D CSS Puzzle by Stu Nicholls This puzzle was made completely with CSS, must have taken a lot of time. 2. This guy knew about the hidden potential inside CSS, and use to draw a simple but lovely character of all. 3. A simple pencil that draws a horizontal line. 4. A new year greeting can be made in CSS, easy way. 5. The beautiful American flag, CSS version. 6. iPod with CSS3 A realistic iPod made with CSS3, pretty cool graphic. 7. Using pure CSS2.1 and CSS3, this guy achieve to create the main social icons on the web. 8. 9.

Coding A HTML 5 Layout From Scratch - Smashing Magazine Advertisement HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. So today we’re going to experiment a little with these new technologies. Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.Use HTML5 alongside a rising technology: Microformats.Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring. It’d be a good idea to have a read at some of these articles first: Before we begin… 1. 2. <! The header <!

Mockups Home Take a second. Let it sink in. The first impression might be disorienting. There are very few interface elements on the screen. Start exploring however, and you'll find out that Mockups is filled with powerful yet only-visible-when-you-need-them features. Getting your ideas out should be effortless. Our sweet spot: the ideation phase Mockups really shines during the early stages of designing a new interface. Mockups is zenware, meaning that it will help you get "in the zone", and stay there. Mockups offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later. See what you can build with Mockups Download the samples above, or find more on Mockups To Go, our community-contributed stencils site. Designed for collaboration Your whole team can come together around the right design using Mockups. Two reasons:

Blowing up HTML5 video and mapping it into 3D space « Craftymind I’ve been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. One of those is the Canvas.drawImage() api call. Here is the description on the draft site. 3.10 Images To draw images onto the canvas, the drawImage method can be used. The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Blowing apart fragments of video Click around the video frame to blow up that part of the video, the exploded pieces will continue to play the video inside them. 3D Video This demo in particular runs really well inside webkit based browsers, but not so much in Firefox. *Update* – I’ve changed the ogg video to be 640 x 360, prepare to see firefox weep Lessons learned There’s a couple hints I found out along the way that are good to know if you want to play around with drawing video. Secondly, don’t try copying individual pixels around.

js-fireworks - JavaScript Fireworks - A Chrome Experiment Pure CSS Coke Can (versión en castellano abajo) After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image). With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little - below 5kb - and easy to understand I hope. Even if this effect is mainly CSS1 and some bits of CSS2 - for the scrolling div, overflow: auto property -, it is not going to work in IE6, because it doesn’t support background-attachment: fixed. Castellano

25 Essential HTML5 Tutorials and Techniques | Template Monster B We are always close to the latest technologies – you know that, so today let’s cover some more info on the new fundamental markup language for the web – HTML5 that you all love so much. When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards. The whole purpose of this post is to help you master HTML5 rich features through simple guidelines and easy to follow techniques. These useful HTML5 tutorials will help you keep a track providing more tips and tricks that you can use in your HTML5-based projects. The Power of HTML 5 and CSS 3