banner

CSS 3 and HTML 5 are able to change the way you design Web sites. Both include many new features and functions that one can not begin to see how they work. CSS3 is providing new techniques and advanced features in the design. These new features and design techniques make it much easier create a website.

Here are 40+ tutorials, tips and techniques to start with CSS3 and HTML5. A listing brings CSS Gallery Many of the techniques discussed are supported to some extent in some modern browsers such as Safari and Firefox with the widest support, so you can start immediately, lets have a look and start using..

How to Build Cross-Browser HTML5 Forms

In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

Let’s Create Paper with CSS

If we’re smart with our shadows, gradients, and borders, we can relatively easily create nice looking notepad paper with just CSS3. I’ll show you exactly how in this week’s video tutorial.

Build a Kickbutt CSS-Only 3D Slideshow

In this tutorial, I’m going to show you how to create a 3D slideshow using only HTML and CSS. No JavaScript required! Fire up Safari and let’s get started!

Getting Started with HTML 5 and CSS 3 in Adobe Dreamweaver CS5

Adobe’s Worldwide Web Evangelist joins us to show how to create HTML 5 web pages and do design using CSS 3 in Adobe Dreamweaver CS5.

Getting Started with HTML Emails

HTML emails are a great way to keep clients posted on the latest updates related to your business or product, but they’re a bit tricky. CSS support in email clients is inconsistent. As a result, we must resort to ancient techniques, such as using tables, and inline CSS. Today, I’m going to walk you through the process of creating simple HTML emails.

Building Persistent Sticky Notes with Local Storage

HTML5 local storage is like cookies on steroids; it’s incredibly simple to use and yet still so powerful. In this tutorial, I’ll show you how to create “sticky notes” functionality, that allows your users to take persistent notes while browsing your site.

CSS3 Loading Spinner

I made a little CSS3 rotate-y loading graphic thing just for kicks. Here’s an animated GIF of the glory as it appears in WebKit.

Build Awesome Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

Recreating Tumblr’s “Updating…” page using pure CSS3

Each and every day we’re witnessing more and more HTML/CSS3 tutorials, experiments and projects; new standards are being pushed not just by web developers, but by prominent and popular services, such as Google, Apple and lately even Microsoft..

CSS3 font-face or how to use a custom font for your website

Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.

Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3

Even though we’re definitely living in the Flickr Age (apparently that’s the one that comes right after the Age of Aquarius), there’s still something so lovely about being able to spread a big boxful of photos over my kitchen table.

Create an Exploding Logo with CSS3 and MooTools or jQuery

When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored.  His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript.

Cross-browser CSS gradient buttons

Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use. In this article you will see how you can create a set of gradient buttons just with CSS (no images).

Rotating billboard using only CSS3

When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.

How to create a cool and usable CSS3 search box

In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML attribute, fallback is created using Modernizr’s feature detection.

Checkerboard, striped & other background patterns with CSS3 gradients

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

CSS gradients – quick tutorial

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now. However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers. With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

 

Designing Search Boxes with HTML5 and CSS3

Search is one of the most important part of any website. Here I will show a few practical techniques for designing search forms and a few tricks to make usable and good-looking search functionality.

Dark Button Navigation Using CSS3

I recently came across a great looking set of navigational buttons designed by Orman Clark of Premium Pixels. I’m a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. Check out the demo and feel free to download the example zip file as well.

How to Create A Multi-Step Signup Form With CSS3 and jQuery

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.