| CSS-Only 3-part maintitle; [√]No javascript required! | |
|---|---|
| Tweet Topic Started: Saturday, 2. June 2012, 14:29 (1,048 Views) | |
| Meta Ing | Saturday, 2. June 2012, 14:29 Post #1 |
|
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:
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)
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 | Saturday, 2. June 2012, 14:38 Post #2 |
![]()
WeDesignTheNet
|
Nice work Meta Ing! Very detailed and helpful!
|
|
Steven | Outline Retiree | Ask your Favorite Retiree a Question! | |
Off
Profile |
Quote Top
|
| Aidan | Saturday, 2. June 2012, 14:56 Post #3 |
![]()
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.
|
Off
Profile |
Quote Top
|
| JiltedTongue | Monday, 11. June 2012, 20:35 Post #4 |
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 | Wednesday, 13. June 2012, 17:10 Post #5 |
![]()
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 » |
| Track Topic · E-mail Topic |
8:12 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi


8:12 PM Jul 10


Outline Live