Home posted: 1
» Sun Aug 05, 2012 9:24 am
Admin
Hello, this tutorial will learn you how to create a cool blue/white affliate banner just using CSS and HTML.
This will be your end result:
Ofcourse you can change the title and the description.
The affliate banner body
Let's make a cool affliate body, it's easy to do this.
Put this in your css:
CSS Code
This gets you the body of the banner.
To place the banner go to your html page and add this:
Creating the lines background
To make the lines background appear you must create a sort of 'wrap'/holder.
Add this to your css:
CSS Code
This will create the stripes on the background.
You html tags should now be:
This should be your result:
Adding the title
You probably want that nice title do you?
It's easy, put this in your css:
CSS Code
Your tags should now look like this:
Adding the description
Now put this in your css:
CSS Code
Your tags must now look like this:
You're done!
This should be your end result:
This will be your end result:
Ofcourse you can change the title and the description.
The affliate banner body
Let's make a cool affliate body, it's easy to do this.
Put this in your css:
CSS Code
- Code:
.banner-body {
background: url(http://i48.tinypic.com/t8n2aw.png) white;
background-repeat: no-repeat;
background-position: top left;
border-radius: 3px 3px 3px 3px;
border: 1px solid grey;
min-height: 100px;
width: 500px;
}
This gets you the body of the banner.
To place the banner go to your html page and add this:
- Spoiler:
- Code:
<div class="banner-body">
</div>
Creating the lines background
To make the lines background appear you must create a sort of 'wrap'/holder.
Add this to your css:
CSS Code
- Code:
.holder {
background: url(http://i49.tinypic.com/opqqyr.png);
min-height: 100px;
width: 500px;
}
This will create the stripes on the background.
You html tags should now be:
- Spoiler:
- Code:
<div class="banner-body">
<div class="holder">
</div>
</div>
This should be your result:
Adding the title
You probably want that nice title do you?
It's easy, put this in your css:
CSS Code
- Code:
.banner-title {
padding-top: 3px;
padding-left: 4px;
margin-left: 12px;
border-bottom: 1px dashed grey;
color: rgb(84, 73, 250);
font-weight: bold;
font-size: 23px;
text-shadow: 2px 2px 5px #C2C2C2;
filter: dropshadow(color=#C2C2C2, offx=2, offy=2);
}
Your tags should now look like this:
- Spoiler:
- Code:
<div class="banner-body">
<div class="holder">
<div class="banner-title">Webcoders - Free for all!</div>
</div></div>
Adding the description
Now put this in your css:
CSS Code
- Code:
.banner-description {
padding-top: 3px;
padding-left: 4px;
margin-left: 12px;
color: #696969;
font-size: 14px;
text-shadow: 2px 2px 5px #C2C2C2;
filter: dropshadow(color=#C2C2C2, offx=2, offy=2);
}
Your tags must now look like this:
- Spoiler:
- Code:
<div class="banner-body">
<div class="holder">
<div class="banner-title">Webcoders - Free for all!</div>
<div class="banner-description">Webcoders was designed and made to help users creating their website, program or scripts. Crew members of Webcoders have 4 years of expertise in their business. It's our goal to aid you as much as possible by providing clean and easy-to-follow tutorials: at no cost!</div>
</div>
</div>
You're done!
This should be your end result:
Last edited by Admin on Mon Aug 06, 2012 2:58 am; edited 1 time in total
