Last active
June 2, 2020 19:15
-
-
Save pa-ulander/99117f08674183a96c51f932e3b4c95c to your computer and use it in GitHub Desktop.
POC vertical colorful css tabs: https://codepen.io/pa-ulander/full/rNxNObK
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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