Photoshop Question posted in
The official user guide can be found here.

Image Hierarchy – Photoshop

Currently learning html by way of coding cool sites I find online. I’m having some trouble figuring out how this site http://sociali.st uses one image for the iPhone case and another image for the iPhone screen (think clipping masks in photoshop). Can’t seem to get my head around it?

Here’s my code

<div class="row">
      <div class="small-6 columns">
        <h1 class="value-prop">Organize the <br>things you love.</h1>
      </div>
      <div class="small-6 columns">
        <div class="phone">
          <img src="http://sociali.st/wp-content/themes/socialist/library
                         /images/views/home/home-introduction-screen.png">
        </div>
      </div>
    </div>

CSS

.phone {        
    width: 359px;
    height: 935px;
    background-image: url('http://sociali.st/wp-content/themes/socialist/
                           library/images/components/devices/device-iphone
                           [email protected]?cache=290611593');
    background-size: 100% 100%;
}
Tags:

2

Answers


  1. 0

    There are many ways to do this, the easiest is probably using absolute positioning:

    <div class="row">
      <div class="small-6 columns">
        <h1 class="value-prop">Organize the <br>things you love.</h1>
      </div>
      <div class="small-6 columns">
        <div class="phone">
          <img src="http://sociali.st/wp-content/themes/socialist/library/images/views/home/home-introduction-screen.png">
        </div>
      </div>
    </div>

    And css:

    .phone {
    position:relative;
    width: 359px;
    height: 935px;
    background-image: url('http://sociali.st/wp-content/themes/socialist/library/images/components/devices/[email protected]?cache=290611593');
    background-size: 100% 100%;
}
.phone img{
    top:130px;
    position:absolute;
    width:285px;
    left:25px;
}

    I added position:relative; to .phone because we are using the position:absolute; method.
    Then, I just placed it to look like the screen.

    Login or Signup to reply.
  2. 0

    The magic is done using absolute positioning and transparent backgrounds, more like photoshop layers.

    Check this:
    http://codepen.io/anon/pen/dGxhy

    • Use position: relative in the .phone so we can position its child elements based on its own top/left.
    • The #phone-content is already above the phone chrome due to the standard stacking order.
    • Then using the position, top and left properties we can move the content layer to match the desired placeholder

    Raed some articles (example http://css-tricks.com/almanac/properties/p/position/) related to the css position attributes and it will be very clear to you 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search