CeeFourBee

A front end developer and geek with a passion for cycling, video games and coffee

Torch bicycle helmet

05 May

I’m not sure I like this idea. You instinctively look at people in the face, so when a person with a bright white light on their helmet looks at you, you are left dazzled. This leaves me with stars in my eyes while I’m trying to cycle in the dark. I suppose it depends on the brightness of the white light, but whenever it has happened to me it has pissed me off.

Anyway, you can read more about the torch bicycle helmet over at kick starter.

CSS3 breadcrumb

18 Apr
breadcrumb code inside jsfiddle interface

I stumbled across a post by John Rohan on creating triangles in CSS and thought it would be useful for using in CSS only breadcrumbs. Basically borders are drawn by browsers at angles and you can use this to your advantage to draw triangles.

The HTML is fairly standard for a breadcrumb, an ordered list of links. I’ve then used the pseudo  :after selector to add content after each link, which is where I have used the triangle border technique to add the arrows. I have also used ems for sizing, so the breadcrumb should respond well to resizing. Firefox also has a nice transition effect for the hover state; however I’ve binned this in all other browsers because transitions with CSS generated content are not supported by them.

So far every browser I’ve tested, bar IE7, seems to like it. Take a look at the CSS3 breadcrumb on jsfiddle.

Unstoppables

15 Apr

It’s fantastic to see people with disabilities still cycling and giving it everything they’ve got. Inspirational.

Multi element button styles

21 Mar
Screen Shot 2012-03-21 at 20.26.54

I recently encountered an issue with the craziness that is IE6 and 7 not using the values of multiple buttons and instead submitting the inner HTML. IE6 goes one step further into the abyss of despair and sends every button’s inner HTML on the current page with a single click of one button. You can read more about this specific unfriendly IE issue with buttons on Drew McLellen’s blog.

To get around this all buttons were changed to a mixture of links and inputs. Thankfully I’d styled buttons and inputs of type submit to appear the same, but I hadn’t considered links being used as buttons in the project I was working on. This led me to work on a specific set of classes that could be applied to inputs, buttons and links. Creating a standard look and feel for them regardless of their type. This gives you the freedom to use whichever element you need and not worry about it looking out of place. You can even mix and match the elements and they will blend together like milk in coffee.

Continue reading Multi element button styles