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

25 Amazing Flash Portfolio Sites - Web Design Blog – Get the FlatPix UI Kit for only $7 - Learn More or Buy Now In the past we have featured a number of well-designed portfolio sites (see 101 Awesome Portfolio Sites, 50 Excellent Designer Portfolio Sites, 30 More Portfolio Sites for Your Design Inspiration), and today I would like to focus specifically on Flash portfolios. The sites showcased here will demonstrate a lot of creativity that may provide you with some inspiration for your own work. For more inspiration from well-designed portfolios, see Folio Focus. Flash Portfolios: Werkstette Nick Jones Alexandre Prado Anna Kuperberg Switch Mediaworks John Wright Photography Erik Hallander Richard Vignais Hello Monday Andrew G. Jesus Vilamajo Miki Mottes Hello Kim Mendoza Photography Socio Design Soft Whiteroom Change Integrated Sarah Cheng-De Winne Your Majesty Arqandgraph Grow Interactive Blue Cadet North Kingdom thirtytwoRound James Monaghan For more design inspiration, please see: About Steven Snell Stephen Snell is the owner and editor of Vandelay Design.

Video for Everybody! Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms. Thanks to the rapid adoption of HTML5 video happening right now, Video for Everybody isn’t the only solution around. How It Works If your browser supports it, HTML5 video is used. If HTML5 video is not supported, Adobe Flash is used. Finally, if all else fails, a placeholder image is shown and the user can download the video using the links provided. VfE different than any other Flash video embedding method. This is all done without JavaScript and requires two video encodes, one Ogg file, and one MP4 file. It’s compatible with HTML 4, HTML5 (valid markup), XHTML 1 and additionally also works when served as application/xhtml+xml. The Code IMPORTANT Notes Using

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.

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 Alex Buga&#039;s Livingroom About me Hi there, My name is Alex Buga, I’m from Bucharest, Romania and I am a design-addict - in the good way. (Voices: “Helloooo Aleeeex !”) I was the Creative Director at MB Dragan, an interactive agency based in Bucharest and I can tell you: It was the most fun place to work at. Experience I have an over 7 years background in webdesign in which I had the chance to gain experience and meet cool and smart people in great agencies like Kondiment, Firedive Interactive or Baritchi Advertising and MB Dragan. If you want to work with me or just say hello, just do it Have a great day,Alex Buga About this blog So maybe you’re wondering what’s with all this stuff thrown in this page ? I really love to inspire my designs from real life objects so that’s why it looks like a real room. This site is meant as an experiment, and I love it. Cheers! Recent Articles


Related:  TutoriauxWeb Developer Resources