31 Fresh HTML5/CSS3 Tips and Techniques for designer & Developers

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.

Create a Stylish Contact Form with HTML5 & CSS3

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.

Slick login form with HTML5 & CSS3

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code.

CSS Noise

This post looks at a way to add a subtle noise effect to HTML elements using CSS. Using this technique is of interest because it doesn’t require use of an image editor, weighs in at just a little over 2K and doesn’t generate any extra HTTP requests.

The future of CSS layouts

For all the wonderful features it provides, CSS does a surprisingly poor job of the fundamentals of page layout. But options for richer, more dynamic pages are on their way, as Peter Gasston explains..

Unique Navigation Bars Using CSS Sprites

In my previous article about CSS Sprites – Introduction, I told you about the hover effect with an example. We did mention that we would come up with more practical examples so that you realize the importance of CSS Sprites. So, we have come up with step by step instructions (including a little bit of PhotoShop tutorials) for creating a unique navigation bar based on CSS Sprites.

Techniques For Gracefully Degrading Media Queries

Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.

How to Build a Fully Functional CSS3-Only Content Slider

Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. However, with the advent of CSS3, I will show you how to build one using only CSS.

Postcard from Paris – css3 keyframes animations in use

I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris..

How To Develop Using HTML5: Demo Part 2

The new semantic elements in html5 are fairly easy to understand, but to really become comfortable using them you need to actually use them in documents. To get myself started I created a demo page representing a typical blog post and developed it using html5.

Create reflection effect using CSS3

In a recent project, the client asked me if there is any way to add reflection to images. He wanted this effect because he liked the reflection effect added by designer in the design of his website. But the issue was that he might need to add more images in the future, and he cannot go back to his designer every time. Of course learning photoshop to do it by himself did not excite him either.

How To Create a Slick Features Table in HTML & CSS

We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.

Create a Photo Stack Effect with Pure CSS Animations or MooTools

My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser’s DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them.  Outstanding!  I’ve researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript

Print Avery labels using CSS and HTML

Now, I’ve created Avery labels using Office, Illustrator, even Photoshop — but never using web technologies. You just don’t have a lot of control printing from your browser using CSS. Or do you…? After all, we’ve always been able to specify real-world measurements such as “in” and “cm” using CSS..

Optimize Images With HTML5 Canvas

Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.

You Might Also Like


  1. 1
  2. 2

Comments are closed.