banner

While there have been some great recent discussions on the subject of CSS and HTML5 this recent article gives the perfect overview. I was working behind the scenes to bring you the best tips and techniques which can be used in daily web design projects. If you do any level of web development from editing pages HTML and CSS can give you a level of control, and power over your designs that you’ve never experienced before.

In this post, I’ve gathered up to 30 fresh CSS3, HTML5 tips/techniques and tutorials that will show you just a bit of the power of CSS3 and HTML5, perhaps this collection covers both CSS and HTML you need to know.

Prototyping in code

First off, let’s get something out of the way. Prototyping in code is something of a misnomer within the context of what we’re about to discuss. Code sounds scary, it’s something programmers do. What we’re talking about here is far less frightening — all we’re aiming to promote is the basic concept that with some very simple HTML and a bit of CSS you can produce prototypes that communicate your ideas far better than any diagramming or wireframing tool ever could.

How To Use CSS Combinators and Simple Pseudo Class Selectors

Last week we began looking at some of the selectors we have available for hooking css styles into our html. We briefly touched on some simple selectors and mainly focused on attribute selectors. This week I want to continue and talk specifically about combinators before starting to cover pseudo class selectors.

Do You Use These 7 Attribute Selectors In Your CSS?

CSS Selectors are an essential ingredient in developing websites. They’re the hooks our css has into our html. How may different css selector patterns do you regularly use?

How to Create a Beautiful Icon with CSS3

Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

How To Create A Pure CSS Glow Text On Hover

CSS has a good trick which allows you to change the style of an element when the visitors mouse moves over the element..

CSS3 for Beginners: Color and Opacity

Originally published as a W3C Recommendation in 1996, Cascading Style Sheets (CSS) have endured as the best way of defining the rendering of content separate from its markup. Nearly 15 years later, CSS level 3 (CSS3) is making new design features available to web developers. We’ll take a look at some of the most interesting and popular of those features.

Create Columns Easily With The CSS3 Multi-Column Layout Module

Last week we looked at the css flexible box module, one of the new css tools to help with site layout. The css multi-column layout module is another that also helps with site layout and has even better support than flexible boxes.

Take advantage of the CSS background-size property

The changes brought by the various CSS3 modules are pretty exciting for designers and front-end developers. Decreases in bandwidth and HTTP requests, faster maintenance and using real fonts instead of images are all big pluses on the SEO and accessibility fronts. But one area that seems a bit neglected is the new background properties..

Detecting and generating CSS animations in JavaScript

When writing of the hypnotic spiral demo the issue appeared that I wanted to use CSS animation when possible but have a fallback to rotate an element. As I didn’t want to rely on CSS animation I also considered it pointless to write it by hand but instead create it with JavaScript when the browser supports it. Here’s how that is done. .

Simple Tic – Tac – Toe Using HTML5, CSS3 and Javascript

The Very Simple Tic – Tac – Toe Tutorial Using HTML5, CSS3, And Javascript..

A Farewell to CSS3 Gradients

I understand that we’ve never had it so good. In fact, I have no doubt that time-travellers visiting from 2004 would be sick with jealousy at how easily we now conjure up rounded corners, shadows, and object rotations.

CSS3 Flexible Box Model

CSS offers several tools to help with site layout. Over the years we’ve worked mainly with floats, positioning, and margins, but let’s face it, most of us would like more. Fortunately css3 is giving us more tools for layouts. One of those tools is the flexible box.

CSS3 Buttonize Framework

The Buttonize Framework is a simple, light-weight CSS file with precompiled styles and colours for quick, modern looking buttons. It uses CSS3 for rounded corners and subtle gradients but with bulletproof fallbacks for older browsers.

Just some other awesome CSS3 buttons

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons. In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.

 Accessing & Modifying CSS3 Animations with Javascript

Morf.js – Custom Easing Functions for CSS3 Transition

I love CSS3 transitions! They’re easy to implement, more performant than the setTimeout based alternative & because of this work really well on mobile devices..

create a unique contact form with css3 transitions

Inspired by the contact form on Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover.