Lightbox. Sketchpad - Online Paint/Drawing application. Trail - an experiment with particle movement patterns using HTML5. HTML5 3D Modeler « OnePixelAhead. Agent 008 Ball. PaintbrushJS Playground. Timeline Reader - AP Labs. Brush. HTML5. Never Mind the Bullets - BEAUTY OF THE WEB.
Seems like these guys like their cards.
Could that be the famous outlaw Brand McArthur in the flesh?! Reddit Alien in CSS. CSS3 buttons. PrettyAwesomeClock. 21 Ridiculously Impressive HTML5 Canvas Experiments. CSS3 Card Trick: A Fun CSS3 Experiment. This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS.
I’ve used no images and no scripting; everything’s done using HTML and CSS. It goes without saying that since CSS3 is still not supported by all browsers, it might not work as intended; but I’ve coded this in such a way that it will degrade gracefully on non-CSS3 browsers, including IE (of course). Experimenting on cutting-edge standards for the sake of innovation is an attribute that helps us learn, and perhaps by pushing the boundaries, we can improve our knowledge further. Final Result You can click on the preview image to see the demo. View Demo Download Source A Primer on Innovation If you ask any self-taught professional, motivation and willingness to experiment are the two primary skills that feed their passion to becoming better designers and developers.
Fragments and Fieldsets In the code block, you will find: <! Unicode Characters for the Card Suits IE Support. HTML5 Canvas and Audio Experiment. Pragmatic CSS3 -webit-transform matrix3d Tutorial. Matrix3d When you dive into apples documentation of matrix3d you will find a short definition "Specifies a 3D transformation as a 4 x 4 matrix.
" following by the function definition in code: matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33) Unless you're a math god you probably think to yourself: "I find the lack of documentation quite disturbing" followed by the question on how to build the really hot Superman stuff on left. The described approach is not meant to be mathematical or complete - I just want to fill a little documentation gap. Some Linear Algebra Every complex transformation could be seperated into three basic transformations: Rotation Scale Translation Since this works vice versa these three basic steps could be composed into a giant omnipotent transformation matrix. The Identity Matrix. DeviantART muro. SIGNS. XYLOPHONE. Blob - an experiment with soft bouncy physics built using the HTML5 canvas tag.
BonBon Buttons - Sweet CSS3 buttons. There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. No, wait! Before you click that download button and try to use them on your site, please also read the flaws. Markup I get a real kick out of trying to keep the markup minimal, so I'm really happy with the outcome. You can change the look by adding more classes: <a href="" class="button orange glossy">Label</a> Label Icons. 29 Useful Things you can do with CSS3. 55 Excellent Examples of Websites Using HTML5. 1860 shares 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… Read More 57 shares 20+ Tools for Quick and Clean Code Development. CSS3-Man. The Wilderness Downtown. Canvas Cycle: True 8-bit Color Cycling with HTML5. HTML5 presentation. HTML5 Helicopter. Instructions The map scrolls from the right to left, your job is to not crash into the walls and avoid the obstacles for as long as possible.
Hold the ENTER key or the Left Mouse Button to activate thrusters, this will make yur helicopter rise, when you release the helicopter will fall. Have fun! About After having some fun writing pacman in HTML5 I decided to write another classic game, this time Helicopter. Again this a work in progress, this is still pretty rough around the edges, but its fun to play so I published it as soon as possible. Improve the graphics Add / Improve Audio Tweak gameplay and details Things to consider. 1k Javascript demo contest. HTML5 Pacman. Shim for font face This is most of the Pacman game everyone knows and loves.
It isnt a complete implementation yet and I do plan on working some more on it, however it should mostly be playable. (who knew the ghosts have a strategy!) Why? I wanted to play with new web technologies so writing a simple browser game seemed like a good idea. Things to consider Performance – A lot of focus in the Flash vs Web arguments are focused on performance and CPU, while Flash has an initial performance hit which is unacceptable for minor things such as displaying text, for writing games it is reasonably mature and optimised, although my canvas implementation will have lots of room for improvement it is probably quite close to a naive Flash implementation but uses a lot more CPU.
Issues Configure your server to serve media files If your audio works locally, but not from a server, remember to configure your server to serve media files with the correct media types. Checking the progress of a file loading. Shaver » HTML5 video and codecs. Recently, Vimeo and YouTube announced that they were moving to support the HTML5 video tag, as DailyMotion did last summer .
This is an important step in making video a first-class citizen of the modern web, and that is great news. Unlike DailyMotion, however, Vimeo and YouTube chose to rely on the patented H.264 video encoding , rather than an unencumbered encoding like Ogg Theora . This means that the <video> pages on those sites will not work with Firefox. Vimeo and YouTube seem to believe that reliance on proprietary plugins for video is a problem on the web.