#13: Converting a Photoshop Mockup: Part Two, Episode Two

In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and "on" states for the tabs. We then create the main content area and footer.

Links from Video:

Comments

  1. User Avatar
    saki
    Permalink to comment#

    Usually i am afraid to try out Css but after seeing your screen cast for 2 to 3 times i am trying to to do Css thankyou for motivating me

  2. User Avatar
    Gabriel Merovingi
    Permalink to comment#

    great movie dude.
    keep up the good work.

  3. User Avatar
    Sam Nicholson
    Permalink to comment#

    Please, how can you centered the unordered list?

  4. User Avatar
    Costel
    Permalink to comment#

    Great tutorials! Thanks for the good work !
    I was wondering on this video, when you used text-indent: -9999px to hide the text, isn’t this a bad practice with search engines? To hide text? I think it’s better not to mention it at all, rather then hide it.
    What do you think?

  5. User Avatar
    Abhilash
    Permalink to comment#

    Costal, The hidden text is revealed properly in place when a bowser is set with image display set to off state..

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag