A Set of tabs that adapts to the height of their content when switched, it uses JavaScript as a modifier and is styled with SCSS. The tabs have smo...

A Set of tabs that adapts to the height of their content when switched, it uses JavaScript as a modifier and is styled with SCSS. The tabs have smooth transitions and even an example of a color picking palette that can be useful when building web apps. Created by Codepen user Lewi Hussey.

A useful snippet, this is a lightweight bit of code that allows for the creation of simple CSS table tabs and provides functionality and navigation...

A useful snippet, this is a lightweight bit of code that allows for the creation of simple CSS table tabs and provides functionality and navigation options. It's lightweight and doesn't affect loading times. Uploaded by Codepen user Jay Pick

This is an article on how to make tabs using only CSS. The method used is list with checked pseudo selector but without list or nested div structur...

This is an article on how to make tabs using only CSS. The method used is list with checked pseudo selector but without list or nested div structure. The code is editable on the examples.

A nice looking box featuring several tabs that count on long flat style shadows that interact with JS as you switch them around.

A nice looking box featuring several tabs that count on long flat style shadows that interact with JS as you switch them around.

A snippet for a simple CSS3 table with tabs, a simple creation to implement quickly into test or live websites. The code snippet is lightweight, it...

A snippet for a simple CSS3 table with tabs, a simple creation to implement quickly into test or live websites. The code snippet is lightweight, it does not affect page load and it can provide great functionality for navigation. Some improvement in style will come in handy. It was created by Nikul Lakhani.

TrueTabs is an HTML and CSS code snippet that creates a tabbed content box with animations. Its design is not that beautiful, mainly because of the...

TrueTabs is an HTML and CSS code snippet that creates a tabbed content box with animations. Its design is not that beautiful, mainly because of the dark tones its author used to make it. However, with a bit of time, this development can become a gorgeous and useful creation, perfect for any type of website. Jason Shi created this experiment and uploaded to Codepen for anyone to improve.

A very simple design for a tabbed interface with a light and responsive behaviour, which makes it ideal for use in mobile-oriented projects. The st...

A very simple design for a tabbed interface with a light and responsive behaviour, which makes it ideal for use in mobile-oriented projects. The styling is completely stripped-down, offering a flat look with nothing to get distracted about. Uploaded by CodePen user Stuart Robson.

This attractive set of tabs packs all the content in a straight line and scrolls down or up in order to show the content that corresponds to the se...

This attractive set of tabs packs all the content in a straight line and scrolls down or up in order to show the content that corresponds to the selected element, all with a neat transition between sections. Uploaded to CSSDeck by Azik Samarkandiy.

A very simple, flat-styled set of tabs. They portray a cool bottom-to-top (and viceversa) transition when switching between content tabs, along wit...

A very simple, flat-styled set of tabs. They portray a cool bottom-to-top (and viceversa) transition when switching between content tabs, along with a sober color change to highlight the current selection. Uploaded to CSSDeck by Taufik Nurrohman.

A very basic tabbed interface that keeps all visual complexity behind in favor of a stripped-down, clean look. Smooth transitions mark the change b...

A very basic tabbed interface that keeps all visual complexity behind in favor of a stripped-down, clean look. Smooth transitions mark the change between tabs inside this simple project. Uploaded to CodePen by Po-Ying Chen.

A fork from Luke Rebeiro based on a similar project. Luke added click functionality and nice hover effects to these tabs that resemble of thos...

A fork from Luke Rebeiro based on a similar project. Luke added click functionality and nice hover effects to these tabs that resemble of those from real folders. Elements automatically come to the front when activating them.

An interesting set of tabs that come from the top, instead of being attached to a container. The colorful background and rounded edges provide even...

An interesting set of tabs that come from the top, instead of being attached to a container. The colorful background and rounded edges provide even more glamour to the design. This is a CodePen fork by Allen Sutton based on a very similar project.

A polished set of tabs similar to the ones found on the beloved Chrome browser. The elements feature fresh shadow effects and a subtle overlapping ...

A polished set of tabs similar to the ones found on the beloved Chrome browser. The elements feature fresh shadow effects and a subtle overlapping animation. Created by Berkant Fidan who uploaded the project to CodePen.

A clean set of basic tabs with small animations. It uses no JavaScript in favor of pure CSS, which can be used to give this interface a more comple...

A clean set of basic tabs with small animations. It uses no JavaScript in favor of pure CSS, which can be used to give this interface a more complex look. Created by user skltwn and hosted in CodePen.

Here we have a tab container created with only CSS and Sass. The whole box is responsive, while keeping the same height no matter the size of the s...

Here we have a tab container created with only CSS and Sass. The whole box is responsive, while keeping the same height no matter the size of the screen it is being showcased on. When switching tabs, a subtle fade animation provides a bit of flair to the design.

A clever design for a group of tabs by user goiblas from CodePen. The tabs that are not selected highlight on hover, but unfortunately. This versio...

A clever design for a group of tabs by user goiblas from CodePen. The tabs that are not selected highlight on hover, but unfortunately. This version does not include complete multi-tab functionality when clicking on elements.

This project is able to divide random parts of the content and distribute it through tabs. The boxes change their size depending on the screen size...

This project is able to divide random parts of the content and distribute it through tabs. The boxes change their size depending on the screen size thanks to a neat responsive design. Created by user Greg from CodePen.

A very simplistic set of tabs that count with a responsive design to display content correctly no matter the display size. It was created with HTML...

A very simplistic set of tabs that count with a responsive design to display content correctly no matter the display size. It was created with HTML, CSS and JavaScript by David Witt from CodePen.

