Web Design Tutorials

This section of Impressive Webs contains articles and tutorials that describe a particular front-end development technique in detail with code samples and often a demo page and download links. Some tutorials are step by step, and others are more generic.

Reverse Ordered Lists in HTML5

Reverse Ordered Lists in HTML5With all the hype surrounding the new APIs and the fancy parts of CSS3, I had almost forgotten about the new reversed attribute that allows you to write a descending list of numbered items, as opposed to the default ascending list of numbered items.

You can get full details in the specification, but here I’ll summarize what it does and I’ll offer a solution for the fact that there is (from what I can see) no browser support for this attribute.

Don’t Forget About “transition: all”

CSS3 transition: allIf you’ve been using CSS3 transitions for some time, you might be accustomed to a certain type of syntax.

Here I’ll introduce the keyword value “all” and how it might save you a few lines of code and make things easier to maintain in the future.

Image Tint With CSS

Image Tint With CSSThe other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter folowers.

One of the wishlist items a few people mentioned was “CSS blend modes” with a use case of tinting an image on hover (or tinting it statically, then removing the tint on hover or by some other interaction). My immediate thought was: That should be simple enough, shouldn’t it?

Centered Heading Overlaying a Horizontal Line with CSS

Centered Heading Overlaying a Horizontal Line with CSSMaybe there’s a technical term that I’m not aware of for this type of centered, line-splitting heading. Whatever it’s called, I’ve used it in the new design of the footer on this site, where I’ve divided the footer into sections with headers that overlay a horizontal line.

I wanted to try to do this as efficiently as possible, and without images. I came up with three solutions with pure CSS and one that uses jQuery.

The Subtleties of CSS3 Transitions

The Subtleties of CSS3 TransitionsIf you haven’t yet used CSS3 transitions extensively, here’s something you may not have picked up on.

As I’ve outlined before, transitions can be triggered in a number of ways, and even via JavaScript. The reason for this is because the actual transition is not dependent on any particular event. Although it is the event that triggers the transition, the transition itself is completely separate from the event (as it should be).

Because of this, you’ll notice a slightly quirky behaviour if you place the transition on the part of your CSS that triggers the event.

Dealing with Empty Elements in CSS3 Animations

Dealing with Empty Elements in CSS3 AnimationsEarlier this month, Chris Coyier posted an article discussing a way to deal with the empty elements that are often needed when doing CSS3 animation.

Chris’s solution is interesting. He basically suggests (and I’m paraphrasing here) that we can give the empty elements semantic value by adding some text in each one to describe what each animated element does, or what mood it conveys. Then, the text in those empty elements can be moved off the page with CSS.

Some people got in a tizzy over the potential SEO penalties that could arise (which I kindly pointed out is probably not an issue) while others seemed to have a problem with Chris’s use of the word “semantic”.

How Do Browsers Render the Different CSS Border Style Values?

on | 24 Comments

A Comparison of Alternate CSS Border Style Values in All BrowsersYou’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser.

We all know there are other values for border-style, but it’s likely you’ve never used any of them. You may have used a value of “dashed” or “dotted”, but probably not too often.

I thought it would be interesting to screen capture how all the different browsers display all the different values for border-style. In addition to the screen shots, I’ve provided some observations and I’ve summarized how the different values are supposed to look (according to the specification).

Calling a PHP File From HTML’s Script Tag

on | 44 Comments

Calling a PHP File From HTML's Script TagOkay, admittedly, this is a pretty crazy and virtually useless tip. But it’s just one of those things that illustrates the flexibility of our craft and how sometimes solutions to problems can be found from some really outside-the-box thinking.

Back when I worked for a Toronto web design agency, we often had to update sites that were written in straight HTML, with no server-side programming at all. So every year, clients that owned such sites would ask us to update all the pages to display the current copyright year. That was pretty lame. Not exactly the kind of work we wanted to be doing.

So we wanted to create a way that the current year would be printed on each page automatically. But we didn’t want to include a JavaScript library, we didn’t want to use Ajax, and we wanted the year to come from the server, not the client.

Triggering CSS3 Transitions With JavaScript

Triggering CSS3 Transitions With JavaScriptAt the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.

That alone should help you see how these types of simple animations work. But let’s take this a bit further.

CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.

Replacing Subtle Flash Animations with CSS3

Replacing Subtle Flash Animations with CSS3I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu.

On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design.

Her animations are done using Flash. I thought it would be fun to grab some of those elements and create a CSS3-based page that mimicked what those Flash-based objects do.