Joe adja az ívet

September 20, 2010

simurai:

umbrUI is a demo of input checkbox elements made with CSS3. There was a request, so I tried. First I thought to create a div with 2 buttons inside, but acutally, when you think about it.. a switch has an on and off state, so why not use a checkbox input element. And as it turnes out, it worked out pretty good.
For the above switches no JavaScript, images or extra markup is needed. Just a normal <input type=”checkbox” /> and custom data attributes to add the Pictos Font icons, like this:
<input type="checkbox" data-icon1="P" data-icon2="v" />
The rest is all CSS3. The main input element is mainly just the black background. Then the :before is used for the left part und the :after for the right one. The Pictos Icons get injected trough content:attr(data-icon-left);. For the 3Dish perspective a transform:rotateY is used, but unfortunately for now, only Safari can render it correctly. Then of course a lot of gradients, box-shadows, text-shadows. To have the on/off states, you can use the pseudo class :checked to give it a different style. A small detail if you look closely.. there is a real reflection of the active blue icon applied with box-reflect.
See the demo (Safari or Chrome).

umbrUI is a demo of input checkbox elements made with CSS3. There was a request, so I tried. First I thought to create a div with 2 buttons inside, but acutally, when you think about it.. a switch has an on and off state, so why not use a checkbox input element. And as it turnes out, it worked out pretty good.

For the above switches no JavaScript, images or extra markup is needed. Just a normal <input type=”checkbox” /> and custom data attributes to add the Pictos Font icons, like this:

<input type="checkbox" data-icon1="P" data-icon2="v" />

The rest is all CSS3. The main input element is mainly just the black background. Then the :before is used for the left part und the :after for the right one. The Pictos Icons get injected trough content:attr(data-icon-left);. For the 3Dish perspective a transform:rotateY is used, but unfortunately for now, only Safari can render it correctly. Then of course a lot of gradients, box-shadows, text-shadows. To have the on/off states, you can use the pseudo class :checked to give it a different style. A small detail if you look closely.. there is a real reflection of the active blue icon applied with box-reflect.

See the demo (Safari or Chrome).