Skip to content

Instantly share code, notes, and snippets.

@pa-ulander

pa-ulander/index.html

Last active June 2, 2020 19:15
Show Gist options
  • Save pa-ulander/99117f08674183a96c51f932e3b4c95c to your computer and use it in GitHub Desktop.
Save pa-ulander/99117f08674183a96c51f932e3b4c95c to your computer and use it in GitHub Desktop.
Download ZIP
POC vertical colorful css tabs: https://codepen.io/pa-ulander/full/rNxNObK
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'>
<style>
body {
padding: 0 10rem 0;
background-color: #333;
}
.tab-container {
position: relative;
height: 90px;
width: 35px;
border: 0;
perspective: 200px;
}
.tab {
position: relative;
right: 0px;
height: 90px;
width: 35px;
margin: 0.45rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
transform-style: preserve-3d;
transform: rotateY(-45deg);
}
.tab span {
position: absolute;
width: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 2px;
}
.tab span:nth-child(1) {
top: 24px;
height: 40px;
left: 8px;
}
.tab span:nth-child(2) {
top: 19px;
height: 52px;
left: 16px;
}
.tab span:nth-child(3) {
top: 13px;
height: 64px;
left: 23px;
}
.bg {
background: #e8e8e8;
background: -moz-linear-gradient(left, #e8e8e8 0%, #e6e6e6 47%, #c9c9c9 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #e8e8e8), color-stop(47%, #e6e6e6), color-stop(100%, #c9c9c9));
background: -webkit-linear-gradient(left, #e8e8e8 0%, #e6e6e6 47%, #c9c9c9 100%);
background: -o-linear-gradient(left, #e8e8e8 0%, #e6e6e6 47%, #c9c9c9 100%);
background: -ms-linear-gradient(left, #e8e8e8 0%, #e6e6e6 47%, #c9c9c9 100%);
background: linear-gradient(to right, #e8e8e8 0%, #e6e6e6 47%, #c9c9c9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c9c9c9', GradientType=1 );
}
.melon {
filter: grayscale(100%) brightness(100%) sepia(25%) hue-rotate(-50deg) saturate(1000%);
}
.green {
filter: grayscale(100%) brightness(70%) sepia(40%) hue-rotate(90deg) saturate(600%);
}
.purpish {
filter: grayscale(100%) brightness(100%) sepia(35%) hue-rotate(-115deg) saturate(2000%);
}
.red {
filter: grayscale(100%) brightness(100%) sepia(30%) hue-rotate(-50deg) saturate(2500%) contrast(0.7);
}
.blue {
filter: grayscale(10%) brightness(60%) sepia(30%) hue-rotate(-180deg) saturate(3500%) contrast(1.5);
}
.yellow {
filter: grayscale(10%) brightness(80%) sepia(90%) hue-rotate(5deg) saturate(700%) contrast(1);
}
.grey {
filter: grayscale(100%) brightness(90%) contrast(0.9);
}
.black {
filter: invert(30%) grayscale(100%) brightness(70%) contrast(3);
}
</style>
</head>
<body>
<div class="container">
<div class="tab-container">
<div class="tab bg">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg grey">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg black">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg red">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg green">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg blue">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg yellow">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg melon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="tab-container">
<div class="tab bg purpish">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment