Tagged with:

Kitty Giraudel

Non-binary accessibility & diversity advocate, frontend developer, author. Real life cat. They/them.


Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 43

Comments are closed.
  1. Super tutorial. I wonder why you use P as “line separator”. Should it be a div or li (in my opinion LI is not totally correct).

  2. Its so exiciting and informative.
    It inspire us to design like this and to think in different ways like you.
    Like it.

    Thanks for inspiring us..

  3. Hi, I would like to use your first login form but I would prefer the right arrow instead of this strange sign in the demo 1… anyone know how to change it ?

  4. In form-2, you are using .form-2 .float:last-of-type, which isn’t actually being applied

    After some research it seems type is the element type first, then matches the class and there are 3 p elements

  5. Well, the form 3 doesn’t work with IE 10, for some odd reason. Do you know why?

  6. I am using the example 1 in a class project and was wondering how to scale it down to view for mobile devices. i.e. tablets and phones. Would someone be able to help me with the CSS? It would be much appreciated!! Thank you in advance!!

  7. i like form in demo 1 and want to use. but that piece of code
    *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    crash all aother borders of site.How can it be use localy