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.

Setting Up Sass on Windows

Setting Up Sass on WindowsThere’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass (my preprocessor of choice).

Overall, Sass is not difficult at all to get set up, even if you’re doing it on the command-line. But if you have no interest in going through all these steps, but still want to use Sass on Windows, well, just skip to the final heading in this post for a reference to an app that lets you start using Sass on Windows with minimal setup.

How Do You Mark Up A Single Link or Button?

How Do You Mark Up A Single Link or Button?On many sites and apps, you’ll often have to mark up and style a button that is not part of a list of links, and that basically stands alone, apart from surrounding content.

How should a single, standalone link or button be marked up? As with many things in web development, there isn’t really a right or wrong way to do this, but here’s a summary of some of the different methods.

Loading a Different jQuery Version for IE6-8

Loading a Different jQuery Version for IE6-8If you haven’t heard yet, last week the jQuery team announced on their blog that jQuery 2.0, which is scheduled for an early 2013 release “removes support for IE 6/7/8 oddities such as borked event model, IE7 ‘attroperties’, HTML5 shims, etc.”

In this post, I’m just briefly showing everyone a simple solution for serving a different version of jQuery (or really, any script) to Internet Explorer versions 6-8.

JavaScript String Methods Reference

JavaScript String Methods ReferenceWhen writing JavaScript, I often find myself Googling for info, or using Mozilla’s reference to find the exact syntax and argument definitions for methods associated with string manipulation.

A lot of references I come across have far too much info, so this post will give examples and brief descriptions of some of the most common and useful string-related methods. I tried to put the most common ones near the top, for quick reference.

The CSS Clip Property

The CSS Clip PropertyYou’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.

At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.

Animating CSS3 Gradients

Animating CSS3 GradientsThe CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.

But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

Some Random JavaScript Coding Tidbits

Some Random JavaScript Coding TidbitsAlthough my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.

So here are a few things I’ve recently learned or read about that might be useful to you.

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.

I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for a description.

Mimic ‘onmouseout’ with CSS3 Transitions

on | 8 Comments

Mimic 'onmouseout' with CSS3 TransitionsHere’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition.

CSS3 Structural Pseudo-class Expressions Explained

CSS Structural Pseudo-class Expressions ExplainedYou probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: nth-child(), nth-last-child(), nth-of-type(), and nth-last-of-type().

The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression.