Tabs of different style

In this example below you will see how to do a Tabs of different style with some HTML / CSS and Javascript

Trying out different tab styles.

Thumbnail
This awesome code was written by chilpura, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chilpura ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tabs of different style</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="tilaa"> <!-- wrapper, lisää tilaa alareunaan-->
<h3>1.</h3>
<div class="tab inactive">Koulutuksen kuvaus</div>
<div class="tab active">Valintaperusteet ja pääsykokeet</div>
<div class="tab inactive">Kouvolan seudun ammattiopisto, sosiaali- ja terveys</div>
<div class="content">Tämä on nykyinen toteutus, osimoilleen. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>

<div class="tilaa"> <!-- wrapper, lisää tilaa alareunaan-->
<h3>2.</h3>
<div class="tab2 inactive2">Koulutuksen kuvaus</div>
<div class="tab2 active2">Valintaperusteet ja pääsykokeet</div>
<div class="tab2 inactive2">Kouvolan seudun ammattiopisto, sosiaali- ja terveys</div>
<div class="content2">Vertailun vuoksi ihan toisenlainen ratkaisu. Apinoitu suoraan Youtubesta. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>

<div class="tilaa"> <!-- wrapper, lisää tilaa alareunaan-->
<h3>3.</h3>
<div class="tab3 inactive3">Koulutuksen kuvaus</div>
<div class="tab3 active3">Valintaperusteet ja pääsykokeet</div>
<div class="tab3 inactive3">Kouvolan seudun ammattiopisto, sosiaali- ja terveys</div>
<div class="content3">Tähän on lisätty paddingiä tabin sisään, inaktiiviselle tabille vaalensininen väri ja tummempi hover ja alleviivaus linkkitekstille. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>

<div class="tilaa"> <!-- wrapper, lisää tilaa alareunaan-->
<h3>4.</h3>
<div class="tab4 inactive4">Koulutuksen kuvaus</div>
<div class="tab4 active4">Valintaperusteet ja pääsykokeet</div>
<div class="tab4 inactive4">Kouvolan seudun ammattiopisto, sosiaali- ja terveys</div>
<div class="content4">Uusi versio numero kakkosesta. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>


<p>HUOM: Kannattaa huomata että se ratkaisu joka valitaan olisi hyvä ottaa myös yleisesti käyttöön, jotta välilehdet olisivat kaikkialla samanlaiset.</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chilpura/tabs-of-different-style-dIcgF */
body {
  padding:1em;
  font-family:Helvetica, Arial;
  font-size:14px;
  color:#333333;
}

.tilaa {
  margin-bottom:5em;
  
}

.tab {
  display: inline;
	border: solid;  
  box-sizing:border-box;
  border:1px solid #dcdcdc;
  padding:10px;
  margin-right:10px;
  background-image: -webkit-linear-gradient(top, rgb(198, 198, 198), rgb(245, 245, 245));
  box-shadow: inset 0 0 0 1px #ffffff;
  text-shadow: #ffffff 0px 1px 0px;
}

.active {
  font-weight:bold;
  border-bottom:1px solid #ffffff;
  background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), white);
}

.content {
  box-sizing:border-box;
  border:1px solid #dcdcdc;
  padding:13px;
  margin-right:10px;
  margin-top:10px;
}

.inactive:hover {
background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(198, 198, 198)); 
}

/* TOINEN */

.tab2 {
  display: inline;
	border: solid;  
  box-sizing:border-box;
  border:1px solid #ffffff;
  padding:10px;
  margin-right:10px;
}

.active2 {
  font-weight:bold;
  border-bottom:3px solid #149ecb;
  background:#ffffff;
  color:#149ecb;
}

.content2 {
  box-sizing:border-box;
  padding:13px;
  margin-right:10px;
  margin-top:10px;
}

.inactive2:hover {
  border-bottom:3px solid #149ecb;
  color:#000000;
}

/* KOLMAS */

body {
  padding:1em;
  font-family:Helvetica, Arial;
  font-size:14px;
  color:#333333;
}

.tilaa {
  margin-bottom:5em;
  
}

.tab3 {
  display: inline;
	border: solid;  
  box-sizing:border-box;
  border:1px solid #dcdcdc;
  padding:10px 20px;
  margin-right:10px;
  border-radius: 3px 3px 0 0;
  background-color: #DFF2F8;
/*background-color:#C8E8F2; vanha väri */
  box-shadow: inset 0 0 0 1px #ffffff;
}

.active3 {
  font-weight:bold;
  border-bottom:1px solid #ffffff;
  background:#ffffff;
}

.content3 {
  box-sizing:border-box;
  border:1px solid #dcdcdc;
  padding:13px;
  margin-right:10px;
  margin-top:10px;
}

.inactive3 {
  text-shadow: rgb(255, 255, 255) 0px 1px 0px;
  
}

.inactive3:hover {
    background-color: #BFE4F1;
 /* background-color:#91D6EB;  vanha väri */
    text-decoration:underline;
    text-shadow: #ffffff 0px 1px 0px;
}

/* NELJÄS */

.tab4 {
  display: inline;
	border: solid;  
  box-sizing:border-box;
  border:1px solid #ffffff;
  padding:10px;
  margin-right:10px;
  border-radius: 3px 3px 0 0;
  text-shadow: #ffffff 0px 1px 0px;
  font-weight:bold;
}

.active4 {
  font-weight:bold;
  border-bottom:2px solid #149ecb;
  background:#f2f2f2;
  color:#149ecb;
}

.content4 {
  box-sizing:border-box;
  padding:13px;
  margin-right:10px;
  margin-top:10px; 
}

.inactive4:hover {
  border-bottom:2px solid #149ecb;
  color:#000000;
  background:#f2f2f2;
}

Comments