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.

Options for Styling Text Links and Hover States

Options for Styling Text Links and Hover States Because the web is built on links, how we style our links (i.e, anchors, or <a> tags) should always be an important part of a site’s overall design, branding, and feel.

I’ve seen so many variations on the link style/color and hover style/color combination, that I thought it would be interesting to list as many of them here as possible. Some of these will be quite common and humdrum, while others may be ugly and impractical. I tried to stay away from really bizarre animated stuff, but instead chose to stick to those that you might actually see on a web page.

Callback Functions in JavaScript

Callback Functions in JavaScript If you’re fairly inexperienced with JavaScript but you’ve used jQuery, then its likely you’ve used callback functions. But maybe you don’t fully understand how they work or how they’re implemented.

In this post, which is based on what I’ve learned about callback functions, I’ll try to enlighten you on this fairly common JavaScript technique. And maybe some of our JavaScript experts can chime in and let me know what I’ve omitted or oversimplified.

Textarea Auto Resize

Textarea Auto Resize On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed.

It seemed like a simple task. After doing a search to see what types of plugins and scripts were floating around to do this, the examples I found seemed a little overly complex. While most solutions seemed to incorporate some complex math calculations, I thought of a better way.

Understanding CSS’s vertical-align Property

Understanding CSS's vertical-align Property “Vertical-align isn’t working!” cried the web developer.

The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times.

In this post, I’ll try to cover it in an understandable manner.

Reverse Ordered Lists in HTML5

Reverse Ordered Lists in HTML5 With 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: all If 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 CSS The 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 CSS Maybe 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 Transitions If 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 Animations Earlier 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”.