A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.
tips
How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs while taking into consideration semantics and avoiding the repetition of any markup.
10 Usability Crimes You Really Shouldn’t Commit
Over time certain conventions and best practices have been developed to help improve the general usability of websites during their design and build. This roundup of ten usability crimes highlights some of the most common mistakes or overlooked areas in web design and provides an alternative solution to help enhance the usability of your website.
15 Useful Resources to Get Clued Up on HTML5
HTML5 this, HTML5 that! There’s been plenty of HTML5 talk around the blogging world recently. It’s no longer a tiny spec on the horizon, it’s due to arrive soon! Some have already embraced it and are using it on their latest HTML5 sites. Want to join in on all the fun?
Check out this collection of some of the best resources from various blogs and websites in the industry. Each one gives an interesting insight into what’s in store with detailed write-ups, tutorials and handy cheat sheets to help you along your way.
How to Build a Simple Button with CSS Image Sprites
The button is one of the most common elements in the world of the web. In modern web design, buttons are used not only on forms but also as visual aids that draw attention to important elements of the page. Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete code example. This one’s a good one for anyone getting started with CSS!
How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Want to build a stack of Polaroid photos with pure CSS styling? In this tutorial, you will learn how to create a CSS Polaroid photo gallery.
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property, it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
10 HTML Tag Crimes You Really Shouldn’t Commit
You better watch out, because the HTML police are about. They scour your code and pick out the most unspeakable crimes against HTML markup. This handy list of ten HTML tag crimes sheds some light on some of the most common coding mistakes and helps provide an alternate solution. Tips include writing valid markup, making semantic choices, avoiding deprecated tags and more!
