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.

Mozilla shows off upcoming Firefox UX changes

This is a slide show presentation by Mozilla’s UX lead Madhava Enros about some of the work his team is doing on Firefox UX. I love the unified interface and especially the way they handle the differences between tablet and smartphone interfaces. In particularly I’m really digging what they’re doing for Windows 8 version of the UI (slide 45) – it’s essentially taking the Windows 8 grid and dashboard view and putting it inside the browser. It looks really good and I actually wouldn’t min seeing this kind of approach in desktop UI in general. Anyway, if you’re into UI, UX or just good interface design it’s worth going through the slide to see what might be coming or even just get some inspiration for your own work.

How to do a header without a header – tiny solution to a big problem

I recently had a post in which I talked all about how the name of the site should really only use <h1> on the front page, and on the other pages it should take a backseat to whatever header the content has (post title for example). Well, I just ran into a problem related to that approach with the new design. Before I proceed though I must confess, the title of this post is sensationalist because the problem isn’t big. The issue is with the category pages – my design does not include a category title on a category page. Read more »

Cool CSS only buttons

I love CSS because it’s like having Photoshop inside a browser. Okay, maybe I’m exaggerating, but with modern browsers there are a lot of very cool things you can do with just CSS, without needing any of those pesky images with their overheads and extra kilobytes to download. In my work though I don’t often get a chance to try anything really interesting with buttons because they’re either simple, or if they’re not then I have to make them IE (worse yet, IE6) compatible so I end up reverting to mostly images anyway. So I decide to “go wild” and see what I can do without having to care about any of that compatibility nonsense.

Sidenote: Can you imagine if first cars had to be made horse-compatible? Yeah, think about that for a second.

So anyway, this is what I came up with.

CSS buttons

Look ma, no images!

Here is a demo of the buttons, pretty much exactly what I used for the screenshot above. I go over the styles after the break.

Read more »

Joomla Toolbar fix

If you work with Joomla 1.5 and like me, find the right alignment of toolbar icons counterproductive (in the default admin theme), then you can fix it with just a few CSS tweaks. Here’s what I mean.

joomla menu fix

To do this, in Joomla’s root folder go to administrator/templates/khepri/css. In file rounded.css find the style for div.m and add position:relative to it. That’s it for that file. Now open the file general.css and that’s where you’ll need to make several changes. Read more »

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]