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.

HTML5′s New “form” Attribute

HTML5's New form AttributeOne challenge that developers have faced when creating forms is the inability to separate a form control from its parent <form> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.

If you tried to do this in HTML4 or XHTML, the form would not submit the information from the form control that’s structurally outside the form.

As a result, if you wanted the data from the orphaned control to be submitted along with the rest of the form data, you’d have to implement some fancy JavaScript tricks to pass the information into the submission — which has many obvious drawbacks.

A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

A Bookmarklet to Fix Wikipedia's Layout on a Wide Browser WindowI have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this:

Background-Clip in CSS3

Background-Clip in CSS3With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.

The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.

An Option to Mimic CSS3 Text Shadow in Internet Explorer

An Option to Mimic CSS3 Text Shadow in Internet ExplorerBaseball season is in full swing in North America and I’ve noticed some nice changes to the design of the MLB.com website. In addition to changing their Flash content slider to JavaScript, they’ve also started to supercharge their design with some CSS3 enhancements.

On the game wrap-up pages, there’s some subtle use of rounded corners, opacity, and text-shadow, the latter of which I’ll be focusing on here.

The experience on the site is pretty similar on older versions of IE as it is on modern browsers. Here’s a screenshot of a game wrap-up page in IE6:

Here’s Something Interesting About CSS Borders

Here's Something Interestiong About CSS BordersAfter years of developing CSS layouts and reading web design blogs and CSS books, I still can’t believe I come across things that I don’t know about super-common CSS properties.

Maybe it’s just me; maybe I’m just a creature of habit and fail to look closely at things I’m really used to seeing, and I forget that there’s more to CSS than what I’ve personally discovered and learned so far.

Well, while reading Christian Heilmann’s chapter in the Smashing Book 2, I noticed he used the following code snippet when showing some CSS (edited for brevity):

A New Way to Trigger hasLayout on Elements in Older Versions of IE?

By Louis Lazaris on | 4 Comments

A New Way to Trigger hasLayout on Elements in Older Versions of IE?I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.

Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.

Here’s the element, demoed live on the page, with the aforementioned characteristics:

Scoped Styles in HTML5

Scoped Styles in HTML5The topic of scoped CSS styles in HTML5 came up twice in the comments of a recent post by Chris Coyier.

The post itself was discussing the contenteditable attribute, but a few users brought up HTML5′s new scoped attribute, used on the <style> element.

Let’s take a brief look at this future HTML5 feature and see how it might be useful in the ever-changing web development landscape.

My Preferred Syntax Style for HTML5 Markup

My Preferred Syntax Style for HTML5 MarkupEver since HTML5 has started to gain wider use, many developers have wondered what syntax style should be most prevalent. When coding HTML in XML format, it was easy–because the validator forced you to code in a consistent manner.

Well, since code validation in HTML5 is a bird of another feather, a consistent coding style is going to be extremely unlikely across the web. While an exact coding style across all sites is not really necessary, I think some level of consistency is in order. People’s concerns in this area are valid.

So here are my own personal point-by-point recommendations for clean and consistent markup, and some reasons behind the decisions.

How is the DOM Affected by Improperly Nested HTML Elements?

By Louis Lazaris on | 8 Comments

How is the DOM Affected by Improperly Nested HTML Elements?Here’s something interesting I came across while reading Introducing HTML5 by Bruce Lawson and Remy Sharp, which I recently purchased.

In one of the early chapters, Bruce mentions that when tags are not nested properly, the resulting generated DOM will be seen differently in different browsers. Of course, when you “view source”, the code will be the same in all browsers. It’s when you inspect the page (or view the “generated source”) using developer tools that the results can differ.

After some testing, this is indeed the case. Here’s the code that I tested: