in Playground on

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
View demo Download Source

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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

DistortionHoverEffect

WebGL Distortion Hover Effects

MotionTransition_featured

Motion Transition Effect

InteractiveRepulsionEffect_featured

Interactive Repulsion Effect with Three.js

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.

  2. Hi Mary Lou, you doing great job and I adore your work. I have question about this template. Why this template work different on Safari browser. When I am positioned on the tabs in inspect element display: -webkit-flex is disabled. Can you help me about this? Tnx for your attention.

  4. Hi Mary,

    This is Karthikeyan from Chennai, India. Am working as a Web Designer in a MNC Company. After get into this field Web Designing, when ever i get time, i will go through your articles. It’s really amazing and am totally impressed on your effort.

    Keep going. It will be helpful for all the developers around the universe.

    God Bless You. Wish you a Very “Merry Christma”s & “Happy New Year 2015”

  5. Ok, so, as any other wondeful examples on this website i can’t get to make it works for any of them inside wordpress, i tested for days, every ways possible, i enqueue every single script properly, check is they are loaded, and jquery when neede, i can’t get any of these scripts to work inside wordpress, it’s unbelievable how unconvenient this thing is. Maybe i can get a clue on how make it work in wordpress?

  10. Great job and wonderful effort. I love this tab style.

    I was wondering by any chance the content wrap can be extended till the end of a web browser?

  12. Hi, how to do that in every button on the menu was a different color on the bottom?

  13. Has anyone figured out how to link to a tab from an different page. Love the look and feel but I’m not a jquery guy and was hoping someone could share a solution. Thank You.

  14. Great stuff with lots of inspiration, thank you Mary you are really doing great job, keep up the good work. thank u so much.

  15. As someone else mentioned in a previous comment, is there a way to get this working on a WordPress site? i.e. what do I need to wrap the JS file in to get it to work? Would love to integrate this into my theme.

    Thank you!

  16. Hello, congratulations for this wonderful example… I’m changing the icons of the first tab style and it was very easy but I loose the responsive design.

    In desktops and smartphones shows Icons and Texts, but I want it like the original source, desktop Icon and Text, smartphones only shows the icon.

    How can I fix this?

  18. Hi, thanks, its just what Im searching for. Now I try to make this responsible.

  19. Beautiful tabs. I have the same questions as several others:
    1) How to open a page with a given tab selected? Something like: index.php?tab=3
    2) How to get the tab to link to another page, rather than a section within the same page? I tried <a href=”http://xxxxx.php” rel=”nofollow”> and it doesn’t do anything.
    3) How to change the icons on the tabs?

    Thanks!

    • I’m also looking for this solution. Please if anyone knows, share it 🙂 Thanks