All posts tagged “Header”

Awesome jQuery Plugins & Tutorials For Sticky Layer Or Table Header

For jQuery lovers, we have compiled this exclusive collection of 30+ jQuery plugins and tutorials that will help you with creating sticky layers or table header. This will help you when you need to fix either the grid or table header with many rows. With this collection, you can learn how to achieve the same sticky header or menu or section or table or grid header etc.

There are times when you need to fix the header of a page or fix the header within particular section in a page; or even when you need to fix the Top Menu or sidebar menu or layer to be scrollable or floating or fixed. We hope that you find this collection useful for you. What you have to say about this collection? Share with us via comment section below.

Sticky Float

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs.

Fixedheadertable

FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.

Facebook Style Scroll Fixed Header In JQuery

While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.

table fixed header

The fixheadertable plugin is a javascript plugin based on the jQuery library and very inspired by jQuery-UI that provides solutions for representing and manipulating tabular data on a web page.

StickyHeader

Makes table headers stick to the top of the viewport when scrolling down HTML data tables.

jQuery-Stickem

Make items sticky as you scroll, to a point.

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

How to create an animated sticky header, with CSS3 and jQuery

In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page.

Sticky Mojo

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.

jQuery Sticky Header

In this tutorial we will create sticky header. The header is initially on its original place above the content, but as soon we start scrolling down the page, it sticks at the top of the page.

Persistent Headers

This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you.

Sticky Section Headers

JQuery sticky section headers takes a nested list and enables section headings as known from iOS table views.

Create a Sticky Navigation Header Using jQuery Waypoints

In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.

How to Code a Fixed Auto-Hiding Nav Bar with JavaScript

hcSticky is a cross-browser jQuery plugin that makes any element on your page float.

HC-Sticky – Jquery Floating Sticky Plugin

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float.

jQuery Sticky Footer plugin

The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent.

Fixed header and column jQuery Datatables

Uses jQuery datatables to make a responsive datatable with a fixed header and a fixed column.

On Scroll Header Effects

Some inspiration for headers that animate when scrolling the page.

Scroll Activated Fixed Header Animations with jQuery & CSS3

It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

On-Scroll Animated Header

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

jQuery Lockfixed

Allow elements to stick within viewport when scrolling. Toggles position: fixed only after scrolling the viewport. Degrades nicely on mobile and tablet browsers.

Fixed Table of Contents Dropdown Menu with jQuery

A fixed table of contents drop-down menu jQuery plugin.Just change the markup to add more depth to the menus.

jQuery Plugin for Fixed Header Tables

jQuery plugin for tables with fixed headers.FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up.

JQuery Scrollable Table Plugin

This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table.

Scrollable Fixed Header Table

This plugin allows html tables to be scrollable horizontally and vertically while headers are still visible and in tack with the columns.

Spotlight: Constrained Stickies with jQuery

Floating content as a user scrolls through the rest of the page is child’s play. No JavaScript is necessary — you can do it with just plain old CSS. Slap a position: fixed declaration on it and boom!, you have a container that is fixed in a specific location in the page — it’s floating in the page to be more colloquial.

JQuery Fixed Table

jQuery.FixedTable is a jQuery plugin to create a fixed header and columns on a HTML table.

How to create sticky table headers using jQuery

Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

Simple smart sticky navigation bar with jQuery

It’s been a while since I posted tutorial article. In this post, I will show you how to create a smart sticky navigation bar easily with just few lines of Javascript codes, powered by the mighty jQuery.


SmashingApps.com

Google Calendar Header Illustrations by Lotta Nieminen

8e96ea639b8acd9569da041dc5d7ad8aThe new Google Calendar design has just got a little sweeter with these awesome monthly header illustrations designed by Brooklyn based Art Director and Illustrator, Lotta Nieminen. The application is expected to launch during Fall 2014 and looks absolutely beautiful. I've been hoping they would revamp the calendar as other calendar apps are getting better and […]
Inspiration Hut – Everything Art and Design

