Tutorials

Create a Gnarly Snowboarding Themed Web Design

Get your Photoshop shred on and follow this step by step overview of building a snowboarding themed website layout. The design we’ll be creating takes inspiration from the typical style of the snowboarding culture, with grungy textures and distressed brush marks adding detail to the design. We’ll start by producing a core grid to base the design elements on, then use a mix of photography and Photoshop manipulation to create a concept web design for a fictional brand named ‘Snow Candy’.

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.

How to Create an Author Info Section in Wordpress

It’s common to find an author’s credit and bio at the end of a blog post, especially on blogs that post content from multiple writers. Using a cocktail of Wordpress template tags, an info section can be easily put together to showcase the author’s Gravatar profile image, their name, link to their website and short bio.

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 coded 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. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

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!

25 Detailed Tutorials for Coding Up Your Web Designs

One of the best ways to get into web design is to learn the process of transforming your Photoshop concept into a fully working coded website. Luckily there are various handy tutorials from across the web that document the process of writing a site with HTML and CSS in a step by step guide. This post pulls together the best PSD to HTML conversion tutorials to help you along your way to becoming a CSS master.

Getting Started with CSS: A Practical Exercise

Learning how to write CSS is an essential lesson in any web design classroom. For you who are just starting out, here’s a beginner’s guide to help you learn the basics in proper CSS execution.

Handy Tips for Creating a Print CSS Stylesheet

Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site.

Line25

Ideas and Inspiration from the Drawing Board of Creative Web Design

Tutorials

Create a Gnarly Snowboarding Themed Web Design

How to Create a Cool Anaglyphic Text Effect with CSS

How to Create an Author Info Section in Wordpress

How to Build a Simple Button with CSS Image Sprites

How To Create a Pure CSS Polaroid Photo Gallery

Create a Letterpress Effect with CSS Text-Shadow

25 Detailed Tutorials for Coding Up Your Web Designs

Getting Started with CSS: A Practical Exercise

Handy Tips for Creating a Print CSS Stylesheet

Most Popular Articles

Discussion Elsewhere