Bootstrap Snippet glass tab using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <input type="radio" name="nav" id="nav1" checked="checked"/>
  <input type="radio" name="nav" id="nav2"/>
  <input type="radio" name="nav" id="nav3"/>
  <input type="radio" name="nav" id="nav4"/>
  <div class="tabs">
    <label class="tab" for="nav1"><i class="material-icons">account_box</i></label>
    <label class="tab" for="nav2"><i class="material-icons">camera</i></label>
    <label class="tab" for="nav3"><i class="material-icons">email</i></label>
    <label class="tab" for="nav4"> <i class="material-icons">favorite</i></label>
  </div>
  <div class="panels">
    <div class="panel c1"> 
      <div class="info"><i class="material-icons">looks_one</i> Hi! You made it</div>
    </div>
    <div class="panel c2">
      <div class="info"><i class="material-icons">camera_alt</i> You can't take a picture</div>
    </div>
    <div class="panel c3">
      <div class="info"><i class="material-icons">markunread_mailbox</i> Your to young to know how to work snail mail</div>
    </div>
    <div class="panel c4">
      <div class="info"><i class="material-icons">store_mall_directory</i> No place like home</div>
    </div>
  </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body {
  padding: 0px;
  margin: 0px;
  background: linear-gradient(to top right, #475, #465);
  font-family: 'Ubuntu', sans-serif;
  color: #FFF;
  height: 100%;
}
body {
  padding-top: 40px;
}
body * {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  border: none;
}
.container {
  max-width: 400px;
  min-height: 200px;
  background: #FFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  margin: auto;
  border-radius: 3px;
  color: #000;
  display: flex;
  flex-direction: column;
}
.tabs {
  position: relative;
  display: flex;
  border-bottom: 4px solid rgba(0, 0, 0, 0.1);
  height: 40px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"glass tab"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"glass tab" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"glass tab"
Bootstrap 3.3.0 Snippet by evarevirus