Tab Styles Inspiration

A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.
TabStylesInspiration

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today we’d like to share a couple of tab styles with you. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.

For the demo we’ve used a flexbox layout so make sure you view it with a modern browser.

The icons in most of the tabs are from the fantastic Elegant Themes Line Icon Set and we’ve used the Icomoon app to create our custom icon font.

For the tab functionality we’ve used the Blueprint Responsive Full Width Tabs and adjusted it for our needs.

The main common tab style for all tabs can be found in tabs.css and all individual styles are in tabstyles.css

Take a look at some of the examples:

Tab-Style-Inspiration04

Tab-Style-Inspiration03

Tab-Style-Inspiration02

Tab-Style-Inspiration01

There are a couple of example media queries and fallbacks that can be customized. We’ve opted for showing icons only on smaller screens (see the Blueprint) or a horizontal stack where it makes sense.

We hope you enjoy these styles and get inspired 🙂

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 79

Comments are closed.
  1. Wonderful as always!
    Mary Lou is teaching us the grammar, the vocabulary and the musical notes!
    Bravo!
    Lets write the songs, the poems and the future… now.
    Without you and Pedro my work won’t be the same.
    Muchas gracias

  2. Beautiful! Love the circular versions with animated borders. Going to play around with these next week!

  3. Great stuff Mary.

    I tried contacting you through the contact form … is it possible to have a quick chat over email.
    W.

  4. Mary Lou

    You are a serious source of inspiration for me. Whenever I just need a creative shot in the arm I look at your stuff!

  5. Hi, thanks for the wonderful tab menu 🙂
    When I try to add more than 5 tabs it’s not working correctly, the tab-current class applied to third tab by default.
    Do I need to make any changes in JS files? Waiting for your reply.

    Thank you

  6. Great jobs. I lve that tabs but i test it on IE9 and most of your design are broken. It’s a pity to forgot IE9 support. At least think of a substitute style.

  7. One of the reasons i started to love web is you Mary Lou!
    Any chance there could be a fade between the tabs? Thanks!

  8. Hi !

    First of all, thank you very much for all your amazing work.

    I have a question, and despite my research, I can’t find the answer :
    I would like to know if it’s possible to link to a specific tab. For example, I would to open the tab 4 directly when I enter this link : http://tympanus.net/Development/TabStylesInspiration/#section-bar-4, but it doesn’t work. Is there a way to do it ?
    Or is it possible to open the page on a current or active tab that would not be the first tab ?

    Thank you very much for your answer.
    (And sorry for my bad english…)

  9. how to link directly to specific tab ? something like anchor. Im trying to link from drop down menu directly to tab. Please help…

    • I have the same question. I need to work with drop down tabs but the next tab load other contet. Please help!

    • Did any find a solution or post how to link to a tab from another page. I am also very interested in this solution.

      Thank You

    • Try changing the 0 in line 32 in cbpFWTabs1.js:
      start: 0

      to a different number. If you have five tabs, they are numbered 0, 1…4. So if you want it to open on the second tab, then you want:
      start: 1

      However, this means you will need a different cbpFWTabs1.js file for each page that opens with a different tab, unless someone can find a more elegant solution.

  10. Outstanding! Very nicely done! My site will be much better because of your code and beautiful designs! I am learning a lot from you! Thank you very much. Hope someday I will inspire others too.

  11. I love it! Here is my question: How to make only three ( e.g. home, deals, and upload ) items in the menu?