Plastic Feel

Screen-shot-2011-11-23-at-6.05.03-pm

4 Responses

  1. Olivier Lacan Olivier Lacan

    HTML & CSS credit card form for an in-house project I'm close to completing.

    I designed this entirely in the browser with the following:
    - Louis Harboe's Credit Card Icon Pack (http://dribbble.com/shots/66316-Credit-Card-Icon-pack)
    - Subtle Pattern's Wave Cut (http://subtlepatterns.com/?p=387)
    - a check mark icon designed by Adam Blair, my designer on this project

    More importantly I wrote some CoffeeScript to automatically detect and highlight the relevant card type (see the opacity on the Visa logo in this shot), and run a Luhn algorithm check to validate the credit card number (hence the checkmark).

    I could have styled the expiration date but apart from relatively invasive JavaScript techniques I don't know of a reliable way to do so with CSS. Even if there was and I wasn't a bit lazy, I tend to refrain from trying to change crucial browser-specific interface elements like selects. I'm weary of breaking familiarity, especially on such an important form for the app.

    I'd like to know what you guys think of using dropdowns for expiration month and years. It seems much more error-proof than what I commonly see: two input fields with a two-character limit.

    I'm planning on open-sourcing the HTML and CoffeeScript code later in the week since it was a bit tricky to find something similar when I looked around before building this.

    PS: first shot ever, hi everybody.

    likes

    over 2 years ago

  2. Luca Degasperi Luca Degasperi

    Welcome to Dribbble! This shot looks awesome! Going with a drop down for the expiration date is a solid choice. Only thing missing is a question mark to explain what CVV is.

    over 2 years ago

  3. Olivier Lacan Olivier Lacan

    Good point Luca, I'll make that a tooltip with a little schematic of where to find the CVV then.

    over 2 years ago

  4. Olivier Lacan Olivier Lacan

    @Drew Barontini Rebound me ;-)

    8 months ago

keyboard shortcuts: previous shot next shot L or F like