Team:Tsinghua

From 2014.igem.org

(Difference between revisions)
(Replaced content with "{{Team:Tsinghua/css/slides_styles}} {{Team:Tsinghua/css/slides_styles-standard}}")
Line 1: Line 1:
{{Team:Tsinghua/css/slides_styles}}
{{Team:Tsinghua/css/slides_styles}}
{{Team:Tsinghua/css/slides_styles-standard}}
{{Team:Tsinghua/css/slides_styles-standard}}
 +
{{Team:Tsinghua/css/slides_styles_v2}}
 +
 +
 +
@charset "utf-8";
 +
/* CSS Document */
 +
body{
 +
background:
 +
#ddd;overflow-x: hidden;
 +
}
 +
#bd{
 +
width: 960px;
 +
margin: 100px auto;
 +
max-width: 960px;
 +
}
 +
/* module: sliders */
 +
#sliders{
 +
border-radius: 5px;
 +
box-shadow: 1px 1px 4px #666;
 +
padding: 1%;
 +
background: #fff;
 +
}
 +
#overflow{
 +
width: 100%;
 +
overflow: hidden;
 +
}
 +
#sliders .inner{
 +
width: 500%;
 +
transiton: all 1s linear;
 +
-webkit-transition: all 1s linear;
 +
}
 +
#sliders article{
 +
float: left;
 +
width: 20%;
 +
}
 +
#sliders article .info{
 +
position: absolute;
 +
opacity: 0;
 +
padding: 30px;
 +
color: #666;
 +
font-family: Arial;
 +
transition: opacity 0.1s ease-out;
 +
-webkit-transform: translateZ(0);
 +
-webkit-transition: opacity 0.1s ease-out;
 +
}
 +
#sliders article .info h1{
 +
font-size: 22px;
 +
font-weight: bold;
 +
margin: 0 0 5px;
 +
}
 +
#sliders article .info a{
 +
color: #666;
 +
text-decoration: none;
 +
}
 +
/* module: controls */
 +
#controls{
 +
height: 50px;
 +
width: 100%;
 +
margin-top: -25%;
 +
}
 +
#controls label{
 +
display: none;
 +
width: 50px;
 +
height: 50px;
 +
opacity: 0.3;
 +
cursor: pointer;
 +
}
 +
#controls label:hover{
 +
opacity: 1;
 +
}
 +
/* module: active */
 +
#active{
 +
width: 100%;
 +
margin-top: 23%;
 +
text-align: center;
 +
}
 +
#active label{
 +
display: inline-block;
 +
width: 10px;
 +
height: 10px;
 +
border-radius: 5px;
 +
background: #bbb;
 +
border-color: #777;
 +
}
 +
#active label:hover{
 +
background: #ccc;
 +
}
 +
/* input checked change style */
 +
#slider1:checked ~ #active label:nth-child(1),
 +
#slider2:checked ~ #active label:nth-child(2),
 +
#slider3:checked ~ #active label:nth-child(3),
 +
#slider4:checked ~ #active label:nth-child(4),
 +
#slider5:checked ~ #active label:nth-child(5){
 +
background: #333;
 +
}
 +
#slider1:checked ~ #controls label:nth-child(5),
 +
#slider2:checked ~ #controls label:nth-child(1),
 +
#slider3:checked ~ #controls label:nth-child(2),
 +
#slider4:checked ~ #controls label:nth-child(3),
 +
#slider5:checked ~ #controls label:nth-child(4){
 +
display: block;
 +
float: left;
 +
background: url(../img/prev.png) no-repeat;
 +
margin-left: -70px;
 +
}
 +
#slider1:checked ~ #controls label:nth-child(2),
 +
#slider2:checked ~ #controls label:nth-child(3),
 +
#slider3:checked ~ #controls label:nth-child(4),
 +
#slider4:checked ~ #controls label:nth-child(5),
 +
#slider5:checked ~ #controls label:nth-child(1){
 +
display: block;
 +
float: right;
 +
background: url(../img/next.png) no-repeat;
 +
margin-right: -70px;
 +
}
 +
#slider1:checked ~ #sliders article:nth-child(1) .info,
 +
#slider2:checked ~ #sliders article:nth-child(2) .info,
 +
#slider3:checked ~ #sliders article:nth-child(3) .info,
 +
#slider4:checked ~ #sliders article:nth-child(4) .info,
 +
