Web Design Tutorials

CSS Opacity That Doesn’t Affect Child Elements

By Louis Lazaris / July 28, 2009 / 27 Comments

This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But I’m sure it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.

First, here is the CSS code necessary to make an HTML element semi-transparent:

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript

By Louis Lazaris / July 15, 2009 / 10 Comments

One particular design trend that has caught my attention of late on web development and graphic design blogs is the fancy gray border that surrounds images in blog posts. There are subtle variations of it around the web, which you can see on a number of blogs and tutorial sites.

Sometimes it’s just an image with a solid border and slightly lighter shaded background. Elsewhere it’s a linked image with the same effect, plus a rollover state that changes the color of the border and/or background. And sometimes it’s seen in the ads on a design blog.

Ajax From the Ground Up: Part 2 – Sending Data to the Server

By Louis Lazaris / June 13, 2009 / 4 Comments

This is the second tutorial in a series explaining how to implement Ajax “from the ground up”, so if you haven’t yet checked out the first tutorial, then please do so now, as this one will be building on code from part one.

In the first part, we learned how to create an instance of the XMLHttpRequest object in a cross-browser fashion. In part 2, we’ll discuss the code needed to start communicating with the server. The result of this tutorial will help us send data to the server.

Ajax From the Ground Up: Part 1 – XMLHttpRequest

By Louis Lazaris / June 7, 2009 / 5 Comments

It started out as an industry “buzzword” and has slowly progressed into one of the most important web technologies in use today. It is easily implemented using your favourite JavaScript framework. It can provide a beautiful layer of enhancement to many web applications, helping to improve page-load times and greatly improve the user experience. It can also degrade the user experience and cause a web application to fail if a particular client-side technology is unavailable.

Yes, I’m talking about the web methodology immortalized by Jesse James Garrett called Ajax. (As Garrett points out, Ajax is not a technology, but several technologies.) This article will begin a multi-part tutorial series in which I will explain how to implement Ajax “from the ground up”. This series will be geared towards web developers who would like to better understand Ajax in its raw format, using pure JavaScript.

How To Put a Multi-Line Indent on a Styled Blockquote

By Louis Lazaris / May 28, 2009 / 12 Comments

This brief and easy tutorial provides a method to indent multiple lines of text around a background image on a styled <blockquote> element.

When I wrote the previous post, listing 25 Classic web design articles, I included a styled <blockquote> for each of the listed articles. This is obviously nothing new; virtually all design blogs have a fancy blockquote styled with a double quotation mark in the background or something similar.

But when I was laying out the blockquote in Photoshop, I didn’t like the way it looked with the entire left side indented. Here is how I originally intended it to be:

JavaScript Folder Collapser for Dynamic Content (Tutorial)

By Louis Lazaris / May 7, 2009 / 4 Comments

In this tutorial, I’ll show you how to create a group of collapsible folders using pure JavaScript and some jQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page — wherein the number of folders may be unknown.

How to Style a “Call to Action” Area with Minimal Code

By Louis Lazaris / April 21, 2009 / 2 Comments

Doing front-end development for a full service web design company means I’m often involved in very high-end, corporate websites that require styling “call to action” (CTA) or “promo” areas on the home page. These areas usually consist of 3 or 4 boxes that are most likely going to change at some point, and the client might even ask for one or more of the CTA boxes to include dynamic content. What is often troublesome about these boxes is that, more often than not, they don’t contain consistent content. They might have different colored titles, different background images, variations in text size, and so on.

If we’re not careful, our CTAs can suffer from divitis, too many attributes, and CSS-overload. In this tutorial, which is mainly aimed at CSS beginners, I’ll teach you how to create a nice clean CTA that is easy to modify and contains minimal styles and markup.

Equal Height Columns with JavaScript (Full Version)

By Louis Lazaris / April 16, 2009 / 16 Comments

As an alternative to “faux columns” and other not-so-clean methods for attaining equal column height in CSS layouts, this tutorial will explain how to accomplish equal columns with pure, unobtrusive JavaScript. This method takes into account top and bottom border thickness as well as interior padding so that the two columns are exactly the same height in virtually every circumstance. And the script is written to ensure that the columns will equalize regardless of which one is taller, so it’s very practical for dynamic content with complex background styles.

This is a full tutorial that expands on a previous post where I outlined a very rudimentary method to achieve equal columns using JavaScript. In the previous article, I discussed the various benefits and drawbacks to using JavaScript for this issue, so I won’t repeat those here.