Articles By: Louis Lazaris

Why Browsers Aren’t TVs (But We Don’t Care)

By / / 11 Comments

Why Browsers Aren't TV Sets (And Why We Don't Care)Last week Paul Irish coined a new term: TAFEE, which stands for Tiered, Adaptive, Front-end Experiences. The concept is nothing new.

It’s basically the prettier cousin of the concept of progressive enhancement, with a little bit of Andy Clarke thrown in for good measure. I won’t explain TAFEE here; you can read Paul’s post to understand the concept better, and to understand the reasons behind this approach.

The purpose of this post is to address a few of the comments on that article that were posted in response to the TV analogy that Paul used — which he borrowed from this slideshow by Nicholas Zakas.

Here’s a summary of the basic premise of this debate, and then my thoughts.

Triggering CSS3 Transitions With JavaScript

By / / 46 Comments

Triggering CSS3 Transitions With JavaScriptAt the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.

That alone should help you see how these types of simple animations work. But let’s take this a bit further.

CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.

Screencast Series on HTML5 and CSS3

By / / 0 comments

Screencast Series: HTML5 and CSS3 for the Real WorldA few months ago, after helping to co-author HTML5 & CSS3 for the Real World, SitePoint asked me to do a related video screencast series on their new Learnable.com website.

I agreed, and the course has been available online now for a few weeks. It was a fun experience, and it’s motivated me to plan for some screencasts here on this site, too. I won’t go into great detail on the course here — you can review the course contents on Learnable.com at your leisure.

Basically, the course consists of 28 separate video tutorials that make up 9 full lessons. Most of the videos are about 10 to 15 minutes long, with a few under 10 minutes, so they’re pretty easily digestible. Lesson 10 is a “resources” section that I’ll probably continue to add to, and Lesson 11 is a “bonus voucher”.

CSS in Real Life (aka “CSS Puns”)

By / / 47 Comments

CSS In Real LifeLet’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life.

A few sensitive subjects represented here, but they’re not meant to cause offence. Just some CSS silliness. Enjoy.

Introducing: Animation Fill Code

By / / 4 Comments

Introducing: Animation Fill CodeAfter messing around with CSS3 keyframe animations for a few months now, I realized (as is the case with most CSS3 stuff) repeating the code can be annoying.

For CSS3 animations, it’s worse. You have to write sometimes dozens of lines of code for a single rendering engine (I always start with WebKit) then copy all the code two more times, then change the prefixes to get it to work in another rendering engine (in this case Gecko/Firefox) and have a standard equivalent.

After a quick search, there didn’t seem to be a tool to do this (other than whatever find-and-replace functionality you have in your text editor), so I wrote one myself. It’s called Animation Fill Code.

Replacing Subtle Flash Animations with CSS3

By / / 18 Comments

Replacing Subtle Flash Animations with CSS3I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu.

On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design.

Her animations are done using Flash. I thought it would be fun to grab some of those elements and create a CSS3-based page that mimicked what those Flash-based objects do.

Why I Hate MLB.com’s Navigation

By / / 8 Comments

Why I Hate MLB.com's NavigationBeing a big baseball fan, I find myself perusing MLB.com pretty much daily. And if you read my site regularly, then you already know that.

Here’s something I hate about the way their navigational structure is architected.

I often go to the home page to scan for the most popular news items, or newsworthy stuff that catches my eye. If I don’t find anything to click on, then I might choose the “Standings” link.

Little-Known CSS3 Typographic Features

By / / 10 Comments

Little-Known CSS3 Typographic FeaturesThe CSS3 fonts module has a number of interesting CSS3 properties and features. Browser support for many of these is pretty limited right now, but I thought I’d summarize some of these features here.

The first three properties discussed here are CSS3 properties, while the last section will discuss features that have existed for a while but that you may not know about because of their limited potential for use.

⭠ Newer Articles Older Articles ⭢