The Best Responsive Web Design Tools 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!
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. In this tutorial I'm going to show you how to make a simple snake game using canvas. 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. I've started adding in some organisation to the code now. The loop basically does three things. Drawing a snake Now comes the fun bit: drawing the snake. Moving the snake Adding an apple Share On
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. We’ll experiment with animation sequences and how to bring some life to some simple elements. 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 Markup Ok, now the exciting part: the CSS! The CSS Example 2