Create a promotional advertising poster using some cool CSS techniques to structure this up such as element positioning, transparency, embedding fonts, element stack order and more.
| CSS Promo Ad (88MB) ……… (Right Click – Save As) |
| Download the Adobe Dreamweaver CS5 HTML5 Pack to help you easily create HTML5 pages and CSS3 styles… |
| Step 1 |
| Create a new HTML document along with a new CSS file and save them. Create a div (division) for the background image, use 10 pixels over & 10 pixels down.
#divBackground { |
| Step 2 |
| Use a Wrapper and to contain all your content, this div will also serve as the “containing block” that will contain the other position elements. If we emit the relative position of the containing block the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent which in this case is the #divWrapper. If the parent element does have a position property then it uses that element as the 0 – 0 point.
Set the side margins to “auto” so they become equal and automatically fill the remaining horizontal space, giving us one centered box and equal margins on either side. #divWrapper { |
| Step 3 |
| Create a division (#divAd) that will hold the first block which will be transparent and an absolute position, use the Top & Left properties to define how far from the top or the left edge of the page you want the edges of the container to appear.
Using absolute position will remove the element from its normal document flow and will position it absolutely relative to the containing block. The word absolute means that the coordinates are absolute relative to the boundaries of the containing block. #divAd { |
| Step 4 |
| Create a division (#divContent) that will hold the second block with an absolute position, use the Top & Left properties to define how far from the top or the left edge of the page you want the edges of the container to appear.
The Content division will contain the image and text. We are using a descendant selector to define the placement of the image inside #divContent. #divContent { |
| Step 5 |
| Because I want to use a font other than a Web Safe one I am going to embed a font of my choice. We’ll use the @font-face attribute and this must be done for each individual font you wish to use. Just upload the font file you want to use to your server – making sure that you’re not violating any copyright rules – then embed it.
@font-face attribute was originally created in CSS 2 and but is appearing more in CSS 3 standards. @font-face { #divParisText { |
| Step 6 |
| Create a Footer to close up the bottom space of the ad.
#divFooter { |
| Step 7 |
| If planning to change the stack order of the two divisions, #divAd and #divContent use the z-index. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order, z-index:1, z-index: 2. To manually define a priority, set the z-index value, the larger the value, the higher the priority the element will have. If we do not specify any z-index values then HTML elements that — appear later in the source code — than others will have a higher priority by default. In our example #divContent appears later in the source code than #divAd so by default the first will appear on top of the stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) and both #divAd and #divContent are positioned elements. |
| Promo Ad |
 |
No related posts.
Very detailed and cool presentation. It does not matter if you are a pro or a self starter, this is the site that will guide you to your own creativity on the internet and computer world. Thanks to 3rd Element.