#slider5:checked ~ #sliders article:nth-child(5) .info{
 +
opacity: 1;
 +
transition: all 0.6s ease-out 1s;
 +
-webkit-transition: all 0.6s ease-out 1s;
 +
}
 +
#slider1:checked ~ #sliders .inner{
 +
margin-left: 0;
 +
}
 +
#slider2:checked ~ #sliders .inner{
 +
margin-left: -100%;
 +
}
 +
#slider3:checked ~ #sliders .inner{
 +
margin-left: -200%;
 +
}
 +
#slider4:checked ~ #sliders .inner{
 +
margin-left: -300%;
 +
}
 +
#slider5:checked ~ #sliders .inner{
 +
margin-left: -400%;
 +
}

Revision as of 13:34, 14 October 2014


@charset "utf-8"; /* CSS Document */ body{ background: #ddd;overflow-x: hidden; }

  1. bd{

width: 960px; margin: 100px auto; max-width: 960px; } /* module: sliders */

  1. sliders{

border-radius: 5px; box-shadow: 1px 1px 4px #666; padding: 1%; background: #fff; }

  1. overflow{

width: 100%; overflow: hidden; }

  1. sliders .inner{

width: 500%; transiton: all 1s linear; -webkit-transition: all 1s linear; }

  1. sliders article{

float: left; width: 20%; }

  1. sliders article .info{

position: absolute; opacity: 0; padding: 30px; color: #666; font-family: Arial; transition: opacity 0.1s ease-out; -webkit-transform: translateZ(0); -webkit-transition: opacity 0.1s ease-out; }

  1. sliders article .info h1{

font-size: 22px; font-weight: bold; margin: 0 0 5px; }

  1. sliders article .info a{

color: #666; text-decoration: none; } /* module: controls */

  1. controls{

height: 50px; width: 100%; margin-top: -25%; }

  1. controls label{

display: none; width: 50px; height: 50px; opacity: 0.3; cursor: pointer; }

  1. controls label:hover{

opacity: 1; } /* module: active */

  1. active{

width: 100%; margin-top: 23%; text-align: center; }

  1. active label{

display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #bbb; border-color: #777; }

  1. active label:hover{

background: #ccc; } /* input checked change style */

  1. slider1:checked ~ #active label:nth-child(1),
  2. slider2:checked ~ #active label:nth-child(2),
  3. slider3:checked ~ #active label:nth-child(3),
  4. slider4:checked ~ #active label:nth-child(4),
  5. slider5:checked ~ #active label:nth-child(5){

background: #333; }

  1. slider1:checked ~ #controls label:nth-child(5),
  2. slider2:checked ~ #controls label:nth-child(1),
  3. slider3:checked ~ #controls label:nth-child(2),
  4. slider4:checked ~ #controls label:nth-child(3),
  5. slider5:checked ~ #controls label:nth-child(4){

display: block; float: left; background: url(../img/prev.png) no-repeat; margin-left: -70px; }

  1. slider1:checked ~ #controls label:nth-child(2),
  2. slider2:checked ~ #controls label:nth-child(3),
  3. slider3:checked ~ #controls label:nth-child(4),
  4. slider4:checked ~ #controls label:nth-child(5),
  5. slider5:checked ~ #controls label:nth-child(1){

display: block; float: right; background: url(../img/next.png) no-repeat; margin-right: -70px; }

  1. slider1:checked ~ #sliders article:nth-child(1) .info,
  2. slider2:checked ~ #sliders article:nth-child(2) .info,
  3. slider3:checked ~ #sliders article:nth-child(3) .info,
  4. slider4:checked ~ #sliders article:nth-child(4) .info,
  5. slider5:checked ~ #sliders article:nth-child(5) .info{

opacity: 1; transition: all 0.6s ease-out 1s; -webkit-transition: all 0.6s ease-out 1s; }

  1. slider1:checked ~ #sliders .inner{

margin-left: 0; }

  1. slider2:checked ~ #sliders .inner{

margin-left: -100%; }

  1. slider3:checked ~ #sliders .inner{

margin-left: -200%; }

  1. slider4:checked ~ #sliders .inner{

margin-left: -300%; }

  1. slider5:checked ~ #sliders .inner{

margin-left: -400%; }

Retrieved from "http://2014.igem.org/Team:Tsinghua"