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.

Alternative Units for CSS3 Rotation Transforms

Alternative Units for CSS3 Rotation TransformsCustomarily, the unit being used to rotate elements with CSS3 transforms is the “degrees” unit, declared by appending the string “deg” at the end of the unit value.

But “degrees” isn’t the only unit available when rotating elements with transforms. You can also use other units, namely gradians, radians, and turns.

Pure CSS Tool Tips Revisited

Pure CSS Tool Tips RevisitedCreating tool tips with pure CSS and no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.

For a recent project, I had to research the concept and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.

So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

CSS3 Attribute Selectors: Substring Matching

on | 7 Comments

CSS3 Attribute Selectors: Substring MatchingThree of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.

These can open endless possibilities, so I think it’s useful to have them in mind. And as a bonus, these selectors have strong support as far back as IE7, so pending thorough tests I think they are quite safe to use in many current projects.

Here’s a brief outline of each one, with some examples.

Understanding em Units in CSS

Understanding em Units in CSSDue to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS.

As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.

CSS3 Box Shadow Syntax Breakdown

CSS3 Box Shadow Syntax BreakdownThis post is just a simple breakdown of CSS3′s box-shadow property, which you can also review on my click chart.

This is mainly written for CSS3 beginners, but does contain some extra info that might be useful to developers already familiar with what’s new in CSS3, including the use of shadows.

Why Use the Triple-Equals Operator in JavaScript?

Why Use the Triple-Equals Operator in JavaScript?“Determining whether two variables are equivalent is one of the most important operations in programming.” That’s according to Nicholas Zakas in his book JavaScript for Web Developers.

In other words, throughout your scripts you’ll probably have lines comparing values. JavaScript beginners who try to adhere to best practices may be using triple-equals and not double-equals, but might not fully understand what the difference is or why it’s important to stick to triple-equals.

Options for Styling Text Links and Hover States

Options for Styling Text Links and Hover StatesBecause 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 JavaScriptIf 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 ResizeOn 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.