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

Building a Product Box using images w/ CSS – Photoshop

I designed a very basic looking box in Photoshop that I would like to use to show product information inside of. It basically consists of a Header, Body and Button (each a separate image) that look like the image below.

How can I use CSS/HTML to piece these together? I just need to show header text in the top box and bullet points in the body area, but not sure how to actually build this from the image files.

I know the HTML will look as such, I am just confused as to how to actually build the box, such as stacking the images and overlaying the button in that position over the body.

<div id="product_box">
    <div id="header">Title Here</div>

    <div id="body">
        <ul>
            <li>Point here</li>
            <li>Point here</li>
            <li>Point here</li>
        </ul>
    </div>

    <div id="button></div>
</div>

enter image description here

Tags:

3

Answers


  1. 0

    Well Have a look at:

    http://jsfiddle.net/2A2Fn/4/

    You don’t have to change your html markup just use css:

    Here is relevant CSS:

    #product_box{
    border:2px solid #bbc;
    border-radius:15px;
    display:block;
    width:50%;
    height:100%;
    position:relative;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    padding:0px; !important
    background: #b5bdc8; /* Old browsers */
    /* Gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

   }
#header{
    background:#aaf;
    width:100%;
    height:50px;
    border:0px;
    border-bottom:1px solid #99b;
    padding-top:15px;
    padding-bottom:15px;
    border-radius:5px;
    background: #b5bdc8; /* Old browsers */
    /* gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

  }
#body{
 padding-bottom:15px;   
}
#button{
    background:#756;
    border:1px solid #645;
    display:block;
    width:150px;
    height:50px;
    border-radius:5px;
    position:absolute;
    bottom:-25px;
    right:33%;
    color:#fff;
    box-shadow:5px 5px 5px rgba(0,0,0,0.4);
    text-align:center;
    font-weight:bolder;
    font-size:15px;
    background: #b5bdc8; /* Old browsers */
    /* Gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
     text-align:center;
     color:#fff;
     font-weight:bold;
}

    And Here is output of that:

    Output

    EDIT

    According to your comment here is updated code:

    http://jsfiddle.net/2A2Fn/5/

    and its output:

    Updated Output

    Hope it helps.

    Login or Signup to reply.
  2. 0

    It can be done using only HTML/CSS.

    Use CSS gradient for it.

    Here is the DEMO

    Login or Signup to reply.
  3. 0

    Seeing your CSS code would help. This is how I would achieve what you want:

    Set a div element to the desired height of the box. Apply a border and border-radius property as desired, probably 2 px border and a radius of 10-15 px.

    Take the header image, and crop it down to 1 pixel wide (for memory conservation). Then set a div element and use this 1pixel wide image as the background, repeat x, but not y. Set the height of the header to the height of the gradient image.

    Then, make another div inside the container div. Take your second gradient image and again reduce it to a 1 pixel width. Set it as the background for this div with repeat-x. You’ll have to set the height of the header div to the difference of the height of the header and the height of the container.

    Your button can then be placed as a link, probably in another div element.

    All this can be coded something like as follows:

    CSS:

    div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}

div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}

div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}

    And the HTML:

    <div class="container">
<div class="header">text here</div>
<div class="content"><div>
<div class="button></div>
</div>

    This should do what you want. You’ll need to specify the button CSS as well which I didn’t do as I’m on mobile right now.

    Hope this helps you!

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

Back To Top
Search