A flat-styled example of a tabbed interface, including a nice fade-in when switching content. It features a responsive design that transforms the t...

A flat-styled example of a tabbed interface, including a nice fade-in when switching content. It features a responsive design that transforms the tabs into an accordion when the display size is too small. Uploaded to CodePen by Derek Barnes.

A neat tabbed interface with support for browser history and URLs. It features a simple look with big headers and a non-animated, fast-responding t...

A neat tabbed interface with support for browser history and URLs. It features a simple look with big headers and a non-animated, fast-responding tab interaction. Uploaded to CodePen by user André Giebels.

This is a group of folder tabs very similar to the ones found in Google Chrome. They have a very clean look with shadow effects being applied to th...

This is a group of folder tabs very similar to the ones found in Google Chrome. They have a very clean look with shadow effects being applied to the currently seen tab. Moreover, the design seems to be responsive, which makes it a great choice for handheld devices.

Here we have a multi-tab design inspired by the one seen at Google Play. They feature colorful hover effects and a shadow when tab corners touch ea...

Here we have a multi-tab design inspired by the one seen at Google Play. They feature colorful hover effects and a shadow when tab corners touch each other. It works pretty well for situations when you need to show important amounts of information without taking up too much space.

In this article I will demonstrate how to create full width "browser-like" tabs using pure CSS3 and some HTML5 markup. This article includes whole ...

In this article I will demonstrate how to create full width "browser-like" tabs using pure CSS3 and some HTML5 markup. This article includes whole lot of new CSS properties such as box and text shadows, border radius and CSS gradients.

A nice tool that automates the creation of tab menus which can contain unlimited elements. Some of its features include:-Choose active tabs at star...

A nice tool that automates the creation of tab menus which can contain unlimited elements. Some of its features include:-Choose active tabs at start- TAB key navigation- Tested in all modern browsers

This tutorial by Queness will show us how to create a sliding tab menu with hover effects. When moving the mouse over a non-highlighted option on t...

This tutorial by Queness will show us how to create a sliding tab menu with hover effects. When moving the mouse over a non-highlighted option on the top, the highlight will slide towards the selected element as the bottom will move at the same speed to display the correct information.

Build a neatly animated step-by-step form with the help of this article from the Codrops team. jQuery is used to slide left and right between pages...

Build a neatly animated step-by-step form with the help of this article from the Codrops team. jQuery is used to slide left and right between pages, while verification is performed after each scroll in order to ensure the right information is entered, if it's not the case, the user will be notified.

Tabbed menus are an excellent way to display extensive amounts of information without taking up all the space available. This Tuts Plus article doe...

Tabbed menus are an excellent way to display extensive amounts of information without taking up all the space available. This Tuts Plus article does a great job at showing us how to create one of these tabbed interfaces by taking advantage of CSS and jQuery.

This solid article from Tuts Plus will guide us on the creation of dynamic blogrolls for our website. But, what is a blogroll? It's basically a sma...

This solid article from Tuts Plus will guide us on the creation of dynamic blogrolls for our website. But, what is a blogroll? It's basically a small section, usually placed around the sides of the page, which displays other pieces of content the users might be interested in based on what they are currently seeing.

An extremely smooth set of animated tabs explained thoroughly by the expert Codrops team. The menus use CSS3 for the transitions which come in four...

An extremely smooth set of animated tabs explained thoroughly by the expert Codrops team. The menus use CSS3 for the transitions which come in four different demonstrations, coming from all directions and implementing fades, slides or combinations of both.

This JavaScript converts any set of links connected to content portions into a multi-tab menu, able to allocate an unlimited amount of tabs. The to...

This JavaScript converts any set of links connected to content portions into a multi-tab menu, able to allocate an unlimited amount of tabs. The tool gets rid of any "back to top" links in the section and hides all but the first one at every page load. Addition for "next" and "previous" buttons has been added as well.

This CSS Tricks post has guest Menno van Slooten showing us how to create classy tabs with rounded borders, improving a concept previously explaine...

This CSS Tricks post has guest Menno van Slooten showing us how to create classy tabs with rounded borders, improving a concept previously explained in the website. Apart from getting an attractive shape, it is possible to apply neat effects like gradients, borders and shadows.

A very simple set of tabs created with CSS and a bit of JavaScript. The idea is pretty basic, click on one of the tabs and it will show information...

A very simple set of tabs created with CSS and a bit of JavaScript. The idea is pretty basic, click on one of the tabs and it will show information, click again and it will hide. This creation is fast (given its stripped-down layout) and responsive, making it ideal for mobile devices.

A nice example of the possibilities available with CSS brought to us by CSS Flow in the form of a tabbed menu interface. The widget uses no JavaScr...

A nice example of the possibilities available with CSS brought to us by CSS Flow in the form of a tabbed menu interface. The widget uses no JavaScript in order to function and minimum markup. The design was based on the original PSD created by Aaron Sananes.

Here we have a walkthrough for the creation of animated sliding tabs. When finished, only smalls tabs will show around the sides of the page, but w...

Here we have a walkthrough for the creation of animated sliding tabs. When finished, only smalls tabs will show around the sides of the page, but when hovering, the whole slide will move into the site to display whatever piece of information we put into it. Created by talscudi from The Code Player.

Create responsive flat-styled tabs with pure CSS3. They include a number of animations/transitions for tab switches that smoothen the viewing exper...

Create responsive flat-styled tabs with pure CSS3. They include a number of animations/transitions for tab switches that smoothen the viewing experience really well. As the developer recommends, just play around with it for a while in order to figure out all the little details.