Line25

25 Web Designs With Clever Fixed Header Effects

Read the full post

Web Designers are continuously managing to come up with cool effects from the basic CSS properties available to us. This post showcases some clever uses of CSS to create interested header effects. Some simply fix the header in place at the top of the screen, others collapse the header as the user scrolls and a few exhibit some super cool animated effects that rearrange the header content. Check out each one and give your mouse a stroke to see each effect come to life.

FHOKE

View the website

I Shot Him

View the website

Playground Inc.

View the website

Red Antler

View the website

WebKnit

View the website

Seed Spot

View the website

Grain & Mortar

View the website

Karma

View the website

Ditto

View the website

Manos

View the website

Adhara

View the website

Daniel Filler

View the website

Something Splendid

View the website

Rockaway Relief

View the website

By Association Only

View the website

Kiawah Island Real Estate

View the website

Always Creative

View the website

Engage Interactive

View the website

Steve Zeidner

View the website

Jet Cooper

View the website

Snowbird

View the website

Grand

View the website

Kait Bos

View the website

Heathlife

View the website

Colin Grist

View the website

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.boriskaiser.com Boris Kaiser

    And what about that site: http://www.maerchenhaftes-hessen.de/

  • http://www.boriskaiser.com Boris Kaiser
  • http://www.samwightwick.co.uk Sam Wightwick

    I added a more compact header once the the user gets past the main image to increase screen space. Fits in very well with the examples here

  • http://www.giancarlomarcelli.com Giancarlo

    Awesome list! And as a Torontonian I love how you've included 3 Toronto based design agencies!

  • http://pixeltuner.de Jonathan

    Hi Chris,

    a top design collection! Now, a how-to would be great.

    Best regards!

  • http://designhash.com falz

    Awesome collection!
    Now I have a nice inspiration for another project. =)

  • http://latestarenaanimation.com Best 3D Animation/Web Designing Courses In Chandigarh

    thanks, the best web designs blog.

  • http://talkingsheep.be Samo

    The best is IE Mode from I Shot Him.

  • http://www.ncodetechnologies.com Web Development Company

    I Loved header Design of "Seed Spot". It looks great. We can use such type of header in all types of Websites such as we can use it for Professional pourpose.

  • http://cateca.co.uk cateca

    These are awesome! I love how inspiring they are too. My favourite is Manos – simple and effective.

  • http://www.hellopixels.com Web design Abu dhabi

    Awesome collection..gonna follow it!!!!

  • http://www.jandrmarketing.com/ Website Design in Rhode Island

    Great designs and header effects too!! Love it!!

  • http://gauravarthouse.wordpress.com Alan

    Thanks for providing valuable information.Your Articles regarding "25 Web Designs With Clever Fixed Header Effects" really rocks.Your Articles are much more informative than any other site.

  • http://bloggingwordpress.net/ Liam

    clever uses of CSS to create interested header effects, great, thanks for share!

  • http://www.designcanvas.biz/ Web design

    Professional web design experts know the value of an exceptional website and the importance in using that website to cater to today’s digitally driven customer. For this reason, more and more small businesses that want to compete in the already challenging marketplace are reaching out to professional web designers to help with their online presence.

  • http://bilgirehberim.net kuru iğne sivas

    really great designs… thank you for alot all of them

  • http://dronade.com drone

    Nice one chris, I should try this someday.

  • http://emtheory.net Neil

    Great roundup chris! More then a few canadian websites in this list, its nice to see!

  • http://www.websolutionx.com Patrick Enyia

    Hi Chris,

    I must confess that these collections really kept me wowed! I have been designing sites for over four years now and I have not seen anything like these. I have not seen these type of header animation effect.

    Thanks for pointing these to me. I will have to implement some of the skills learnt in my next design. I promise I will let you know.

    Thanks Chris

  • http://www.iwrahost.com iwrahost

    fine, it is really good site to learn about designing. This post is so much helpful for me to create interesting header effects using CSS. I think this post will be so much useful for all newbies and developers.

  • http://www.softcorp.ca softcorp

    The initial development of responsive web design takes more time. It is usually much easier to create RWD from scratch than to convert an existing site.

  • http://www.adaptainc.com/ Demovik

    Really nice collection of colourful website designs!

  • http://randomsoftsolution.com Randomsoft solution

    Web Designers are continuously managing to come up with cool effects related to <a href="http://www.randomsoftsolution">web design</a>from the basic CSS properties available to us.

  • http://randomsoftsolution.com Randomsoft solution

    Web Designers are continuously managing to come up with cool effects related to <a href="http://www.randomsoftsolution.com"&gt;
    web design</a>from the basic CSS properties available to us.

  • http://randomsoftsolution.com Randomsoft solution

    <a href="http://www.randomsoftsolution.com"&gt;
    web design</a>

  • http://latestarenaanimation.com Best 3D Animation/Web Designing Courses In Chandigarh

    thanks the web designs with clever fixed the designs.
    <a link href="http://www.latestarenaanimation.com/"&gt; 3D Animation|Web Designing Courses In Chandigarh</a>

  • http://webmaster-deals.com/ pink08

    Really nice collection of colourful website designs! You could try http://webmaster-deals.com for more things to help you to become a webmaster

  • http://corporate.yogabowl.com.au Shoutheasken1961

    Interesting. Its really amazing how web designing works.

  • http://netprofitmarketing.com Jared

    Really love the design for Manos site.