Web Design Tutorials
CSS3 Glow Tabs
By Louis Lazaris on April 7th, 2010
Categories: CSS, Web Design Tutorials | 29 Comments >
The other day I visited the jQuery Conference page, and immediately fell in love with the beautiful design and CSS3 technique applied to the tabbed navigation on that page. Visit the site in a Webkit-based browser (Chrome or Safari) or Opera 10.5, and you’ll see a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs.
But that’s not all; they’ve also applied some rounded corners and gradients to complete a very nice effect. All with no images — just progressively enhanced with CSS3 so it degrades in non-supportive browsers. I immediately set out to recreate the effect, and I thought I’d write it up so you can see how CSS3 can create intuitive and beautiful interfaces with no images.
How to Dynamically Highlight Content Like Wikipedia Using CSS3
By Louis Lazaris on April 5th, 2010
Categories: CSS, JavaScript & jQuery, Web Design Tutorials | 13 Comments >
If you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: (1) the link brings you to the footnote section at the bottom of the page; and (2) the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy for the reader to visually access the appropriate footnote.
This is a neat little technique that is accomplished easily using the CSS3 :target pseudo-class selector. Unfortunately, this is another CSS3 feature that has no support in Internet Explorer, and so has been largely overlooked up to this point.
In this brief tutorial, I’ll show you how it’s used, and also provide a quick little JavaScript solution that can be added to an IE-only external script to get it to work cross-browser. IE (all three versions) is the only browser that fails to offer support for this very practical CSS3 feature.
jQuery Tutorial for Beginners: Nothing But the Goods
By Louis Lazaris on March 24th, 2010
Categories: JavaScript & jQuery, Web Design Tutorials | 34 Comments >
Not too long ago I wrote an article for Six Revisions called Getting Started with jQuery that covered some important things (concept-wise) that beginning jQuery developers should know. This article is the complete opposite; there’s no concepts, no principles, and very little lecturing — just some straight example code with brief descriptions demonstrating what you can do with jQuery.
This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of (although jQuery’s capabilities go far beyond this beginning tutorial).
Keep in mind that this tutorial is just a bunch of straightforward, superficial code examples and very brief explanations for beginners who want to avoid all the jargon and complexities. But I still highly recommend that all beginners get past this stuff by means of a good book, some more in-depth tutorials online, or by using the jQuery documentation.
Inject Custom Ad Blocks Between Paragraphs in WordPress
By Louis Lazaris on March 15th, 2010
Categories: JavaScript & jQuery, Web Design Tutorials | 13 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 | 5 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 | 15 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 | 49 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 | 36 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.
