The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

#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:


  1. 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. Gabriel Merovingi
    Permalink to comment#

    great movie dude.
    keep up the good work.

  3. Sam Nicholson
    Permalink to comment#

    Please, how can you centered the unordered list?

  4. 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. 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..

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed