Team:Shenzhen BGIC 0101/Templates/Banner

From 2013.igem.org

(Difference between revisions)
Line 277: Line 277:
     }
     }
-
.redtab
+
.tabs {
-
{
+
     position: relative;
-
     width: 950px;
+
margin: 40px auto;
-
    margin: 0 auto 0 auto;  
+
width: 900px;
}
}
-
#tabs
+
.tabs input {
-
{
+
position: absolute;
-
  overflow: auto;
+
z-index: 1000;
-
  width: 100%;
+
width: 120px;
-
  list-style: none;
+
height: 40px;
-
  margin: 0;
+
left: 0px;
-
  padding: 0;
+
top: 0px;
 +
opacity: 0;
 +
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
    filter: alpha(opacity=0);
 +
cursor: pointer;
 +
}
 +
.tabs input#tab-2{
 +
left: 120px;
 +
}
 +
.tabs input#tab-3{
 +
left: 240px;
 +
}
 +
.tabs input#tab-4{
 +
left: 360px;
}
}
-
#tabs li
+
.tabs label {
-
{
+
background: #5ba4a4;
-
    margin: 0;
+
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
-
    padding: 0;
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
 +
background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
 +
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
 +
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
 +
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
 +
font-size: 15px;
 +
line-height: 40px;
 +
height: 40px;
 +
position: relative;
 +
padding: 0 20px;
     float: left;
     float: left;
 +
display: block;
 +
width: 80px;
 +
color: #385c5b;
 +
letter-spacing: 1px;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
text-align: center;
 +
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
 +
    border-radius: 3px 3px 0 0;
 +
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
}
-
#tabs a
+
.tabs label:after {
-
{
+
     content: '';
-
     -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
+
background: #fff;
-
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
+
position: absolute;
-
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
+
bottom: -2px;
-
    background: #B09CC9;
+
left: 0;
-
    background:   -moz-linear-gradient(220deg, transparent 10px,  #B09CC9 10px);
+
width: 100%;
-
    background:   -webkit-linear-gradient(220deg, transparent 10px,  #B09CC9 10px);    
+
height: 2px;
-
    background:    -ms-linear-gradient(220deg, transparent 10px,  #B09CC9 10px);
+
display: block;
-
    background:      -o-linear-gradient(220deg, transparent 10px,  #B09CC9 10px);
+
-
    background:        linear-gradient(220deg, transparent 10px,  #B09CC9E 10px);
+
-
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
+
-
    color: #fff;
+
-
    float: left;
+
-
    height: 35px;
+
-
    padding: 0 30px;
+
-
    text-decoration: none;
+
}
}
-
#tabs a:hover
+
.tabs input:hover + label {
-
{
+
background: #5ba4a4;
-
    background: #7380AE;
+
-
    background:    -moz-linear-gradient(220deg, transparent 10px, #7380AE 10px);
+
-
    background:    -webkit-linear-gradient(220deg, transparent 10px, #7380AE 10px);   
+
-
    background:    -ms-linear-gradient(220deg, transparent 10px, #7380AE 10px);
+
-
    background:      -o-linear-gradient(220deg, transparent 10px, #7380AE 10px);
+
-
    background:         linear-gradient(220deg, transparent 10px, #7380AE 10px);    
+
}
}
-
#tabs a:focus
+
.tabs label:first-of-type {
-
{
+
     z-index: 4;
-
     outline: 0;
+
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
}
-
#tabs #current a
+
.tab-label-2 {
-
{
+
     z-index: 3;
-
    background: #fff;
+
-
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
+
-
     background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);   
+
-
    background:    -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
+
-
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
+
-
    background:        linear-gradient(220deg, transparent 10px, #fff 10px);
+
-
    text-shadow: none;   
+
-
    color: #333;
+
}
}
-
#tutocontent
+
.tab-label-3 {
-
{
+
     z-index: 2;
-
    background-color: #fff;
+
-
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
+
-
     background-image: -webkit-linear-gradient(top, #fff, #ddd);
+
-
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
+
-
    background-image:    -ms-linear-gradient(top, #fff, #ddd);
+
-
    background-image:      -o-linear-gradient(top, #fff, #ddd);
+
-
    background-image:        linear-gradient(top, #fff, #ddd);
+
-
    -moz-border-radius: 0 2px 2px 2px;
+
-
    -webkit-border-radius: 0 2px 2px 2px;
+
-
    border-radius: 0 2px 2px 2px;
+
-
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
+
-
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
+
-
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
+
-
    padding: 30px;
+
}
}
-
/* Remove the rule below if you want the content to be "organic" */
+
.tab-label-4 {
-
#tutocontent div
+
     z-index: 1;
-
{
+
-
     height: auto;
+
}
}
-
/* --- */
+
.tabs input:checked + label {
-
#about
+
     background: #fff;
-
{
+
z-index: 6;
-
     color: #000;
+
}
}
-
#about a
+
.clear-shadow {
-
{
+
clear: both;
-
    color: #eee;
+
}
}
 +
.content2 {
 +
    background: #fff;
 +
position: relative;
 +
    width: 900px;
 +
height: auto;
 +
z-index: 5;
 +
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
 +
    border-radius: 0 3px 3px 3px;
 +
}
 +
 +
.content2 div {
 +
    position: absolute;
 +
top: 0;
 +
left: 0;
 +
padding: 10px 40px;
 +
z-index: 1;
 +
    opacity: 0;
 +
 +
    -webkit-transition: opacity linear 0.1s;
 +
    -moz-transition: opacity linear 0.1s;
 +
    -o-transition: opacity linear 0.1s;
 +
    -ms-transition: opacity linear 0.1s;
 +
    transition: opacity linear 0.1s;
 +
}
 +
 +
.tabs input.tab-selector-1:checked ~ .content2 .content-1,
 +
.tabs input.tab-selector-2:checked ~ .content2 .content-2,
 +
.tabs input.tab-selector-3:checked ~ .content2 .content-3,
 +
.tabs input.tab-selector-4:checked ~ .content2 .content-4 {
 +
z-index: 100;
 +
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
    filter: alpha(opacity=100);
 +
    opacity: 1;
 +
 +
    -webkit-transition: opacity ease-out 0.2s 0.1s;
 +
    -moz-transition: opacity ease-out 0.2s 0.1s;
 +
    -o-transition: opacity ease-out 0.2s 0.1s;
 +
    -ms-transition: opacity ease-out 0.2s 0.1s;
 +
    transition: opacity ease-out 0.2s 0.1s;
 +
}
 +
.content2 div p {
 +
 +
text-align: left;
 +
margin: 0;
 +
padding-left: 15px;
 +
border-left: 8px solid rgba(63,148,148, 0.1);
 +
}
   </style>
   </style>
   </head>
   </head>

Revision as of 05:49, 26 October 2013

Retrieved from "http://2013.igem.org/Team:Shenzhen_BGIC_0101/Templates/Banner"