HTML5 Image Effects: Sepia 02.var canvas, ctx; 03.var imgObj; 11.var noise = 20; 13.function processSepia() { 15. var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); 17. for (var i=0; i < imageData.data.length; i+=4) { 20. imageData.data[i] = r[imageData.data[i]]; 21. imageData.data[i+1] = g[imageData.data[i+1]]; 22. imageData.data[i+2] = b[imageData.data[i+2]]; 25. if (noise > 0) { 26. var noise = Math.round(noise - Math.random() * noise); 28. for(var j=0; j<3; j++){ 29. var iPN = noise + imageData.data[i+j]; 30. imageData.data[i+j] = (iPN > 255) ? 36. ctx.putImageData(imageData, 0, 0); 39. 42. canvas = document.getElementById('source'); 43. ctx = canvas.getContext('2d'); 46. imgObj = new Image(); 47. imgObj.onload = function () { 50. ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height); 52. imgObj.src="images/pic1.jpg"; 55. var iCur = 1; 56. 57. iCur++; 58. if (iCur > 6) iCur = 1; 59. imgObj.src="images/pic" + iCur + '.jpg'; 61. 62. processSepia(); 64. 65.
66+ Open Source JavaScript Game Engine for Serious Developers Javascript is not only welcomed by the web developer or designers, but also more and more mobile device(Such iPad, iPhone, Android etc) oriented developers, we can easily build many amazing games with HTML(5) + Javascript + CSS. Below is a list of JavaScript Game Engine for serious developers, include general, 3D, Animation, Canvas, Math, Color, Sound, WebGL etc. Hope they will be helpful for your work! 1. General JS Game Engine Akihabara Akihabara is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript that runs in your browser without any Flash plugin, making use of a small small small subset of the HTML5 features, that are actually available on many modern browsers. bdge BDGE is a game engine written in Javascript that uses HTML5 Canvas and Audio to create in-browser games. Canvex: FPS game engine Cocos2D Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. Crafty Diggy FlixelJS GameJS
Mac OS X Lion with CSS3 Hello everyone and Happy New Year to all, lately i’ve been busy and so i haven’t time to write here, i hope that by this experiment to be pardoned :). I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion. This is the first release and as you will see not everything is fully functional and at least as regards the desktop. In the next release i will implement new icons and new features while we examine what we have today. Boot This is simply the Mac OS X Lion boot. Login This section mainly consists of a clock, two images (logos and avatars user name), two backgrounds and a password input field. Thanks to the :target pseudo-class can be passed from one section to another. The animation of password error is connected via javascript but the animation is created using CSS3. Desktop Finally here we have in our desktop. For the rest is all CSS3 excluding the background image and icons. About this Project Modern Browser Supported HTML5 and CSS3
GameJs How to optimize your CSS Keeping your CSS files small and organized is very important, especially if you’re going to spend any time editing your site in the future, (or if others are gonna be using the code i.e. clients). Helpfully, there are a number of different techniques which can be utilized to aid organization and size of your CSS files in order to make them more streamline. Having more streamlined CSS will save you time and stress in the long run so it’s important to get it right. Firstly, keeping a single stylesheet, normally named style.css, is a good place to start in the organization of your CSS. Code in Style In order to keep your CSS files more streamline it is important to start by using a good code editor, such as TextWrangler on Mac, or Notepad++ on Windows. To further streamline your CSS files it is a good idea to establish a set layout that is used throughout all your CSS stylesheets. By following this commonly used technique your stylesheet will be more organized and easier to code. CSS Comments
gameQuery - a javascript game engine with jQuery An HTML 5 Navigation Screen - Paul Sheriff's Blog for the Real World Like many people today, we are exploring HTML 5 for use in web applications. While not really ready for prime-time on its own at this point, it can definitely be used in combination with tools like Modernizr (www.Modernizr.com). One of the first things you might do is create a home page with a simple navigation system on it. This blog post will show you one way to accomplish this. Navigation Figure 1 shows an example of a home screen and a navigation system. While there were ways to accomplish drop shadows, rounded corners and gradients prior to CSS 3 and HTML 5, it was not always easy for developers to do so. Figure 1: A navigation system in HTML 5 can be surrounded with <nav> tags. Listing 1 shows the complete HTML for the navigation screen shown in Figure 1. Listing 1: The HTML for the default page of your web application. The <nav> element is nothing more than a semantic markup used to group links together to make up your main navigation area. Summary
kesiev/akihabara HTML5 Image Effects – Sepia HTML5 Image Effects – Sepia Today we continue our HTML5 canvas examples, today I want to share with you a method of applying a sepia effect to images. This is not a very difficult method, anyone can repeat it. In our demo we can play with different images by adding a sepia effect to them, as well as we can ‘export’ our result on the image element (<img>). Here are our demo and downloadable package: Live Demo download in package Ok, download the example files and lets start coding ! Step 1. This is markup of our demo page. index.html Basically – it contain just one canvas object, one image, and three ‘buttons’ (div elements). Step 2. Here are our stylesheets: css/main.css Step 3. Finally – our javascript code of Sepia effect: js/script.js Main idea is: as we know – sepia images have own quite predefined colors. Conclusion I hope that our demo looks fine. If you enjoy our articles, feel free to share our tutorials with your friends.
Doing Conditional Comments for your Internet Explorer css fixes better, with HTML top tag classes | False Positives Now browser sniffing is basically a bad thing but there is still a need to fix / hack issues on older browsers, in particular Internet Explorer. Okay, almost entirely in Internet Explorer. IE6 may be -mostly- dead, but IE8 will be around for a long time given that there is no IE9 for WinXP. The “traditional way” to correct IE issues is using a conditional css style sheet (in the head section ) to load an additional style sheet after the default styles specific to that browser version and take advantage of the cascading part of Cascading Style Sheets (CSS) like so: The conditional comments tag is a proprietary IE tag, introduced in IE5, and only works in IE, and “are thus excellently suited to give special instructions meant only for IE”. I have become aware of a slightly different way to do this via the new hotness of doing feature sniffing ( or Object Detection ) via Modernizer. ) which can also be found in his github repo: Like this: Like Loading...
Learn HTML5 in 5 Minutes! written by Jennifer Marsman There's no question, HTML5 is a hot topic for developers. If you need a crash course to quickly understand the fundamentals of HTML5's functionality, you’re in the right place. In this tutorial, I’ll cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use HTML5 with older browsers. Might be a bit more than five minutes, but I promise I’ll keep it quick. There’s a great story about a university who, when building their campus, didn’t create any walking paths. A year later, the grass was all worn out where people walked most frequently. It makes perfect sense! The HTML5 new semantic elements were based on that exact same logic (see the W3C design guidance to “Pave the Cowpaths”). Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Developers commonly use IDs and/or class names with these <div> tags. Here are a few of the new semantic elements in HTML5: <!
CSS: From Screen to Print and Beyond Revolutionary for Web design, Cascading Style Sheets (CSS) have solved and continue to solve numerous challenges in designing for the continuous media of the Web. But what of paged media, as we want with our digital readers and printed collateral? Making websites and applications attractive and logical in paged media has been at best poorly achieved without the use of additional scripts and programming. Along with the many advances that CSS Level 3 (aka CSS3) has brought developers, two modules are on the horizon. The combination of PM and GCPM is a powerhouse for the publication of far richer paged experiences. Solving a long-standing design problem The Web has mostly been used on desktops, at least in the United States. On the desktop, we’ve focused on creating good user experiences for the sites and applications we build. Continuous, scrolled media is the familiar model for websites. Paged Media Model for print and touch experiences Exploring Paged Media and GCPM GCPM features include: