Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Tabs & Accordion >> CSS3 Tabs System


Code Snippet </> Info


Snippet Name: CSS3 Tabs System

Description: Add a nifty CSS3 Tabs System to your web page.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: Wagner

Last Modified: 2015-08-26 22:50:38

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Tabs System - Pure CSS</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <style> /* Begin CSS3 Tabs System */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Wagner : https://developer.mozilla.org/en-US/profiles/Wagner : Creative Commons License == */ /* General style */ @font-face { font-family:'PT Sans'; font-style:normal; font-weight:400; src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/jT2lqyNaAnqXRFXo-jxQevY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } html {height:100%;font-size:10px;line-height:1;} body {position:relative;overflow-x:hidden;height:100%;color:#003955;background:#fafafa;font:normal 1.5em/1 "PT Sans", Arial, sans-serif;} a,a:link,a:active,a:focus {position:relative;margin:-.1em;padding:.1em;color:#003955;text-decoration:none;border-bottom:#003955 1px solid;} img {max-height:100%;max-width:100%;} h1 {font-size:2em;} h3 {font-size:1.3em;} p {padding:1em;} main {max-width:65%; /* IE */ display:block;width:65%;margin:1em auto;} /* The tab system */ .tabs {width:100%;margin:0 auto;overflow:hidden;height:300px;position:relative;border:rgba(0,83,159,.1) 1px solid;} .tabs img {display:block;margin:.5em 0;max-height:170px;} .tabs input[type="radio"][name="tab"] {display:none;} .tabs label[for*="tab"] {display:block;float:left;font-size:1.2em;height:50px;line-height:40px;padding:.3em 0;cursor:pointer;width:25%;text-align:center;transition:background ease-in-out .3s;position:relative;} label[for*="tab"]::after {content:"";width:0;height:0;border-top:10px solid #00539f;border-bottom:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;position:absolute;bottom:-20px;left:50%;margin-left: -10px;opacity:0;transition:opacity ease-in-out .3s;} .tabs input[type="radio"][name="tab"]:checked + label {background-color:#00539f;color:#fff;z-index:9999;} .tabs input[type="radio"][name="tab"]:checked + label::after {opacity:1;} .tabs .tab-content {box-shadow:#00539f 0 1px 0;opacity:0;top:3em;padding:1em;position:absolute;font-size:1.1em;width:100%;height:100%;transition:opacity ease-in-out .3s;} .tabs .content-scroll {height:100%;overflow-y:scroll;} .tabs input[type="radio"][name="tab"]:checked + label + .tab-content {opacity:1;z-index:999;} .video-wrapper {position:relative;height:0;width:0;padding:13% 30%;display:block;margin:0 auto;} .video-wrapper iframe {position:absolute;top:0;left:0;width:100%;height:100%;} /* Internet explorer */ .ie {display:none;} </style> <style> /* not part of the code below */ body{font-family:arial, verdana, tahoma;color:#000;} .notes{font-family:arial, verdana, tahoma;color:#000;text-align:center;} </style> </head> <body> <main class="main-width" role="main"> <p>This is a demo of a pure CSS tab system.</p> <section class="tabs"> <input id="tab1" type="radio" checked="true" name="tab"> <label for="tab1"> <i class="fa fa-home"></i> </label> <div class="tab-content"><p>Here displays a pure CSS tabs system demo</p></div> <input id="tab2" type="radio" name="tab"> <label for="tab2"><i class="fa fa-image"></i></label> <div class="tab-content"> <p>A tab with an image <img src="http://i.imgur.com/Ez5ovPi.jpg"></p> </div> <input id="tab3" type="radio" name="tab"> <label for="tab3"> <i class="fa fa-file-text"></i> </label> <div class="tab-content"> <p class="content-scroll"> A tab with lots of text content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius varius quam, at placerat ipsum dapibus vitae. In ut rhoncus arcu, sit amet venenatis lectus. Nullam urna massa, dapibus a nulla at, aliquam vehicula sapien. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent consectetur vulputate mauris, id vehicula enim posuere id. Proin dapibus interdum erat, sit amet rutrum tortor volutpat ac. Phasellus a sem urna. Phasellus pulvinar semper velit, vel accumsan eros blandit nec. Aenean vel magna orci. Cras nibh nisi, auctor vehicula congue eget, pharetra elementum quam. Fusce in elit bibendum, feugiat dui at, sollicitudin sapien. Donec ultricies felis urna, non condimentum lacus ullamcorper at. Nulla tincidunt, tortor et bibendum ornare, justo arcu condimentum lectus, et aliquam odio mauris a neque. Integer est felis, dapibus et tempor vel, maximus ut arcu. Morbi vel aliquet nibh. Etiam augue lacus, sollicitudin ut ultrices ut, finibus vitae arcu. Quisque tristique nulla ut sapien scelerisque, a pulvinar arcu bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed accumsan ultrices tellus ut pellentesque. Sed id pharetra dolor. Integer erat sem, commodo at elementum sed, mattis ut elit. Etiam eu lorem ut metus elementum hendrerit ac in augue. Quisque condimentum, ligula blandit pulvinar sodales, justo diam vehicula sem, sit amet fringilla ante nulla vitae nibh. Suspendisse lacus metus, porttitor sed urna quis, aliquam elementum tortor. Proin scelerisque diam nisi, tristique dapibus enim auctor venenatis. Cras dignissim porttitor scelerisque. Quisque venenatis, tellus sed faucibus viverra, eros diam gravida justo, non luctus urna ligula ut nisl. Integer tincidunt porttitor dignissim. Mauris varius sapien tellus, et laoreet velit condimentum sed. Praesent pharetra suscipit lectus vel dignissim. Quisque aliquam mi eget tellus gravida vehicula. Nulla facilisi. Ut a suscipit dolor, ut placerat felis. Quisque at pulvinar nulla, et egestas sem. Suspendisse sollicitudin diam ex, non rhoncus mauris iaculis eu. Praesent tincidunt est arcu, porta cursus nibh euismod ac. Vivamus in congue justo. Pellentesque lorem ligula, vestibulum sit amet metus sagittis, bibendum molestie elit. Pellentesque in placerat turpis, quis lacinia velit. Morbi auctor justo sit amet felis dapibus, at volutpat nisl volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tortor turpis, ultricies a placerat sed, porttitor in nulla. Morbi sed lacus ante. Curabitur dignissim nec felis in euismod. Integer vitae semper turpis, et molestie dolor. Phasellus varius rutrum purus, eu pretium augue tempus et. Quisque fermentum varius risus. Mauris luctus odio nec elit semper, a auctor nisl pharetra. Duis eu nibh a massa lacinia accumsan at at nunc. Praesent porta libero nunc, sit amet maximus dolor maximus sed. Sed sed convallis enim, vel ultricies orci. Maecenas risus dui, luctus eu lacus vel, tincidunt viverra orci. Donec imperdiet tempor mauris nec dapibus. </p> </div> <input id="tab4" type="radio" name="tab"> <label for="tab4"> <i class="fa fa-youtube"></i> </label> <div class="tab-content"> <div class="video-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/QnCs2nsZGRk"></iframe> <object src=""></object> </div> </div> </section> </main> <br /><br /> <div class="notes">Click the tab icons above to preview the effect.</div> <br /><br /> <div class="notes"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_257.html">CSS3 Tabs System Code Snippet</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library