Articles By: Louis Lazaris

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.

A Consideration of Variable and Function Scope in JavaScript

By Louis Lazaris / July 9, 2009 / 3 Comments

Many aspects of JavaScript code development are taken for granted, and scope is really no different. Of course, in many cases where minimal code is required, variable scope (or function scope) is a non-issue. But if you’re planning to get into larger application development with JavaScript, then you need to understand at least the basics on scope in JavaScript.

Using some simple code examples, I’m going to run through the basics of scope and try to give beginning to intermediate JavaScript developers a better grasp of this very important concept.

10 JavaScript Quick Tips and Best Practices

By Louis Lazaris / July 1, 2009 / 18 Comments

Recently, a few blogs and tutorial sites have posted some really good articles on JavaScript tips and best practices, and I thought that was a good topic that could easily be expanded upon. So I put together a list of 10 fairly simple JavaScript tips and best practices of my own.

I tried to include stuff that was not mentioned in those other posts, but I’m sure there is a little bit of overlap. Keep in mind that these are brief tips and recommendations, so I don’t go into great detail about the reasons and such, but I may go into some of them in depth in future articles and tutorials.

In the meantime, please enjoy this list of tips, recommendations, and best practices for JavaScript coding.

A Primer on the CSS Font Shorthand Property

By Louis Lazaris / June 25, 2009 / 12 Comments

In recent years, as an off-shoot of the “web 2.0” movement, typography has really taken off and now plays a major role in web design. And font usage is also quite an important factor in CSS development — despite that it has not gotten to the point where any font can be used freely without some tricky, sometimes complex workarounds.

Font declarations and related properties in CSS are fairly straightforward to write in longhand. But there is a shorthand CSS property for declaring certain typographical properties that is well-supported across all common browsers, but a little quirky to work with. In this article I’ll describe how the css font shorthand property is used, how it can be misused, and what potential drawbacks there might be to including it in your CSS code.

A Detailed Look at the z-index CSS Property

By Louis Lazaris / June 17, 2009 / 26 Comments

Most CSS properties that a web developer deals with regularly are instantaneous in their application to elements on the page. For example, when you add the background-color or font-size property to an element on your page, in most cases you will see the results immediately upon page refresh. But other CSS properties are not quite as “plug and play” as we would like.

The z-index property is one example of the latter. I would venture to guess that z-index is probably the CSS property that is more speedily abandoned than any other. Very often — when I previously didn’t understand z-index — I would try to apply it to an element, hoping that the element would automatically “jump” to the top in the page’s stacking order. But that didn’t happen, so I would abandon that method and try some other way to solve the problem. Maybe you’ve had the same experience. Hopefully this article will clear up some misunderstandings regarding z-index.

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.

Everything You Need to Know About !important CSS Declarations

By Louis Lazaris / June 1, 2009 / 32 Comments

Recently I came across a few articles that mentioned CSS !important declarations, and there was a little bit of confusion over what they actually did, and how they could be used, as expressed in the user comments on those articles.

So I thought I would research this unique CSS property/value appendage and do a comprehensive write-up on it that would go through essentially all the information developers should have before considering its use in their style sheets.

This article will discuss what !important is, how it’s used, some practical uses for it, and drawbacks that need to be considered before implementing it.

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: