Posts tagged: css-tricks

  • Wednesday
  • December 15
  • 2010

Rebuild 08: Project content and CSS3 transition examples

The basic layout and presentation for the projects page is done. Setting up that page prompted me to implement a few CSS3 transitions at three locations: the horizontal navigation links, the sidebar items, and the project titles in the left column of the projects page.

You’ll need Chrome, Safari, Opera or the Firefox 4 beta to see the effects. As you hover over any of those three page elements, you will see a smooth transition effect. This is very easy to implement. All I had to do was add this CSS3 code to the CSS selector for the particular element to which I wanted the effect applied:

-moz-transition: all 0.60s ease-in-out;
-o-transition: all 0.60s ease-in-out;
-webkit-transition: all 0.60s ease-in-out;
transition: all 0.60s ease-in-out;

There is a lot more one can do using CSS3. To see a real-world site with a lot of this sort of thing implemented, open up Chrome or Safari and take a look at CSS-Tricks and hover your mouse around all the parts of the page. Of course, this level of implementation can really get annoying, sorta like an overuse of visual gimmicks in PowerPoint slides. But, hey, if your site is called “CSS-Tricks,” I think you get a pass.

  • Wednesday
  • June 9
  • 2010

Readability + The Printliminator!

Early last year I mentioned the Arc90 Readability bookmarklet and why I liked it. Since then the developer has released the Readability add-on for Firefox, which I find inordinately useful and practical. (There is a Chrome variation called Readability Redux, based on the Arc90 code but created by a different developer.)

The Readability extension does a simple thing I need literally every day, i.e., it makes single posts superbly more readable and printable. It is that simple. For any article on the Web I have a serious interest in reading, rather than just scanning, then I want what Readability does for me: With one click, I have the article stripped of all that is extraneous, set typographically for ease of reading with an optimal font family, font size, content width and comfortable leading, and I can also print it out should that suit me.

To see how well this works, take a raw gander at this article today by Gail Collins and David Brooks of the New York Times: Where Did All the Angry Voters Go? Sure, it’s readable enough. If you are OK with the altogether small font and old school newspaper-y column width, not to mention all the other clutter and advertisements on the page. Then install the Readability add-on and view the same page again. As my ophthalmologist always asks me, “Better one or better two?”

But wait, there are even more options! Try The Printliminator bookmarklet, available at the extraordinary CSS-Tricks. I don’t think you can beat the overall ease of use one gets from the Readability add-on, but The Printliminator gives you a further edge: You can first view the article via Readability, and then trigger The Printliminator to remove all the images or photos in the article, to strip everything down even further. Again, “Better one (using Readability) or better two (using Readability + The Printliminator)?”

You decide.