Make the Most of Your Design with a Hero Header

You’re reading Make the Most of Your Design with a Hero Header, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Design with a Hero Header

One of the biggest trends in web design right now is the use of big images. And not just large, but completely oversized images that seem to come to life on screen. When used at the top of a page, this is often referred to as a hero header. How can you take advantage of […]


Advertise here with BSA


Designmodo

Web Designs with Fixed Header. No Glue Was Used

Everyone has already seen it! Now it’s your turn to check out designs with fixed header – one of the major 2013 trends.
Template Monster Blog

Smart (Auto-Hiding) Website Header & Footer using jQuery [Tutorial]

There are plenty of reasons for using a sticky header navigation in your website. It provides easy access for top-priority links, plus a way back to the homepage from anywhere on the site. However problems may arise when you have a navigation bar which blocks some of the page content.

jquery ui animated header footer autohiding intelligent tutorial

In this tutorial I want to demonstrate how we can build a locking header bar which will auto-hide itself after scrolling down the page. Also when scrolling to the very bottom we will display a small footer which includes many of the same nav links.

This technique can be used in almost any website interface to improve readability and general user experience.

Building the Framework

We need to start out with a basic HTML5 template using a fixed header and a basic content area. For this demo I have included a series of external third party scripts hosted from Google’s CDN. This includes a couple web fonts along with the jQuery and jQuery UI libraries.

<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Auto-Hiding Header Demo Page</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://www.hongkiat.com/favicon.ico"> <link rel="icon" href="http://www.hongkiat.com/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="styles.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Courgette|Leckerli+One"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script> <script type="text/javascript" language="javascript" charset="utf-8" src="autohide.js"></script> </head> 

You may notice we also need a third local JavaScript file named autohide.js. This will provide all the JS codes we need to animate and hide/show the header block.

Let’s take a brief look at the content structure to understand how I have laid out the individual div blocks.

<div id="headwrapper"> <div id="fixedheader"> <header id="top"> <div id="logo"> <!-- Logo Source: http://www.psdgraphics.com/psd/psd-power-button/ --> <h1><a href="index.html"><img src="http://media02.hongkiat.com/smart-header-footers-jquery/power-logo.png" alt="AutoHide Header"></a></h1> <h2>intelligent auto-hide effect</h2> <ul id="rightlinks"> <li><a href="javascript:void(0)">Register</a></li> - <li><a href="javascript:void(0)">Login</a></li> - <li><a href="javascript:void(0)">FAQ/Wiki</a></li> - <li><a href="javascript:void(0)">Support</a></li> </ul> </div> <nav id="topnav"> <ul> <li><a href="javascript:void(0)">Homepage</a></li> <li><a href="javascript:void(0)">About Us</a></li> <li><a href="javascript:void(0)">Publications</a></li> <li><a href="javascript:void(0)">Authors</a></li> <li><a href="javascript:void(0)">Other Projects</a></li> <li><a href="javascript:void(0)">Get In Touch</a></li> </ul> </nav> </header> </div> <!-- /end #fixedheader --> </div> <!-- /end #headwrapper --> 

There are a fairly large number of nested divs in the header area so I will explain the structure first. T

he outermost container #headwrapper is given the limited width 780px and a margin: 0 auto; property in CSS. This will center the entire header on the page. Inside is a div #fixedheader which is actually the main fixed item.

This container needs to use a grey background and be pushed up into the top of the page using negative positioning. As the header animates upwards it will first pull down a bit, and without this container we just see the background behind it.

The internal <header> element is the “official” container which holds both the logo and navbar. You can see this brief pull-down effect in the live demo page.

Base CSS Styles

