Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.
techniques
Design a Textured Outdoors Website in Photoshop
Learn how to design a textured outdoors website in Photoshop, by following this easy, step by step tutorial. Check it out and start learning!
In part one of this website build project, we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’.
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!
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.
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.
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.
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.
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.
Design & Code a Cool iPhone App Website in HTML5
HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial, we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.
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.
