Ajax Loader
×

Pure CSS3 HTML5 Contact Form Without Images

The idea was pretty simple I was playing around with css3 and I wanted to create a pure HTML5 / CSS3 contact form, without using any images. You can see the result here. 

The trick : I used some gradients, some :before and :after pseudo-classes and an icon font to add the little pictos to the labels. This is an experiment, it should not be used on live websites since it has some browser compatibility issues and uses code that's still in the W3C working draft. 

I also used some of the new HTML5 form goodness (placeholder, new input types like mail, etc). 
If you are interrested in how it's done you can go and take a look on the tut on onextrapixel.

the demo has letters instead of images because of the fonticon embeded. You can see a demo that works here  

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 HTML5 Contact Form Without Images

    CSSDeck G+