Impressive Webs, Toronto | Web Design Articles & Tutorials

Animating CSS3 Gradients

Animating CSS3 Gradients The CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.

But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

jQuery/JavaScript Tools and Plugins Worth Checking Out

jQuery/JavaScript Tools and Plugins Worth Checking Out Sure, recently I mocked the fact that our industry is inundated with scripts, boilerplates, libraries, and frameworks. But that was just a light-hearted look at the state of our industry. I still think there are tons of tools that are valuable and worth knowing about for front-end developers.

So here’s another list of tools and other goodies that might be of interest to JavaScript developers.

Some Random JavaScript Coding Tidbits

Some Random JavaScript Coding Tidbits Although my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.

So here are a few things I’ve recently learned or read about that might be useful to you.

The Folly of Allowing Up/Down Voting for Individual Comments

The Folly of Allowing Up/Down Voting for Individual Comments We should be past this type of behaviour already. This industry should be about sharing, learning, and growing in knowledge. But too often we do things that allow these areas to be stifled. And it turns people away, causing newcomers to become discouraged and not want to voice their opinions and questions for fear that they’ll be labelled “stupid”.

Of course, we’re all going to slip up in this regard to some degree. I’ve answered people’s questions on this blog in ways that some people thought were rude and condescending. It wasn’t my intent to do that, so I’ve tried to do my best to apologize and keep the conversation going.

Web Designer Magazine Feature

Web Designer Magazine Feature If you keep up on print magazine reading in the industry, you probably know that .net magazine and Web Designer Magazine are basically the only two print magazines specifically targeted at web designers (at least, the only two that I know of).

So recently, Web Designer contacted me to do a feature piece covering CSS3 techniques. The focus of the piece is CSS effects that, prior to CSS3, required the use of images or scripts. The feature (called “Master CSS Effects) was planned to have 30 CSS techniques, and I was responsible for covering 20 of them. I don’t know what the final count includes, as I haven’t yet seen the issue, but the magazines’s staff were responsible for any remaining tips. They also wrote the intro and conclusion.

HTML9 Boilerstrap: The Story and the Unexpected Explosion

HTML9 Boilerstrap For a while now I’ve been wanting to set aside some time to do some sort of web development parody. I’ve done this sort of thing before and it’s fun to see people’s reactions.

I knew it had to be something centered around the ‘framework’ movement, mainly poking fun at the well-known HTML5 Boilerplate project. So on Tuesday night this week, I took the idea of HTML9 Responsive Boilerstrap JS from concept to creation. I finished it that night, including registering the domain, setting up the site, and gritclonemerging its own bogus repo.

CSS/HTML Tools and Resources Worth Checking Out

CSS and HTML Tools and Resources Worth Checking Out As always, my collection of recently discovered links, tools, resources and libraries keeps growing.

To archive these for my own purposes, and to share them in bulk, here is a list of CSS, HTML, and related tools that might be of interest to readers.

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.

I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for a description.

CSS: The Good Parts

CSS: The Good Parts In March I wrote about some of my least favourite parts of CSS. Admittedly, that was a pretty negative post, and I’ve even slightly changed my opinion of a few of those things, thanks to the comments.

But I like CSS a lot. So as a follow-up, I thought it would only be fair to list some of the things in CSS that I think work very well and thus are valuable to know and use often.

Mimic ‘onmouseout’ with CSS3 Transitions

Mimic 'onmouseout' with CSS3 Transitions Here’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition.