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

(Replaced content with "<script src="https://2015.igem.org/Team:CHINA_CD_UESTC/gallery_Script?action=raw&ctype=text/javascript" type="text/javascript"></script>")
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 type="text/css">
 
−
/*************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*********/
 
−
</style>
 

Revision as of 03:49, 22 August 2015

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