Learning Canvas: Making a Snake Game Note from the editor: The following is a guest post by Nick Morgan aka Skilldrick. I don't know much about canvas, so it's a pleasure to be able to share an article about a current web technology that is outside of my current range of knowledge. Of all the new elements being added in HTML5, I think canvas is one of the most exciting. Canvas gives you a fixed-size drawing surface and a selection of basic commands to draw on that surface. In this tutorial I'm going to show you how to make a simple snake game using canvas. You know, like you used to get on your Nokia phone. Making the canvas and our first rectangle Let's make a <canvas> element, and draw something on it. The first thing to note here is that we don't call drawing methods on the canvas, but on its drawing context. First we set the fill style of the context, which takes the form of a CSS colour, e.g. Making a game loop Now, canvas wouldn't be too much fun if you couldn't make things move. The loop basically does three things.
Adobe Typekit Help : Working with CSS selectors A CSS selector is used to declare which elements a style applies to. In Typekit, you can specify the selectors for each of your fonts in one of two ways: By adding the selectors to your kit. By using the provided font-family names in your own CSS. Adding Selectors to Your Kit In your kit, simply add the selectors to each font, and republish your kit. The following characters are allowed in the CSS selectors: a-z A-Z 0-9 . # -_ [] () = " ' ~ ^ $ | : > + \ * When you add a selector to the kit, it is validated against this list of characters. If you need a selector to include a character that isn’t in this set, use a backslash escape, e.g. \7B to create {. When adding selectors, make sure that they are specific enough to override the existing styles in use on your site. Using the font-family Names in Your CSS If you want to use Typekit in your CSS, click the “Using fonts in CSS” link in the selectors area of your kit to reveal the appropriate font-family names to use.
CSS Sprite Generator, Editor, and Code Orman Clark’s Vertical Navigation Menu: The CSS3 Version Next in the Orman Clark's coded PSD series is his awesome looking Vertical Navigation Menu. We'll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we'll be using are for the icons - I'll be creating a sprite using a new tool called SpriteRight, but this is optional. Additionally, I'll be using GradientApp to create my CSS3 gradients, but again this is optional. Step 1: Basic HTML Markup Let's start off by throwing in some basic markup, an empty HTML5 document: And now the markup for our menu; an unordered list within a containing wrapper. Lastly, we create the submenus by placing an unordered list nested within each of our existing list items. Okay, there may seem a lot there but don't let it confuse you. I've also added a class to each list item, just so it'll make styling easier later on. Step 2: Fluid Fonts We'll first make sure our menu displays correctly. Now to explain how the wrapper font size works. Step 3: Main Menu CSS Okay!
thebird/Swipe Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New Contributing License Download
The Best Responsive Web Design Tools CSS3 Animation Cheat Sheet - Justin Aguilar How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: visibility: hidden; is used to hide elements before the animation is activated. The values for these animations are relative to the element's size. Adding effects Add jQuery to the <head> element of your webpage: Replace slideUp with an animation class.
Create HTML5 Animation Sprite Sheet in Photoshop by William Malone When developing HTML5 games, sprite sheets are commonly used to implement frame based animations. A sprite sheet has multiple animation frames in a single image. This article describes how to create a sprite sheet using the HTML5 Photoshop Sprite Sheet Creator script in Adobe Photoshop which combines multiple Photoshop layers into a single image. Installation To install the script, simply drop the JSX file into Photoshop's script directory. Mac: /Applications/Adobe Photoshop ... Windows: C:\Program Files\Adobe\Adobe Photoshop ... If Photoshop is open you will need to restart it afterward. Usage In Photoshop we will need each frame on a separate layer. Each layer represents one frame in the sprite sheet. Point to File > Scripts > Create Sprite Sheet from Layers... to launch the HTML5 Photoshop Sprite Sheet Creator script. The sprite sheet creation dialog will appear as long as there are at least two visible layers available. The following options are available: Rows IOS size warning
Splash and Coming Soon Page Effects with CSS3 CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We'll experiment with animation sequences and how to bring some life to some simple elements. View demo Download source CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. The cute shoe photos that we are using in the first demo are by lovely Amira Almajid and you can find the set here. Please note that the animations will only work in modern browsers that support them. In order not to bloat the tutorial, I’ve omitted the CSS vendor prefixes but you’ll find them in the downloadable files. Example 1 Please note, that I added a longer delay for this example to give some time to load the images. The first example will have a couple of elements that we’ll animate. The Markup Ok, now the exciting part: the CSS! The CSS Let’s style the headline: Example 2
Spritebox - Generate and Create CSS from Sprite Images