Aside from the inner content we do not need to learn much else about the HTML. All of the internal content areas are pushed exactly enough pixels to meet edge-to-edge with the header. It is much easier to explain how we can style the layout, beginning with a few CSS resets.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body {background: #a4b1c2; font-family: Tahoma, Arial, sans-serif; font-size: 62.5%; line-height: 1; } ::selection { background: #f2c6dc; color: #111; } ::-moz-selection { background: #f2c6dc; color: #111; } ::-webkit-selection { background: #f2c6dc; color: #111; } br { line-height: 1.95em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } a { color: #7091c7; } a:hover { color: #4e72ad; } 

Our topmost code is a mixed template I put together for this tutorial which includes a few useful style resets. We are adding the <br> tag selector to increase the size of line breaks, and also CSS3 anti-aliasing on rendered text and various highlighted text effects. Another big point is how we are structuring the overall page to center within the layout.

I am using 2 different wrappers for containing the header and the body. This offers an easier solution to separate content and even merge the idea into a full-width layout. The logo sections and top navigation bar are put together to work as a fluid design, even though this particular layout is fixed-width.

/* page structure */ #fixedheader { display: block; position: fixed; top: -35px; padding-top: 25px; margin: 0; height: auto; width: 780px; background: #303030; z-index: 9999; -webkit-box-shadow: 0 -3px 4px 0px #222; -moz-box-shadow: 0 -3px 4px 0px #222; box-shadow: 0 -3px 4px 0px #222; } #pagewrapper { display: block; position: relative; width: 780px; background: #fff; padding: 0; margin: 0 auto; margin-top: 117px; -webkit-box-shadow: 0 3px 7px -1px #222; -moz-box-shadow: 0 3px 7px -1px #222; box-shadow: 0 3px 7px -1px #222; } #headwrapper { display: block; width: 780px; background: #fff; padding: 0; margin: 0 auto; } /* top header */ #top { display: block; position: relative; width: 780px; padding: 0; margin: 0; top: 0; z-index: 9999; background: #303030; border-bottom: 3px solid #414d65; } #logo { display: block; width: 100%; height: 82px; top: 0; padding: 0 12px; background-color: #111; background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#111)); background-image: -webkit-linear-gradient(top, #303030, #111); background-image: -moz-linear-gradient(top, #303030, #111); background-image: -ms-linear-gradient(top, #303030, #111); background-image: -o-linear-gradient(top, #303030, #111); background-image: linear-gradient(top, #303030, #111); } /* navigation bar */ #topnav { display: block; border-top: 1px solid #839aca; background: #485c86; background-image: -webkit-gradient(linear, left top, left bottom, from(#5f739d), to(#485c86)); background-image: -webkit-linear-gradient(top, #5f739d, #485c86); background-image: -moz-linear-gradient(top, #5f739d, #485c86); background-image: -ms-linear-gradient(top, #5f739d, #485c86); background-image: -o-linear-gradient(top, #5f739d, #485c86); background-image: linear-gradient(top, #5f739d, #485c86); height: 32px; } #topnav ul { padding: 0 10px; } #topnav ul li { display: inline; font-size: 1.2em; } #topnav ul li a { display: block; float: left; line-height: 31px; padding: 0 7px; margin-right: 6px; color: #d1dfeb; font-weight: bold; text-decoration: none; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } #topnav ul li a:hover { background: rgba(255,255,255,0.2); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } 

Notice a lot of these codes are using CSS3 properties for gradients and transition effects. It helps to go the extra mile and spice up your design with these features. Most browsers can handle the properties, and the fallback solutions are just natively rendering properties, so it isn’t much of a downgrade.

#toparrow { display: none; width: 130px; height: 130px; position: fixed; bottom: 45px; right: 45px; cursor: pointer; background: url('http://media02.hongkiat.com/smart-header-footers-jquery/scrolltop-arrow.png') 0 0 no-repeat; z-index: 9999; } 

This last block of code targets the top arrow icon I’ve added into the page. This div is fixed onto the right side and will only appear after the header is hidden. This solution allows users to click for an instant jump up to the top of the page. It can be easier than scrolling in most cases.

Animating the Header & Footer

Inside the JS file we are putting together numerous logic statements. It is listening for the window scroll event and firing various functions depending on the circumstances. I have included source comments with each of the if{} statements to help clarify what we are checking. Let’s break it down into three major sections.

$  (document).ready(function(){ var timer; $  (window).scroll(function() { var topdisplay = $  ('#fixedheader').css('top'); var footdisplay = $  ('#fixedfooter ul').css('display'); var scrolltoppx = $  (this).scrollTop(); 

This is the first piece which contains an event listener and some new variable definitions. topdisplay will check the current status of our header’s top property in CSS. We set the default position value at -35px, so in this case the header would be visible. Otherwise we have it hidden, and need to readjust back to -35px via animation.

The second variable footdisplay will check the display property of our footer. This will be needed for the logic of checking whether to display or hide the bottom footer element. Also we will need scrolltoppx which holds a numerical value in pixels of the total distance from the top of the screen. It will update with every user scroll event.

 if(scrolltoppx < 10 && topdisplay != "-35px") { // if we scroll up anywhere from 9px-0px and the header is hidden, // immediately display the header smoothly into the scroll clearTimeout(timer); autoDisplayHeader(); $  ('#toparrow').fadeOut(350); } if(scrolltoppx > 130 && topdisplay == "-35px") { // if we scroll beyond 130px and the header is still displaying, // hide the header after 700ms pause clearTimeout(timer); timer = setTimeout(function() { autoHideHeader(); $  ('#toparrow').fadeIn(450); }, 600); } 

Now here is the first big chunk of logic statements for calling our pre-defined functions.

The first statement checks if the header is not at -35px and we scroll back towards the top area; we need to display the header. We do so by calling a function autoDisplayHeader() which is written a bit later in the JavaScript file.

Similarly if we scroll beyond 130px and the header is still displayed, we need to hide it. This uses a different function named autoHideHeader(). But notice this code is contained inside a JavaScript function setTimeout(). After the user stops scrolling we pause for 600ms and then hide the header, simultaneously displaying the “back to top” arrow.

 if(scrolltoppx + $  (window).height() == getDocHeight()) { // if the current window position + the above space equals the total window height // then the user is at the bottom of the page. // in this case we quickly display the small fixed footer if(footdisplay == 'none') { $  ('#fixedfooter ul').fadeIn(300); } } if(scrolltoppx + $  (window).height() != getDocHeight() && footdisplay == 'block') { // if the user is not at the bottom and our footer is being displayed // we need to hide it until we re-enter the bottom again $  ('#fixedfooter ul').fadeOut(300); } }); $  ('#toparrow').on('click', function() { // when clicking the arrow we are animated immediately to the top $  ("html, body").animate({ scrollTop: "0px" }); }); }); 

These last few statements refer to the footer block.

We are putting together the user’s current placement on the screen added to the rest of the page height. This should equal the full window height, which is provided via a custom function getDocHeight(). This is not my own function but originally written by James Padolsey for the purpose of supporting a greater number of older legacy browsers.

The other logic statement is checking the reverse, and auto-hiding our footer once we scroll away from the bottom.

And finally the last clause is listening for when the user clicks on the #toparrow div. Notice that we are now outside of the scrolling event handler; so these are the only 2 event listeners which trigger some type of response on the page.

All of the custom functions are easy enough to understand with a bit of studying. But I have copied them below in case you are interested.

/** * functions to hide and display the header */ function autoHideHeader(){ $  ('#fixedheader').animate({ top: '-149px', }, 450, 'easeInBack'); $  ('#pagewrapper').animate({ 'margin-top': '3px', }, 450, 'easeInBack'); } function autoDisplayHeader(){ $  ('#fixedheader').animate({ top: '-35px', }, 400, 'easeOutBack'); $  ('#pagewrapper').animate({ 'margin-top': '117px', }, 400, 'easeOutBack'); } /** * cross-browser function to determine full browser height * needed to check when user hits the bottom of the webpage * source: http://james.padolsey.com/javascript/get-document-height-cross-browser/ */ function getDocHeight() { var D = document; return Math.max( Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight) ); } 

In older browsers where JavaScript is disabled there isn’t much of a loss for users. The header navigation will always stay fixed regardless of scrolling distance. So this extra technique just provides a bit of finesse to your website interface. It is also a convenience for the user to have an uncluttered browsing experience.

Be sure and check out my live demo to get a bigger picture of the whole web application.

jquery ui animated header footer autohiding intelligent tutorial

Final Thoughts

I hope this tutorial may provide some useful ideas to web developers. Many of these codes are re-usable with just a few customizations to the CSS. But you should download a copy of my demo project codes to save this working template as a resource.

Additionally if you have any thoughts or questions on the tutorial feel free to share with us in the post discussion area.

    


hongkiat.com

Photoshop Tutorial: How to Make a Stitched Leather Header

We’d like to share with you a Photoshop tutorial on how to create Leather Header in Photoshop.
Template Monster Blog

25 Inspiring Web Designs with Clever Fixed Header Effects

header effectWeb designers are coming with cool and eye-catching effects within their design every day. For your inspiration, here we’re showcasing beautiful and clever use of CSS to create interacting animation effect in website header. Some of these examples are simply fix the header in place at the top of the screen, while others collapse the header as the user scrolls and a few display some super cool animated effects that rearrange the header content. Hope you will find them inspiring. Enjoy!

Inspiring Web Designs with Clever Fixed Header Effects

Rockaway Relief
header effect

By Association Only
header effect

Kiawah Island Real Estate
header effect

Always Creative
header effect

Engage Interactive
header effect

Steve Zeidner
header effect

Jet Cooper
header effect

Snowbird
header effect

Grand
header effect

Kait Bos
header effect

Heathlife
header effect

Colin Grist
header effect

Fhoke
header effect

I Shot Him
header effect

Playground Inc.
header effect

Red Antler
header effect

WebKnit
header effect

Seed Spot
header effect

Grain & Mortar
header effect

Karma
header effect

Ditto
header effect

Manos
header effect

Adhara
header effect

Daniel Filler
header effect

Something Splendid
header effect

Guys, you can buy practice act test prep book here. Now shop here gmat test prep book foundation gmat test questions. To satisfy the loyal customers of our brand we are also offering security+ certification online test prep stores along with SY0-301 practice test classes certification. In addition to OG0-093 practice questions.
Web Design Fact

Unique CSS3 Header Styles for Copyfitting Typography

Unique CSS3 Header Typography Styles tutorial

All of the newer properties emerging from CSS3 specifications have been immensely helpful in constructing more advanced UI designs. Webpages have been seeing a dramatic overhaul in the methods used to build typical layout styles. Notably typography and buttons/form elements are seeing the largest makeover – and with more developers launching open source projects there appears to be no end in sight.

For this tutorial I want to demonstrate how we can build a few sample headings into a basic webpage. I am using mostly CSS3 effects on the top navigation bar, along with the typography in the page. All of these techniques should carry over into the newer standards-compliant web browsers. Plus there are so many various design techniques you may duplicate and apply into any project. Be sure and check out my live demo to get an idea of what we are trying to build!

Live DemoDownload Source Code

Getting Started

I am first creating a simple index.html webpage using the HTML5 doctype. We only need a couple resources for styling, namely a unique stylesheet styles.css along with a few Google web fonts. Many people assume these resources will slow your page load speeds, and while we are requesting a few documents via HTTP it shouldn’t take more than a couple hundred milliseconds over a good connection.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>CSS3 Header Styles Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Rambla:400,700|Kavoon">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Now the page heading and body content is split up using a container class system. The navigation bar should span 100% of the page width, however the inner content maxes at 1050px. This will keep all of our content centered on the page no matter how big the monitor resolution. We keep the header inside an HTML5 nav element for more semantic styles.

<header id="topnav">
  <nav class="wrapper clearfix">
    <h1><a href="#">myWebpage</a></h1>
      <ul>
        <li><a href="#">Home <em>The Frontpage</em></a></li>
        <li><a href="#">About <em>Our Company</em></a></li>
	<li><a href="#">Work <em>Portfolio</em></a></li>
	<li><a href="#">Blog <em>Creative Writing</em></a></li>
	<li><a href="#">Contact <em>Send a Message</em></a></li>
      </ul>
  </nav>
</header>

It is worth pointing out how the heading text appears first in the HTML code, even though it is floated onto the right side of the navigation. Although we could format this to appear as though the heading comes after the navigation, for search engine crawlers we need to ensure that the page title comes first so it is ranked higher on the page. Also as the window gets smaller the responsive styles cause the nav links to drop below the header, so ultimately the heading should come first in the hierarchy.

The inner list item links are separated by text using the em tag. These smaller sub-headings are nice added effects onto a navigation if there is enough room. You can give visitors an extra sense of what is on each page without appearing overly-confrontational.

Inner Body Content

I haven’t included a lot of new content inside the body since we are focusing on typography. But there are 3 unique heading styles pushing from h1-h3 as ranked by importance. Some designers may choose to also include h4 and even h5 if necessary. Copyfitting typography is about working towards a tight-knit placement of content on the page. It’s about planning your written words and fitting other media around this context (images, video, etc).

  <div id="content">
    <h1>Introduction</h1>
    <p>Some typical Arrested Development Lorem Ipsum courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
	
    <p>Chicken fingers… with spicy club sauce. Yeah, like I'm going to take a whiz through this $  5,000 suit. COME ON. I've always been <strong>deeply passionate</strong> about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. Are you at all concerned about an uprising?</p>

    <p>Are you aware of this? Coming soon. Indeed. Oh, yeah. The guy in the $  4,000 suit is holding the elevator for a guy who doesn't make that in three months. COME ON!</p>
	
    <h2>A Secondary Heading*</h2>
    <p><span class="pull-right">Excuse me, do these effectively hide my thunder?</span>My brother wasn't optimistic it could be done, but I didn't take "wasn't optimistic it could be done" for an answer. I need a fake passport, preferably to France... I like the way they think. You're losing blood, aren't you? Probably, my socks are wet.</p>

I think one of the coolest effects you may include is a pull-quote or blockquote design. Note these are two very different ideas and serve very different purposes. In our demo example I am using the CSS-Tricks pull-quote styles to demonstrate how we can duplicate content from areas in the page. These look excellent in blog posts or articles online where you want to emphasize certain phrases or sentences.

Blockquotes are another interesting design mechanism which can look great on almost any page. These do not relate to content within the post but are typically quoting somebody else. The quotes may come from past clients, colleagues, or really anybody to be honest. Codrops recently published an article on building modern block quotes which covers a series of great ideas for web designers.

Maneuvering with CSS3

The HTML markup is very standard and typical of what you would expect on any webpage. The more complex areas of interest reside in the CSS stylesheet where we can apply transition effects and tons of other great CSS3 properties. We should start out by taking a peek at the document page structure.

/* page display */
.wrapper { 
  display: block;
  margin: 0 auto;
  min-width: 480px;
  max-width: 1050px;
}

#topnav {
  display: block;
  position: relative;
  width: 100%;
  height: 66px;
  background: rgba(255,255,255,0.55);
  margin-top: 30px;
  margin-bottom: 45px;
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.35);
  -moz-box-shadow:  1px 2px 4px rgba(0,0,0,0.35);
  box-shadow:  1px 2px 4px rgba(0,0,0,0.35);
}

#container {
  display: block;
  min-width: 480px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

#container #content {
  padding: 11px 16px;
  background: #fffdf8;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

The .wrapper class should be supplied onto any container within another container. So for example our navbar extends the full width of the page, but all the content inside is contained inside a wrapper div. The outer #topnav container is using a slew of CSS3 properties coupled with the rgba() color selector. This is specific to web developers interested in using alpha-transparency within color hues.

We can see this effect not just on the background, but also on the box shadow as well. This effect goes well when using a fixed static navigation which scrolls down the page and follows the visitor.

#topnav nav h1 {
  display: block;
  float: right;
  font-family: 'Kavoon', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 3.0em;
  line-height: 66px;
  margin-bottom: 7px;
  font-weight: bold;
}

#topnav nav h1 a { 
  color: #46382b; 
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
#topnav nav h1 a:hover {
  text-decoration: none;
  color: #645343;
  background: #ebd6c5;
}

The page header is using a series of animated properties as you hover over the anchor link. This is also true of the many navigation items which are also utilizing alpha-transparency. Some older browsers do not support the typical vendor-prefix styles, but there are solutions for all browsers.

The header style fits so nicely because we can fix the navigation bar to a set height, and then use the line-height property for placing text centered vertically. So in this scenario even as we resize the browser window our page logo will always float along the center. Then once the navigation drops down we resize the line-height so everything fits accordingly. CSS3 animation effects just offer a more pleasing frontend experience for the user.

Responsive Trends

Much of the body content is already capable of handling mobile-responsive content. Over the past few years there have been a lot of articles written on responsive web design. Copyfitting your typography for both desktop and mobile platforms is possibly one of the greatest ideas you could follow. This allows anybody to access your information from any device with Internet access.

#topnav nav ul li {
  display: block;
  float: left;
  margin-right: 22px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#topnav nav ul li a {
  display: block;
  font-size: 1.4em;
  line-height: 1.3em;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0px #fff;
  color: rgba(80, 60, 60, 0.5);
  -webkit-transition: color 0.3s linear;
  -moz-transition: color 0.3s linear;
  -ms-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  transition: color 0.3s linear;
}

Notice how I have included transition effects on both the list items and the anchor links. Also we are selecting all the properties which should animate over time, which really isn’t necessary, but it looks fantastic. When the nav drops below the header all the margins and line spacing will re-adjust itself using animated transitions! Of course, only visitors using modern web browsers which support CSS3 transitions will see these effects. But it is worth keeping in regards to a successful user experience.

/* responsive nav */
@media screen and (max-width:770px) {
  #topnav nav ul li {
    margin-right: 15px;
  }
}

