Breadcrumbs
Breadcrumb AddThis
FlexCSS™ FlexHeads™
What are FlexHeads™?
FlexHeads™ are stylized bars for headings or other horizontal content which needs emphasis. These versatile blocks come in three sizes, support icons, include classes to remove the icon, collapse the icon area, and use custom icons with built-in rollovers. Read Try It Out below to see a quick sample.
<div class="flexhead">
<div class="headericon"><div></div></div>
<h3 class="headerbody">ENTER HEADING</h3>
</div>
- flexhead → class declaring object is a FlexHead
- hs40 hs50 hs60 → the three FlexHead sizes
- xhicon → removes the default "built-in" header icon
- smallhead → collapses the icon portion of the header
- fade → Uses an image on the right end which fades
- rollover → provides hover effect to icon
- nohead → built-in style that removes styling
The Snippet
The HTML Markup, or snippet, presented on the right is what you will copy-and-paste into your HTML document. Simply add your content where indicated, and it will be attractively presented with no image editing or special coding. An in-depth discussion of the FlexHead™ snippet structure is provided in the FlexCSS™ User Guide. However, this information is not a requirement for using this FlexObject.
Class-Modifiers
Below the Snippet to the right are FlexHead™ class-modifiers. FlexHead™ class discussion is provided in the User Guide with supplemental information found in the FlexCSS™ Knowledgebase including coverage of icon dimensions, rollover icons, and other specifications.
Try It Out
After ensuring you have Installed FlexCSS™, copy-and-paste the snippet into your document and fill in the content area as demonstrated below. FlexHeads™ support dual-coloring the heading text. Include a <span> in the heading to enable this additional styling emphasis. Consider this example:
<div class="flexhead"><div class="headericon"><div></div></div>
<h3 class="headerbody">Welcome to <span>FlexCSS™</span></h3></div>Welcome to FlexCSS™
Continue reading to learn more about how to adjust the appearance of your new FlexBlox™.
FlexHead™ Samples
The following FlexHeads™ are from the FlexCSS™ Styles Bundle. The Online Quick Reference lists all styles provided with the FlexCSS™ Starter Kit and FlexCSS™ Starter Kit with Freedom License versions.
The below samples have the header div preceding the sample.
<div class="flexhead blue-logo hs60">FlexHeads™ Can be Large
<div class="flexhead blueglow-logo hs50 xhicon smallhead">Removing the Icon can be helpful. Smallhead collapses the left end.
Defaults
FlexHeads™ have a default appearance which can be modified through class-modifiers. Reassigning the defaults is discussed in the FlexCSS™ User Guide. Adding class-modifiers to the header div will override the default behavior and apply the style specified. Below are some examples of FlexHeads™.
FlexHeads™ require the header size to be specified anytime you want to override the default. This is a common pitfall for new users of FlexCSS™. If a style is specified, ensure you include one of the following: hs40 hs50 or hs60 in the header div. For a full listing of style names please refer to the FlexCSS™ Quick Reference or User Guide Quick Reference.
Custom Icon and Rollover
Rollover requires a single image with two identical sides. The left portion represents the non-hover side, while the right is used for the hover.
Whether you're using a rollover or static icon, all that is required is that you point to the image with a CSS statement using a class—not an ID. The reason for this is specificity and is explained further in the User Guide. Your CSS statement must use the .headericon div when specifying the image. Consider the following example beginning with the CSS that should point to your image.
.myimage .headericon div {images/red-green-rollover.png 0 0 no-repeat;} Now the header div. Note the use of xhicon when specifying a custom icon or rollover image.
<div class="flexhead blue-logo hs60 myimage xhicon rollover">Rollover Icon
That's it. Point to the image and use two class-modifiers—FlexCSS™ takes care of the rest
Floating Concerns
FlexHeads™ adapt well to floating and can be very useful in floated configurations. If floated, padding should be added to the embedded h3 element. This is a simple CSS statement which could be placed in the <head> of your document between <style> tags:
.headerbody {padding-right: 50px;}
Float & Fade Sample
The following sample uses both a float, and fade. A style="padding-right: 80px;" was added to the <h3> element within the snippet to give the right end some breathing room:
<div class="flexhead black-logo hs40 fade floatleft">FlexCSS™ Floated and Faded
Embeded Content
FlexHeads™ can also be used as containers. Illustrated in the following example are two FlexTabs™ from the FlexCSS™ Styles Bundle. All FlexCSS™ objects have relative positioning applied to their content containers:
FlexHead™ with embedded content
Although FlexTabs™ have not been introduced yet, below is the code for the above FlexHead™
<div class="flexhead black-logo hs60 rollover xhicon pbclogo"><div class="headericon"><div></div></div>
<h3 class="headerbody">FlexHead™ with embedded content
<div style="position: absolute; right: 15px; bottom:4px;">
<div class="flextab arc_steel arc_steel-h floatright" >
<div class="leftside"></div>
<a class="rightside" href="#" style="font-size: 14px;">Inside of FlexHeads™</a>
</div>
<div class="flextab arc_steel arc_steel-h floatright" >
<div class="leftside"></div>
<a class="rightside" href="#" style="font-size: 14px;">FlexTabs™</a>
</div>
</div>
</h3></div>
Below is the CSS for the icon. Remember to always use .headericon div after the class name you choose for your icon. For example, the above FlexHead™ has CSS similar to this:
.hs60.pbclogo .headericon div {background:url(images/logo.png) 0 0 no-repeat; }
Clear Styles
FlexCSS™ has two styles for clearing border images around FlexBlox™ and FlexHeads™. FlexBlox™ uses noborder, while FlexHeads™ use nohead class. These extend flexibility by allowing a style to be cleared, while maintaining consistent spacing and markup. These are also implemented to aid in scripting initiatives. Consider this simple example:
Both Clear Styles are applied to the left FlexCSS™ elements. To emphasize the right-column as the path the customer will upgrade to, the left FlexHead™ and FlexBlox™ have the clear styles applied: noborder and nohead. Although cleared of appearances, both the objects are using the snippets to keep the content spaced evenly.
FlexHead™ Style nohead
FlexHead™ Style blue
Next up, FlexBtns™
The next article discusses FlexBtns™.
FlexCSS™
Portfolio
Portfolio & Gallery
A part of our Portfolio is available: Drop by & check it out!
FlexCSS Promo
FlexCSS™ Bundles
35% off any FlexCSS™ Bundle
