Attending An Event Apart Boston and going through the W3C’s Mobile Web Best Practices course has me looking more closely at how I mark up data.
The main cord that was struck, most directly in Luke Wroblewski’s Mobile First! talk, but echoed by most every speaker in Boston, is to design from the mobile version of your site first. This theme occurs in the Mobile Web course as well.
(more…)
On the CSS-d mailing list Gabriele posted a demo titled Pure CSS fisheye menu with icons. It’s a nifty little demo replicating the zooming dock feature you’ll find on Mac and Stardock’s Dock.
I decided to take it one step beyond and utilize CSS 3′s transform properties, resulting in my own Fisheye demo.
I cut out much of Gabriele’s code that handled the zooming and replaced it with Folgers Crystals transition and transform. (Although I kept pretty much everything else she built, including her icons. Thank you Gabriele for the inspiration.)
Specifically, on the navigation anchors we have transition: all .1s ease-in-out. In a nutshell, this says, “All transitions should take .1 seconds to complete and they should do it smoothly.” We also have transform-origin: 50% 0 which moves the center of action to the center top of the anchor box.
It isn’t until we get to the hover/active/focus states that things happen. Here we have transform: scale(1.5), which you’ve no doubt already concluded causes the element to grow by a factor of 1.5. An important thing to note about this, the transform is applied to the anchor element and therefore affect everything inside that anchor, be it a background image, text or foreground image.
Of course it isn’t quite that simple. Because this part of CSS 3 is under development, we need to utilize various vender prefixes. So to see it actually work you’ll need to add -moz-, -webkit- and -o- to the front of all the transform properties. Not surprising there is not support for Internet Explorer, but that’s OK, it doesn’t matter. Anyone using IE won’t know what they are missing. Go see for yourself.
And look for the Easter Egg… .
Wow, a new post. OK, it’s mostly to announce that I have moved my blog from there to here (no longer a page of my site, but front-and-center).
I’ve also cleaned up some things behind the scenes (not that you care, but hey, I did it). There is more cleaning to do, but it shouldn’t affect you in a negative way.
So, that’s it for now. Welcome to my new(ish) home. As always, I’m hoping to use it more…. Time will tell.