@media screen and (max-width:669px) {
  #topnav {
    height: auto;
  }
  
  #topnav nav h1 {
    line-height: 1.5em;
    padding-top: 8px;
  }
  
  #topnav nav ul {
    float: right;
    padding-top: 6px;
    padding-bottom: 9px;
  }
}

I’ve actually setup two different media queries for when the screen hits 2 different areas. First when we drop a bit below 800px then the navigation links remove some of their margins. This contracts the links closer together, saving on space and keeping them from dropping down too quickly. Then after we go below 700px the nav will switch beneath the header and we adjust for new line-height values.

This responsive design could be handled any number of ways. You could choose to simply hide the nav links and hold them tied onto a toggle link for mobile users. I feel this method is nicer for keeping all the typographic styles in point without sacrificing usability. The whole heading area is ripe for unique fitted typography and will certainly be a point of attention to users.

css3 typography styles in header designs preview demo

Live DemoDownload Source Code

Final Thoughts

I hope this tutorial may provide a deeper look into styling webpages using CSS3. Typography is still the #1 most important facet to any layout. The Internet allows people to send digital information across the world in very short bouts of time. Web designers are doing the work of messengers and couriers with some more pleasing aesthetics.

If you like the demo page feel free to download a copy of my source code as well. You may use this code with no licensing as public domain. Feel free to edit and copy these styles for any project, commercial or otherwise. Adding more resources online can provide just one more step for newer designers moving into the field. Additionally if you have any questions or comments please do share with us in the post discussion area.

Design Shack

Design your new Twitter header – with a free PSD for pixel perfection!

Make your Twitter presence look more professional with a customised header: this free PSD template makes it super-easy!


Creative Bloq