Using CSS Text-Shadow to Create Cool Text Effects

Learn how to use the CSS text-shadow to create cool text effects, by following this easy, step by step tutorial. Check it out and start learning!

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

Read More →

Basic Beginners’ Guide to Installing a jQuery Lightbox

Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning!

Have you always wanted to add those cool Javascript lightbox galleries to your website, but haven’t the first clue about how to do so? This guide is aimed at the Javascript coding noob and will take you through the step by step process of linking up the jQuery library, installing the lightbox script and getting everything working.

Read More →

Post-Install Plugins to Enhance & Protect WordPress

WordPress is a fantastic, easy to install application that’s packed full of useful features. It’s all ready to rock straight out of the box, but there’s a few easy customisations you can make with a cocktail of plugins that will enhance the functionality as well as offer crucial protection. This is my collection of post-install plugins that I immediately add to every WordPress install I work on – There’s no fancy gallery plugins here, just back-to-basics additions to improve speed, SEO and security.

Read More →

Coding a Stylish Blog Design Layout in HTML & CSS

Last week we went through the process of designing a stylish blog layout in Photoshop. Now let’s take our visual concept and cut it into slices for use with neat HTML and CSS code. All our browser testing will be done on this coded concept before converting the design into a full WordPress theme.

Read More →

Super Cool CSS Flip Effect with Webkit Animation

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

Read More →

Designing an Infographic with HTML, CSS & jQuery

Learn how to design an infographic with HTML, CSS and jQuery, by following this easy, step by step tutorial. Check it out and start learning!

I’ve been wanting to get stuck into a creative infographic for quite some time, so recently I started work on a personal project that involved the design and build of a graphic to portray the stats and figures of Line25. To mix things up a little and to take it a step further, I decided to have a shot at building the whole infographic as a complete web page. Here’s a walkthrough of the project, showing how resources like Cufon and jQuery’s ScrollTo plugin were used to add some flair and interactivity to the design.

Read More →

Coding Up a Web Design Concept into HTML & CSS

Learn how to code a web design concept into HTML and CSS, by following this easy, step by step tutorial. Check it out and start learning!

I’ve recently been working on a design concept for a WordPress theme as part of a personal project. In this walkthrough, we’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

Read More →

How to Code up a Web Design from PSD to HTML

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.

Read More →

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.

Read More →

Verified by MonsterInsights