| ZomgStuff |
01-02-2008 10:00 PM |
Spice up images - create image watermark borders
With this you can change this regular image
https://vborg.vbsupport.ru/external/2008/01/49.jpg
into something like this without actually editing the image itself
https://vborg.vbsupport.ru/external/2008/01/50.jpg
First of all you will need to download the different images here.
Then open up a blank page in notepad, and we're first going set up some style definitions.
Comments are inside each rule.
HTML Code:
<style type="text/css">
DIV.image
{
width: 675px;
margin: 0 auto;
margin-bottom: 40px;
clear: both;
/*This creates the bigger-picture frame/location where we will put all of our elements */
}
DIV.image Div.TopBar
{
height: 50px;
background-image: url( 'topbar.png' );
background-repeat: repeat-x;
float: left;
/*This repeats the topbar over and over at the top to create a bar. The image itself is actually a very small vertical line */
}
DIV.image Div.TopBarEnd
{
height: 50px;
width: 50px;
background-image: url( 'topbar_end.png' );
background-repeat: repeat-x;
float: left;
/*This is the curly ending for the top left corner bar*/
}
DIV.BottomBar
{
clear: both;
position: relative;
top: 350px;
height: 50px;
/*This sets up the very bottom bar */
}
DIV.image Div.Title
{
display: inline;
padding-left: 20px;
padding-top: 2px;
background-repeat: no-repeat;
height: 16px;
vertical-align: bottom;
padding-right: 8px;
color: #7a0;
/*This sets up the properties for the text in the top left*/
}
DIV.BottomBarEnd
{
float: right;
width: 50px;
height: 50px;
background-image: url( 'bar_bottom_end.png' );
background-repeat: no-repeat;
/*This is actually the very bottom right corner curly piece */
}
DIV.BottomEndLeftInfo
{
float: left;
width: 50px;
height: 50px;
background-image: url( 'bar_bottom_end_l.png' );
background-repeat: no-repeat;
/* This is the ending curly piece in the bottom left corner */
}
DIV.BottomLeftInfo
{
float: left;
background-image: url( 'bar_x.png' );
background-repeat: repeat-x;
height: 50px;
padding-top: 30px;
padding-left: 8px;
/*This repeats the bottom left bar over and over at the top to create a bar. The image itself is actually a very small vertical line */
}
</style>
Now here is the actual code. What happens is that we make the picture the background, and we place the borders on it.
HTML Code:
<div class="image">
<div style="width: 575px; height: 450px; background-image: url('2.jpg'); background-repeat: no-repeat;">
<div class="TopBar">
<div style="padding: 5px; white-space: nowrap;">
<div class="Title">Posted By David hasselhoff</div>
</div>
</div>
<div class="TopBarEnd"> </div>
<div style="position: relative; top: -75px;">
</div>
<div class="BottomBar">
<div class="BottomBarEnd"></div>
<div class="BottomLeftInfo">www.ZomgStuff.net</div>
<div class="BottomEndLeftInfo"> </div>
</div>
</div>
|
More Information