Latest Articles
Today we're going to build an interactive news box. Courtnie will show you how to code the box, and Roger will show you how to use the scripts to make it shrink and grow when the article is clicked on.
To get started draw yourself a rectangle using the rectangle shape tool - it doesn't matter what the color is. Double click the new shape layer and click on gradient overlay. Click on the gradient bar shown in the window and then on the left color swatch underneath the gradient in the new window - set this to f3f3f3 click on the swatch at the other end of the gradient and set it to ffffff. Now drag the grey color swatch toward the white one till there is only a little white at the top of the box. Now click on stroke, click on the color swatch, and enter the color value e0e0e0; set the stroke size to 1 and the position to inside, then hit OK.
Now draw a second, slightly smaller rectangle inside the first, but make it a bit shorter so that there is room for our Latest Tutorials bar above it. Click on the color swatch of this new shape layer and set it to ffffff. Apply the exact same stroke settings as before to this new layer. Make sure this layer is above the first one and line it up over the other rectangle and ensure that you have an even border on the left, right, and bottom.
Now for the Latest Tutorials Bar. Select the rounded corner shape tool from the shape drop downs on your toolbar and draw a long thin rounded rectangle above the white box. Apply the same gradient settings to this bar but reverse them so that the grey is at the top and the white is at the bottom.
There's your news box... now Courtnie is going to show you how to code this box using HTML and CSS.
|
Before we begin to code our Newsbox we need to cut the image into smaller pieces. This is so the box can grow to any size without having to make new images every time. I have cut Andrea's box into seven small pieces:
The images should not be very big. Just crop the corners out as close as you can. As for the backgrounds, the side background only needs to be one pixel in height while the top and bottom backgrounds need to be 1 pixel in width. Here is the markup for your Newsbox it will be repeated below in Roger's article with the added functionality: |
||||||||||||||||||||||
|
<div style="width: 460px; padding: 0; margin: 0;"> |
||||||||||||||||||||||
|
Roger will now show you how to make your Newsbox work! |
||||||||||||||||||||||
|
Let's take the cool Newsbox that Andrea designed and Courtnie coded and apply some functionality to the news items. We will make it so that the news titles are clickable title bars that will expand and collapse your full news content. First, we will need you to download the following javascript package containing 3 javascript libraries: Download Newsbox Library (newsbox.js, prototype.js and effects.js) After you have downloaded this library, extract the contents to the same folder that your html document is in. The HTML <HEAD> |
|
<script type="text/javascript" src="prototype.js"></script>
|
|
The Newsbox Template |
|
<div style="width: 460px; padding: 0; margin: 0;"> |
|
The Newsbox Item |
|
<div class="newsItem">
|
|
The Newsbox Library Lastly, in order to get your newsbox collapsing and expanding, you will need to include the following just before the closing BODY tag. |
|
<script type="text/javascript">newsBox = new newsBox({'bg':'#f7f7f7','fg':'#000000','link':'#0000cc','altbg':'#ffffff','altfg':'#000000' |
|
In the above code, there are several settings available for background color, font color, and link color. The first 3 settings (bg,fg,link) affect the odd rows and the last 3 settings (altbg,altfg,altlink) affect the even or alternating rows. Just enter in new RGB hexadecimal codes to modify the look and feel of your Newsbox. That's it! Happy Coding! Download all of the files from this tutorial for a fully functional Newsbox! » |
