Een alternatief form-element: checkbox

Een checkbox, leuk ding, handig vooral, maar qua layout niet echt een prachtexemplaar.

Er bestaan veel javascripts die een checkbox omvormen tot iets toonbaars. Mijn oplossing heeft geen javascript nodig, alleen css. Dus ook het checken en unchecken van de checkbox werkt helemaal op de ‘natuurlijke’ manier.

In deze post ga ik dus dieper in op de mogelijkheid om een mooiere checkbox te maken die past bij jouw website.
Qua code kost het iets meer dan het plaatsen van een normale checkbox, maar het eindresultaat is wat mij betreft belangrijker.
[Read more…]

Full control styling a button

Styling buttons can really be a pain. There is just no way to make sure a button is styled exactly the way you want cross browser.

Recently I was tired with on of my ‘submit’ buttons which was looking just a little bit different in IE7 and IE8. In most cases I am styling an <a>-tag. Those are very easy to manage, but when submitting a form I don’t want to rely on javascript. And I want the [ENTER]-key to work like normal.

[Read more…]

Fronteer workshops voor visual designers

De browsermarkt is enorm aan het veranderen. Internet Explorer was jarenlang leidend, tegenwoordig zetten browsers als Chrome, Firefox en Opera de toon. Maar ook nieuwe apparaten zoals mobieltjes en iPads maken gebruik van uiterst geavanceerde browsers met goede ondersteuning van nieuwe technieken zoals HTML5 en CSS3.

[Read more…]

Fun with CSS: Background images on images?!

First of all, pardon me for my English, it still needs a lot of work, but as I have some non-dutch people in my contact list, I will write in English from now on.

At this moment there is a big hype around CSS3 and HTML5. But we still have some issue with one of the major browsers: Internet Explorer. As all web developer know, this browser is old fashioned.
With plain css1 and css2.1 a lot is possible.

Today I will show something I recently used at work. To be honest, I never thought of the idea, I have no clue why, but I just did not think of it… Until I actually needed it.

I was creating a bar on the bottom of the browser viewport, and I wanted to make it all as small as possible.

I had an image:


And I had some blue background. Personally I think this is not very beautiful. As not all browsers support rounded corners properly, I created a single image which is big enough to put behind the image. (On the site it is part of a sprite, but for this example I only needed the actual background image)

What I did looks like the following:


Which looks much nicer.. What I did?

img {
    background: url(/img/img-bg.png);
    padding: 12px 11px;
}

Well, how easy is that?

Enjoy!