Breadcrumbs

Content Box Using CSS and Photoshop

Author
Daniel Malmqvist
Date
Mon 28 Apr 2008 at 23:46

Today we are going to create a simple and stylish content box using CSS and Adobe Photoshop! Many people don't realise the possibilities of combining Photoshop and CSS. So today we are going to make a basic content box using CSS and then style it using Photoshop! You ready? Great, let's get this thing going!

CSS

We will start off with the HTML for our box:

Code: XHTML

<div id="content">
    <h1>Your Header</h1>
    <p>
        Your text goes here.
    </p>
</div>

Now, if you save this and look at it, it looks pretty ugly doesn't it? Well let's style it with some CSS then:

Code: CSS

div#content {
    background: #FFF;
    border: 1px solid #000;
    margin: 2px;
    width: 400px;
}
div#content h1 {
    border-bottom: 3px solid #980A0A;
    font-family: Verdana;
    font-size: 20px;
    font-weight: normal;
    margin: 3px 3px 5px 3px;
    padding: 1px 1px 1px 22px;
}
div#content p {    
    color: #000;
    font-family: Verdana;
    font-size: 13px;
    margin: 10px 10px 10px 10px;
    padding: 5px 5px 5px 5px;
}
div#content p:first-letter {
    color: #980A0A;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 3px 3px 5px;
}

If we have a look, the content box looks okay - a bit plain - and the padding looks a tad much on the left side of the header (this is where we will fit the image in the next part). How do we fix this? Well, this is where Photoshop comes into the picture!

Photoshop

Open up Photoshop. Create a new file with a width of 20px and a height of 20px. Remember to make sure that your content box background is the same as the one in the image. For the header, I'm going to use Lowter's logo, but you can use whatever image you would like.

Next, create a new layer. Right click on your new layer and click "Blending Options" and then "Stroke", using these settings:

Size: 1px, Position: inside, Blend Mode: normal, Opacity: 100, Fill Type: colour

Now, I am going to use a dark green for the stroke because the arrow itself is green. I suggest that you use a darker colour than the colour of your icon; in my opinion, it gives the best result.

Next, let's make it look even better! Grab the "Gradient Tool" and make sure you use these settings:

Gradient: white to clear, Mode: normal, Opacity: 100

Create a new layer. Then, right click on the thumbnail of your layer with the icon on it. You should have the old icon selected; so then go back to your newest layer and, with the "Gradient Tool", drag from the top-left corner to about the middle of your icon. Now you have a pretty nice shine on your icon. To make it look even better, lower the opacity to around 85%.

We're done with the header image, so let's see how it looks. Save your image as "header_icon.png" and then add this line to your <h1> CSS code:

Code: CSS

background: url(header_icon.png) no-repeat;

There, now have a look at your header, looks pretty nice doesn't it? You can use the same technique to style other areas of your CSS box, imposing images in the background to spice things up. I did this for the first letters of each paragraph and here is my final result:

Final result of this tutorial

Not too shabby and with more work it is very easy to create stylish content boxes using CSS and Photoshop!

Tags: