Difference between revisions of "Template:Team:CHINA CD UESTC/style"

Line 1: Line 1:
 
<script src="https://2015.igem.org/Team:CHINA_CD_UESTC/gallery_Script?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
<script src="https://2015.igem.org/Team:CHINA_CD_UESTC/gallery_Script?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
<style src="https://2015.igem.org/Team:CHINA_CD_UESTC/gallery.css?action=raw&ctype=text/css" type="text/css" ></style>
+
/*************gallery 2***********/
 +
 
 +
#gal {
 +
  position:relative;
 +
  width:700px;
 +
  height:400px;
 +
  margin:0 auto;
 +
  top:100px;
 +
  background:#000;
 +
}
 +
#gal:after {
 +
  content:'';
 +
  position:absolute;
 +
  bottom:24px;
 +
  right:0;
 +
  left:0;
 +
  width:100%;
 +
  height:1px;
 +
  background:rgba(255,255,255,0.35);
 +
  z-index:3;
 +
}
 +
#gal ul {list-style-type:none;}
 +
input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {
 +
  position:absolute;
 +
  bottom:80px;
 +
  display:block;
 +
  width:22px;
 +
  height:22px;
 +
  -webkit-border-radius:50%;
 +
  -moz-border-radius:50%;
 +
  border-radius:50%;
 +
  cursor:pointer;
 +
}
 +
input[class="re_radio"] {
 +
  opacity:0;
 +
  z-index:200;
 +
}
 +
input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;}
 +
input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;}
 +
input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;}
 +
input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;}
 +
input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;}
 +
input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;}
 +
input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;}
 +
input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}
 +
 
 +
input[class="re_radio"] + label[class="re_label"] {
 +
  background:rgba(243,243,243,0.55);
 +
  z-index:7;
 +
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 +
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 +
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 +
  -webkit-transition:all .3s;
 +
  -moz-transition:all .3s;
 +
  -o-transition:all .3s;
 +
  transition:all .3s;
 +
}
 +
[class*="entypo-"]:before {
 +
  position:absolute;
 +
  font-family: 'entypo', sans-serif;
 +
}
 +
figure[class*="entypo-"]:before {
 +
  left:10px;
 +
  top:5px;
 +
  font-size:2rem;
 +
  color:rgba(255,255,255,0);
 +
  z-index:1;
 +
  -webkit-transition:color .1s;
 +
  -moz-transition:color .1s;
 +
  -o-transition:color .1s;
 +
  transition:color .1s;
 +
}
 +
a[class*="entypo-"]:before {
 +
  top:8px;
 +
  left:9px;
 +
  font-size:1.5rem;
 +
  color:white;
 +
}
 +
a:hover[class*="entypo-"]:before {
 +
  color:white;
 +
}
 +
figure, figure img, figcaption {
 +
  position:absolute;
 +
  top:0;
 +
  right:0;
 +
}
 +
figure {
 +
  bottom:0;
 +
  left:0;
 +
  width:600px;
 +
  height:300px;
 +
  display:block;
 +
  overflow:hidden;
 +
}
 +
figure img {
 +
  bottom:0;
 +
  left:0;
 +
  display:block;
 +
  width:700px;
 +
  height:400px;
 +
  z-index:1;
 +
  -webkit-transform:translateX(600px);
 +
  -moz-transform:translateX(600px);
 +
  -ms-transform:translateX(600px);
 +
  -o-transform:translateX(600px);
 +
  transform:translateX(600px);
 +
  -webkit-transition:all .15s .15s, z-index 0s;
 +
  -moz-transition:all .15s .15s, z-index 0s;
 +
  -o-transition:all .15s .15s, z-index 0s;
 +
  transition:all .15s .15s, z-index 0s;
 +
}
 +
figcaption {
 +
  display:block;
 +
  width:270px;
 +
  height:300px;
 +
  padding-top:20px;
 +
  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
 +
  background-size:600px 600px;
 +
  background-repeat:no-repeat;
 +
  background-position:-300px -150px;
 +
  text-align:center;
 +
  z-index:3;
 +
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 +
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 +
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 +
  -webkit-transform:translateX(300px);
 +
  -moz-transform:translateX(300px);
 +
  -ms-transform:translateX(300px);
 +
  -o-transform:translateX(300px);
 +
  transform:translateX(300px);
 +
  -webkit-transition:all .35s;
 +
  -moz-transition:all .35s;
 +
  -o-transition:all .35s;
 +
  transition:all .35s;
 +
}
 +
 
 +
figcaption nav ul {display:block;padding-top:10px;}
 +
figcaption nav ul li {display:inline-block;margin-left:5px;}
 +
figcaption nav ul li a {
 +
  position:relative;
 +
  display:block;
 +
  width:40px;
 +
  height:40px;
 +
  background:rgba(255,255,255,0.2);
 +
  text-decoration:none;
 +
  color:white;
 +
  -webkit-border-radius:50%;
 +
  -moz-border-radius:50%;
 +
  border-radius:50%;
 +
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 +
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 +
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 +
  -webkit-transition:all .15s;
 +
  -moz-transition:all .15s;
 +
  -o-transition:all .15s;
 +
  transition:all .15s;
 +
}
 +
figcaption nav ul li a:hover {
 +
  background:rgba(255,255,255,0);
 +
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 +
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 +
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 +
}
 +
figcaption p {
 +
  padding:50px 15px;
 +
  font-family:'Titillium Web', sans-serif;
 +
  font-weight:300;
 +
  color:#333;
 +
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
 +
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 +
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 +
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 +
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 +
  background-size:1px 100%;
 +
  background-repeat:no-repeat;
 +
  background-position:50% 0%;
 +
}
 +
 +
input[class="re_radio"]:hover + label[class="re_label"] {
 +
  background:rgba(255,255,255,0.6);
 +
}
 +
input[class="re_radio"]:checked + label[class="re_label"] {
 +
  background:rgba(130,195,217,0.9);
 +
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 +
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 +
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 +
}
 +
input[class="re_radio"]:checked + label[class="re_label"]:before {}
 +
input[class="re_radio"]:checked ~ figure img {
 +
  z-index:2;
 +
  -webkit-transform:translatex(0px);
 +
  -moz-transform:translatex(0px);
 +
  -ms-transform:translatex(0px);
 +
  -o-transform:translatex(0px);
 +
  transform:translatex(0px);
 +
  -webkit-transition:all .15s, z-index 0s;
 +
  -moz-transition:all .15s, z-index 0s;
 +
  -o-transition:all .15s, z-index 0s;
 +
  transition:all .15s, z-index 0s;
 +
}
 +
input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before {
 +
  z-index:3;
 +
  color:rgba(255,255,255,0.5);
 +
  -webkit-transition:color .5s;
 +
  -moz-transition:color .5s;
 +
  -o-transition:color .5s;
 +
  transition:color .5s;
 +
}
 +
input[class="re_radio"]:checked ~ figure figcaption {
 +
  z-index:8;
 +
  -webkit-transform:translateX(0px);
 +
  -moz-transform:translateX(0px);
 +
  -ms-transform:translateX(0px);
 +
  -o-transform:translateX(0px);
 +
  transform:translateX(0px);
 +
  -webkit-transition:all .35s, .7s;
 +
  -moz-transition:all .35s, .7s;
 +
  -o-transition:all .35s, .7s;
 +
  transition:all .35s, .7s;
 +
}
 +
.entypo-forward {
 +
margin: 0;
 +
width: 100%;
 +
height: 100%;
 +
border: 20px solid #FDFDFD;
 +
 
 +
}
 +
.entypo-forward p {
 +
color: #000;
 +
font-size: 20px;
 +
font-family: 'Microsoft YaHei'
 +
}
 +
 
 +
/********end of gallery 2*********/

Revision as of 03:46, 22 August 2015

<script src="https://2015.igem.org/Team:CHINA_CD_UESTC/gallery_Script?action=raw&ctype=text/javascript" type="text/javascript"></script> /*************gallery 2***********/

  1. gal {
 position:relative;
 width:700px;
 height:400px;
 margin:0 auto;
 top:100px;
 background:#000;

}

  1. gal:after {
 content:;
 position:absolute;
 bottom:24px;
 right:0;
 left:0;
 width:100%;
 height:1px;
 background:rgba(255,255,255,0.35);
 z-index:3;

}

  1. gal ul {list-style-type:none;}

input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] { 

 position:absolute;
 bottom:80px;
 display:block;
 width:22px;
 height:22px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 cursor:pointer;

} input[class="re_radio"] { 

 opacity:0;
 z-index:200;

} input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;} input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;} input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;} input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;} input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;} input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;} input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;} input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}

input[class="re_radio"] + label[class="re_label"] { 

 background:rgba(243,243,243,0.55);
 z-index:7;
 -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -webkit-transition:all .3s;
 -moz-transition:all .3s;
 -o-transition:all .3s;
 transition:all .3s;

} [class*="entypo-"]:before { 

 position:absolute;
 font-family: 'entypo', sans-serif;

} figure[class*="entypo-"]:before { 

 left:10px;
 top:5px;
 font-size:2rem;
 color:rgba(255,255,255,0);
 z-index:1;
 -webkit-transition:color .1s;
 -moz-transition:color .1s;
 -o-transition:color .1s;
 transition:color .1s;

} a[class*="entypo-"]:before { 

 top:8px;
 left:9px;
 font-size:1.5rem;
 color:white;

} a:hover[class*="entypo-"]:before { 

 color:white;

} figure, figure img, figcaption { 

 position:absolute;
 top:0;
 right:0;

} figure { 

 bottom:0;
 left:0;
 width:600px;
 height:300px;
 display:block;
 overflow:hidden;

} figure img { 

 bottom:0;
 left:0;
 display:block;
 width:700px;
 height:400px;
 z-index:1;
 -webkit-transform:translateX(600px);
 -moz-transform:translateX(600px);
 -ms-transform:translateX(600px);
 -o-transform:translateX(600px);
 transform:translateX(600px);
 -webkit-transition:all .15s .15s, z-index 0s;
 -moz-transition:all .15s .15s, z-index 0s;
 -o-transition:all .15s .15s, z-index 0s;
 transition:all .15s .15s, z-index 0s;

} figcaption { 

 display:block;
 width:270px;
 height:300px;
 padding-top:20px;
 background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
 background-size:600px 600px;
 background-repeat:no-repeat;
 background-position:-300px -150px;
 text-align:center;
 z-index:3;
 -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 -webkit-transform:translateX(300px);
 -moz-transform:translateX(300px);
 -ms-transform:translateX(300px);
 -o-transform:translateX(300px);
 transform:translateX(300px);
 -webkit-transition:all .35s;
 -moz-transition:all .35s;
 -o-transition:all .35s;
 transition:all .35s;

}

figcaption nav ul {display:block;padding-top:10px;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a { 

 position:relative;
 display:block;
 width:40px;
 height:40px;
 background:rgba(255,255,255,0.2);
 text-decoration:none;
 color:white;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 -webkit-transition:all .15s;
 -moz-transition:all .15s;
 -o-transition:all .15s;
 transition:all .15s;

} figcaption nav ul li a:hover { 

 background:rgba(255,255,255,0);
 -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);

} figcaption p { 

 padding:50px 15px;
 font-family:'Titillium Web', sans-serif;
 font-weight:300;
 color:#333;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
 background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-size:1px 100%;
 background-repeat:no-repeat;
 background-position:50% 0%;

}

input[class="re_radio"]:hover + label[class="re_label"] { 

 background:rgba(255,255,255,0.6);

} input[class="re_radio"]:checked + label[class="re_label"] { 

 background:rgba(130,195,217,0.9);
 -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);

} input[class="re_radio"]:checked + label[class="re_label"]:before {} input[class="re_radio"]:checked ~ figure img { 

 z-index:2;
 -webkit-transform:translatex(0px);
 -moz-transform:translatex(0px);
 -ms-transform:translatex(0px);
 -o-transform:translatex(0px);
 transform:translatex(0px);
 -webkit-transition:all .15s, z-index 0s;
 -moz-transition:all .15s, z-index 0s;
 -o-transition:all .15s, z-index 0s;
 transition:all .15s, z-index 0s;

} input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before { 

 z-index:3;
 color:rgba(255,255,255,0.5);
 -webkit-transition:color .5s;
 -moz-transition:color .5s;
 -o-transition:color .5s;
 transition:color .5s;

} input[class="re_radio"]:checked ~ figure figcaption { 

 z-index:8;
 -webkit-transform:translateX(0px);
 -moz-transform:translateX(0px);
 -ms-transform:translateX(0px);
 -o-transform:translateX(0px);
 transform:translateX(0px);
 -webkit-transition:all .35s, .7s;
 -moz-transition:all .35s, .7s;
 -o-transition:all .35s, .7s;
 transition:all .35s, .7s;

} .entypo-forward { margin: 0; width: 100%; height: 100%; border: 20px solid #FDFDFD;

} .entypo-forward p { color: #000; font-size: 20px; font-family: 'Microsoft YaHei' }

/********end of gallery 2*********/