Web design articles, tutorials, and more.
To make the web impressive.
CSS Font Shorthand Property Cheat Sheet
by Louis Lazaris on March 17th, 2010
Categories: Markup & Style, Web Design Articles | 9 Comments >
In the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast. So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works.
So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project. Enjoy!
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.
How to Get 100+ Comments on a non-Contest Blog Post
by Louis Lazaris on March 8th, 2010
Categories: Web Design Articles | 7 Comments >
I had to qualify that title, because by far the easiest way to get hundreds of comments on any blog post is to give something away to a randomly chosen commenter. But as bloggers we’re always in search of ways to create a little bit of buzz to increase page views and overall reader participation through re-tweets or comments.
As a web design writer, I do feel that it’s not only necessary to educate and get people thinking, but I feel I have an obligation to entertain my readers in the process of said education. Sometimes, however, entertainment and education are not enough, and it’s necessary to cause a little bit of controversy to get readers thinking, commenting, and in some cases, downright angry.
In this post, I’ll briefly outline 4 ways that are almost guaranteed to elicit at least 100 comments, and get the community buzzing.
Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
by Louis Lazaris on March 1st, 2010
Categories: Scripting, Web Design Articles | 7 Comments >
Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.
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.
Screencast: Why You Shouldn’t Use CSS Font Shorthand
by Louis Lazaris on February 19th, 2010
Categories: Screencasts | 29 Comments >
Starting today, and pending the work involved and subsequent success/failure, I will be regularly posting screencasts on Impressive Webs. Most of my writing time is spent authoring stuff for Smashing Magazine and Web Designer Depot of late, so I thought, as a change of pace, I could start doing some screencasts for my own site.
The inspiration for this idea, naturally, comes from the screencasts on Nettuts and CSS-Tricks. Jeffrey Way and Chris Coyier have been doing screencasts for quite some time, and I definitely have to give credit to them for the inspiration. I’ve especially enjoyed Jeffrey’s recent video quick tips on Nettuts.
CSS3 Click Chart
by Louis Lazaris on February 3rd, 2010
Categories: Markup & Style, Web Design Articles | 15 Comments >
Since my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.
The initial release only has 8 examples, with more to be added in the future. Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
The box that opens gives a description along with browser support, an external link (usually W3C info), and some example syntax taken from the CSS of the page itself.
New Website Launch: Interviews by Design
by Louis Lazaris on January 26th, 2010
Categories: Web Design Articles | 4 Comments >
Today I’m happy to announce the launch of a new project I’ve been working on since late December. It’s a simple website called Interviews by Design that will be a repository of 5-question interviews conducted with designers from around the world.
The name has a two-fold meaning: (1) The interviews are conducted with designers; (2) Each interview asks the same five questions, thus they are in that format “by design” (meaning done intentionally).
And I should probably give credit to Chris Coyier of CSS-Tricks for popularizing the 5-question format in the design niche (although he may have borrowed the idea from another blogger or Craig Kilborn, I’m not sure).
