Multi
Multi
CSS-Only 3-part maintitle; [√]No javascript required!
Topic Started: Saturday, 2. June 2012, 14:29 (1,048 Views)
Meta Ing
Member Avatar
Level 2
Note - A general understanding of CSS is recommended for this tutorial.

A three-part maintitle is one which is, as its name suggests, separated into three different parts. Generally, this consists of a non-repeating image on either the left or right side, followed by a horizontally repeating section in the middle, and finished with another non-repeating image on the opposite side. This allows for a maintitle that will dynamically shrink or grow with the browser window while maintaining its shape - a "fluid" maintitle.

Traditionally, a three-part maintitle is created with some kind of javascript code. While this method works well, it does have a disadvantage - a browser must support javascript and have it enabled in order for the code to work. The method I will be demonstrating eliminates that small setback by creating the same effect using only CSS. (Plus, browser support is decent as it makes use of CSS 2.1 selectors)



Here's a preview: http://z3.invisionfree.com/New_Skin_By_Meta/index.php

*NOTE - Before beginning, please be aware that this method will most likely screw up on maintitles displayed as table-cells. For this reason, I recommend you apply these steps to the div.maintitle rule.

To get started, first create the middle section of the maintitle. This can be a simple background color (as in the following example), or a horizontally repeating image:

Code: Ref 1
 
div.maintitle{
background:#1A3C6F; font-size:12px; text-align:center;
min-height:30px; line-height:30px; padding:0 5px; margin:0;
position:relative; z-index:0;
}


The major component of this rule is in the last line -

Ref 1 - Click to view


Next, create div.maintitle rule(s) with a :before and/or :after pseudo-element These will be used to add the side images: (Take note that shared properties can be placed in one rule)

Code: Ref 2
 
div.maintitle:before,div.maintitle:after {
background:#305285;
position:absolute; z-index:-1; top:0;
}


Code: Ref 3
 
div.maintitle:before{
left:0;
content:url(http://i1.ifrm.com/14421/183/pip/maintitle_l2.png);
}

div.maintitle:after{
left:0;
content:url(http://i1.ifrm.com/14421/183/pip/maintitle_r2.png);
}


Ref 2 - Click to view


Ref 3 - Click to view


Finally, you're done! Click the Edit CSS button, refresh the board page, and see your results. Afterwards, feel free to experiment with additional properties - find what works, what doesn't, see what kind of interesting effects you can create, and see what else you can apply these steps to.
Off
Profile
Quote
Top
 
Steven
Member Avatar
WeDesignTheNet
Nice work Meta Ing! Very detailed and helpful! :)
Steven | Outline Retiree | Ask your Favorite Retiree a Question!
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
I like the idea of using the psuedo-elements. I had no idea adding a link to the content property would work properly. Nice tutorial. (y)
Off
Profile
Quote
Top
 
JiltedTongue
No Avatar
Level 1
Months ago, I tried a 3 part maintitle using css only but it did not work out very well. So, I opted for the javascript version instead. This is great and I cannot wait to implement it.

Thanks so much for sharing and being so thorough.
Edited by JiltedTongue, Monday, 11. June 2012, 20:35.
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Outline Tips & Tricks
A P P R O V E D

Your tutorial has been accepted and your tokens have been added!
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..