Web design articles, tutorials, and more.
To make the web impressive.
Web Design Tutorials
Inject Custom Ad Blocks Between Paragraphs in WordPress
By Louis Lazaris on March 15th, 2010
Categories: JavaScript & jQuery, Web Design Tutorials | 5 Comments >
It’s common nowadays for bloggers to monetize their blogs through the use of strategically-placed ad blocks. BuySellAds ad blocks are the most popular in the web design community. You’ll sometimes also see AdSense ads placed at the top of articles or in other spots.
It becomes a bit of a challenge, however, to include ads in older posts. Nobody wants to go through and edit each post, adding customized code manually, which could be quite time consuming.
The best way to do this is to put the ad code in your single.php page, outside of the function that displays the post. Unfortunately, with this method, the ads are limited in location to either the top or bottom of the article. In this tutorial, I’m going to describe some JavaScript that I wrote that will dynamically embed a custom ad block between paragraphs in all your WordPress posts.
Ajax From the Ground Up: Part 3 — Getting a Response From the Server
By Louis Lazaris on March 9th, 2010
Categories: Ajax, Web Design Tutorials | 3 Comments >
Last year I began a series called “Ajax From the Ground Up”, that consisted of two articles describing how to implement Ajax from scratch using pure JavaScript. Because I was busy with other things, and due to minimal interest shown in the articles, I never wrote the third part to the series.
But I didn’t feel comfortable leaving it permanently unfinished, so with this article, I’ll complete the 3-part series that will teach you how to fully implement Ajax calls in your pages using raw JavaScript.
Recreating CNN’s Beveled Navigation Buttons with Pure CSS
By Louis Lazaris on February 25th, 2010
Categories: CSS, Web Design Tutorials | 11 Comments >
When CNN recently redesigned their website, they created a strongly-branded and beautiful header section that includes a navigation bar with beveled buttons. Although CNN’s navigation bar utilizes CSS sprites for highlighted and active buttons, the primary design of the buttons (the beveled effect) is done with pure CSS.
I think this is a common-known technique among experienced developers, but many beginning web designers will probably resort to images to create this effect, which is not necessary. So, in this brief tutorial I’ll show you how to create a navigation bar with beveled edges using pure CSS, identical to that on CNN.
A JavaScript Content Switcher That Works Without JavaScript
By Louis Lazaris on February 23rd, 2010
Categories: JavaScript & jQuery, Web Design Tutorials | 35 Comments >
Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).
At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.
A Stationary Logo That Changes on Page Scroll with CSS
By Louis Lazaris on January 18th, 2010
Categories: CSS, Web Design Tutorials | 31 Comments >
The Econsultancy marketing blog has an interesting little effect using CSS that causes their logo to change when the page is scrolled. Visit their page and scroll down. You’ll notice the logo changes from a solid version to an outline version.
If you know CSS fairly well, or have investigated some of the sites on css Zen Garden, then you’re probably aware that this technique uses the CSS background-attachment property.
Deep Linking in JavaScript and Ajax Applications
By Louis Lazaris on December 17th, 2009
Categories: Ajax, JavaScript & jQuery, Web Design Tutorials | 5 Comments >
Last week I posted a tutorial that demonstrated using a simple application how to implement progressive enhancement into your Ajax projects. The one major flaw in the final Ajax-driven page from that tutorial is the lack of deep linking when JavaScript is enabled.
Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page.
If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.
Building an Ajax Application with Progressive Enhancement
By Louis Lazaris on December 9th, 2009
Categories: Ajax, JavaScript & jQuery, Web Design Tutorials | No Comments >
If you’ve done your best to keep up with web development trends over the past five years or more, then it’s likely that you’re familiar with the concept of Progressive Enhancement. I’m not going to provide an explanation of that technique here, but instead, I thought I would demonstrate using a small Ajax-driven page how progressive enhancement can be implemented.
The mini-app we’ll be building in this tutorial is an employee information page. It will consist of a series of links at the top of the page that will determine what employee info is displayed in the content area. The information will be held inside of include files, to simplify the process (as opposed to a database or XML file which might be more practical in a real-world app). Although we’re going to use Ajax to display the information, we’re going to ensure that the same information is displayed even when the user is visiting the page without JavaScript capabilities.
The Right Way to Add Custom List Markers to Unordered Lists
By Louis Lazaris on November 20th, 2009
Categories: CSS, Web Design Tutorials, XHTML | 3 Comments >
Most experienced web developers now understand that using CSS’s built-in method for adding custom list markers (also referred to as “bullets”) to style an unordered list is not an option. The unpredictable bugs that occur in Internet Explorer when using the list-style-image property render that method quite useless.
Fortunately, because of CSS’s inherent flexible nature, we can still customize the list marker on an unordered list. This is done by placing a background image on the list items. Here’s how most developers do this:
CSS Opacity That Doesn’t Affect Child Elements
By Louis Lazaris on July 28th, 2009
Categories: CSS, Web Design Tutorials, XHTML | 13 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 on July 15th, 2009
Categories: CSS, Graphic Design, JavaScript & jQuery, Web Design Tutorials | 3 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.
