Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Slide out the form field to the left using CSS Transitition

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #46580
    Audee
    Participant

    Hello,

    I just read an article written by Nick La of WebDesignerWall http://webdesignerwall.com/tutorials/expandable-mobile-search-form

    In the demo page, we see that the form field slides out to the right. I wonder anyone can help to explain me how to slide out the form field to the left, or to the opposite side?

    Thanks in advance!

    #143853
    Kuzyo
    Participant

    here from the source code, after focus input apply another css properties

    /* demo B */
    #demo-b input[type=search] {
    width: 15px;
    padding-left: 10px;
    color: transparent;
    cursor: pointer;
    }
    #demo-b input[type=search]:hover {
    background-color: #fff;
    }
    #demo-b input[type=search]:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
    }
    #demo-b input:-moz-placeholder {
    color: transparent;
    }
    #demo-b input::-webkit-input-placeholder {
    color: transparent;
    }

    #143878
    Audee
    Participant

    what CSS properties to add after the existing one?

    Thank you for your comment!

    #143943
    sadunaresh
    Participant

    <p>http://codepen.io/nareshsadu/pen/adrhA</p>

    <p>see this link, you will easily understand …..</p>

      -moz-transition:all 2s ease;
      -webkit-transition:all 2s ease;
    

    <p>is the trick for sliding animation here…</p>

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.