In this screencast we largely deal with the orange "Photostar" the dominates the footer.

We make the star in a separate file in Photoshop, so we can make it the correct size the web needs, not what makes the most sense in the main Photoshop file. We make it bigger than it is on the web so than we can shrink it down and have it look super sharp on retina displays. Yep, perhaps a bandwidth concern in how it's sending too much data to a lot of devices that don't need it - but hey we're already doing very good with how few images are used in this design it's a net gain anyway and we can revisit how this is done at any time.

We finish up by applying some basic style to the link lists, floating half of them to the left and half of them to the right (with right text alignment).

Comments

  1. User Avatar
    MarkV
    Permalink to comment#

    Awesome as always Chris, just a suggestion regarding your image locations etc. Why not put the path in a variable and then you can swap it out when it goes live? ie

    $image-path: ('../images/');
    
    .selector {
     background-image: url($image-path + "imagename.png");  // Where imagename.png is the name of you image.
    }
    

    You could do this with all your file paths.

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