CSS3 UI Elements – Toggle Buttons

CSS3 Toggles

A friend of mine created a Pinterest board with various toggles, buttons and other interesting controls and UI elements that he found on the web. So, I decided to try my hand at creating some of these controls using CSS3 (w/ a tiny bit of behavior via JavaScript).

So I recreated the orange toggle (bit weak if I am perfectly honest but it was a bit of a rush job and I’ve to come back and polish it up) and one of the brushed metal toggles.

10-GUI Concept multi-touch desktop interface

If you haven’t noticed, multi-touch is all the rage these days. From iPhone’s slick interface and gestures, to all the laptops and netbooks that are trying to get in on the game, not to mention Microsoft’s “subtle” approach to the issue with their Surface idea. Then there’s also multi-touch for desktops, and as always the case with any sort of rush to adopt new technology, most do it the wrong way – by adding multi-touch to the desktop monitor. Sure, it’s easy to slap a capacitive panel on an LCD and call it a day, but that’s not gonna work in the long run. How long do you think you can sit with your arm stretched all the way to the monitor (if you can even reach it comfortably), not to mention your hand obstructing the screen?

That’s why I’m glad to see that at least some people are still trying to think outside the box. Like take R. Clayton Miller for example, who came up with the 10/GUI concept multi-touch interface for a desktop. The idea in a nutshell is to separate the multi-touch surface from the screen and put it on the table in front of the user, like a keyboard or a mouse.

Multi-touch control surface

Multi-touch control surface

Right away this is smart in two ways: 1) it uses a familiar control metaphor – controlling the UI on screen through controllers on the table, instead of directly on the screen; 2) it puts the control surface in a comfortable location and without obstructing the screen. Read more »

Multitouch support demoed in Firefox

The never-tiring folks at Mozilla are already hard at work on implementing multitouch events in Firefox. Felipe Gomes has posted a short demonstration of very cool multitouch capabilities via a few simple use cases. Here is the clip and a few words from the man himself.

We’re working on exposing the multitouch data from the system to regular web pages through DOM Events, and all of these demos are built on top of that. … We have three new DOM events (MozTouchDown, MozTouchMove and MozTouchRelease), which are similar to mouse events, except that they have a new attribute called streamId that can uniquely identify the same finger being tracked in a series of MozTouch events.

Read more »

Space saving, permanent Gmail and Google Reader Tabs in Firefox

This very useful tip was sent by Harsha Kotcherlakota to Lifehacker.com.

The idea is to set up tabs for Gmail and Google reader that will always be open, but with a few extensions will have minimal impact on the interface while providing the information relevant to each app (site). For a full guide see the link at the bottom, but here’s the gist of it.
Using the Better Gmail 2 add-on turn on unread count display in the favicon. Then get the Faviconize Tab and the PermaTabs Mod add-ons. The Faviconize add-on will add an option in the right-click menu of the tab to “Faviconize” it, i.e. remove the text and only leave the favicon visible. The PermaTab add-on gives you an option (right-click tab) to make a tab permanent. This will prevent it from accidently closing and will leave it on even after Firefox is closed (to close the tab you’ll need to “un-perma” it). And apparently permatabs don’t load their content until they’re first selected, in other words, this setup will not cause Firefox to load up 2 extra tabs every time you open it.

This is extremely useful. I check both gmail and reader multiple times a day but don’t like leaving them open all the time because the tabs take space, but with this I can have the best of both worlds.

[Original Lifehacker Post]