SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using CSS for a form

    Hello Everyone! I hope you are having a great morning.

    I have spent the last few weeks learning CSS. I have watched tutorials, read articles and books and I think I am finally understanding how it works. But I have a question about web form graphics and how to fix them so that users can put a cursor in them.

    I am studying on how to use CSS with a login form created in Photoshop that I found on the internet. In order to make it come alive would I use a class such as 'input[type=text]? Is this how web designers work with these types of forms? I've seen several of these types of forms created in Photoshop or Illustrator and I was always confused about how these work.

    Also, does anyone know about any tutorials on this subject?

    BTW, here is a picture of the login form I am trying to work with:
    Attached Images Attached Images

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You'll obviously need to learn the basics of CSS and HTML and Accessibility to create a solid form. The style you have shown isn't difficult.

    See some examples below:

    http://codepen.io/joshnh/pen/21
    http://codepen.io/skat-delayed/pen/snmfD
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi misstheresa2009. Welcome to the forums.

    Unfortunately, Photoshop maketh not the web! It creates pretty pictures that have little to do with anything on the web, because, as you've seen, a form is not a picture. It's better to start from the basic code and then apply styles to that. As kohoutek's examples show, you can create that look with CSS alone, thanks to newer developments in CSS3. You can also use images to an extent, but only in small doses.

    If you Google "CSS3", "form", "jQuery" and perhaps a dose of "sexy" thrown in, you'll find a lot of tutorials online.

  4. #4
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for those links, kohoutek. I checked them out and those forms look really good. I will have to study the code to get a better understanding of how CSS and forms work.


    Best regards,

    misstheresa2009

  5. #5
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi misstheresa2009. Welcome to the forums.

    Unfortunately, Photoshop maketh not the web! It creates pretty pictures that have little to do with anything on the web, because, as you've seen, a form is not a picture. It's better to start from the basic code and then apply styles to that. As kohoutek's examples show, you can create that look with CSS alone, thanks to newer developments in CSS3. You can also use images to an extent, but only in small doses.

    If you Google "CSS3", "form", "jQuery" and perhaps a dose of "sexy" thrown in, you'll find a lot of tutorials online.
    Hello and thank you Ralph.m for that advice. CSS is becoming a pain to learn but I can see it really is useful. I am blown away that so many people are so good at it. I will look online for some tutorials using the keywords you mentioned. I guess I'll start with YouTube.

    Best regards,

    misstheresa2009


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •