Team:SYSU-China/css/style4.css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
.ch-item {
+
#regch .ch-item {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
Line 8: Line 8:
}
}
-
.ch-info-wrap{
+
#regch .ch-info-wrap{
position: absolute;
position: absolute;
width: 180px;
width: 180px;
Line 28: Line 28:
top: 20px;
top: 20px;
left: 20px;
left: 20px;
-
background: #f9f9f9 url(../images/bg.jpg);
+
background: #f9f9f9 url(https://static.igem.org/mediawiki/2014/f/f8/Sysuchina-3.png);
box-shadow:  
box-shadow:  
0 0 0 20px rgba(255,255,255,0.2),  
0 0 0 20px rgba(255,255,255,0.2),  
Line 35: Line 35:
}
}
-
.ch-info{
+
#regch .ch-info{
position: absolute;
position: absolute;
width: 180px;
width: 180px;
Line 55: Line 55:
}
}
-
.ch-info > div {
+
#regch .ch-info > div {
display: block;
display: block;
position: absolute;
position: absolute;
Line 70: Line 70:
}
}
-
.ch-info .ch-info-back {
+
#regch .ch-info .ch-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
Line 80: Line 80:
}
}
-
.ch-img-1 {  
+
#regch .ch-img-1 {  
-
background-image: url(../images/10.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/f/f8/Sysuchina-3.png);
}
}
-
.ch-img-2 {  
+
#regch .ch-img-2 {  
-
background-image: url(../images/11.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/9/9d/Sysuchina-3_06.png);
}
}
-
.ch-img-3 {  
+
#regch .ch-img-3 {  
-
background-image: url(../images/12.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/d/de/Sysuchina-3_11.png);
}
}
-
.ch-info h3 {
+
#regch .ch-img-9 {
 +
background-image: url(https://static.igem.org/mediawiki/2014/1/17/Sysuchina-3_14.png);
 +
}
 +
 
 +
#regch .ch-info h3 {
 +
color: #fff;
 +
text-transform: uppercase;
 +
letter-spacing: 2px;
 +
font-size: 14px;
 +
margin: 0 15px;
 +
padding: 40px 0 0 0;
 +
height: 90px;
 +
font-family: 'Open Sans', Arial, sans-serif;
 +
text-shadow:
 +
0 0 1px #fff,
 +
0 1px 2px rgba(0,0,0,0.3);
 +
}
 +
 
 +
#regch .ch-info p {
 +
color: #fff;
 +
padding: 10px 5px;
 +
font-style: italic;
 +
margin: 0 30px;
 +
font-size: 12px;
 +
border-top: 1px solid rgba(255,255,255,0.5);
 +
}
 +
 
 +
#regch .ch-info p a {
 +
display: block;
 +
color: #fff;
 +
color: rgba(255,255,255,0.7);
 +
font-style: normal;
 +
font-weight: 700;
 +
text-transform: uppercase;
 +
font-size: 9px;
 +
letter-spacing: 1px;
 +
padding-top: 4px;
 +
font-family: 'Open Sans', Arial, sans-serif;
 +
}
 +
 
 +
#regch .ch-info p a:hover {
 +
color: #fff222;
 +
color: rgba(255,242,34, 0.8);
 +
}
 +
 
 +
#regch .ch-item:hover .ch-info-wrap {
 +
box-shadow:
 +
0 0 0 0 rgba(255,255,255,0.8),
 +
inset 0 0 3px rgba(115,114, 23, 0.8);
 +
}
 +
 
 +
#regch .ch-item:hover .ch-info {
 +
-webkit-transform: rotate3d(0,1,0,-180deg);
 +
-moz-transform: rotate3d(0,1,0,-180deg);
 +
-o-transform: rotate3d(0,1,0,-180deg);
 +
-ms-transform: rotate3d(0,1,0,-180deg);
 +
transform: rotate3d(0,1,0,-180deg);
 +
}#regch .ch-item {
 +
width: 100%;
 +
height: 100%;
 +
border-radius: 50%;
 +
position: relative;
 +
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 +
cursor: default;
 +
}
 +
 
 +
#regch .ch-info-wrap{
 +
position: absolute;
 +
width: 180px;
 +
height: 180px;
 +
border-radius: 50%;
 +
 
 +
-webkit-perspective: 800px;
 +
-moz-perspective: 800px;
 +
-o-perspective: 800px;
 +
-ms-perspective: 800px;
 +
perspective: 800px;
 +
 
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
 
 +
top: 20px;
 +
left: 20px;
 +
background: #f9f9f9 url(https://static.igem.org/mediawiki/2014/f/f8/Sysuchina-3.png);
 +
box-shadow:
 +
0 0 0 20px rgba(255,255,255,0.2),
 +
inset 0 0 3px rgba(115,114, 23, 0.8);
 +
 
 +
}
 +
 
 +
#regch .ch-info{
 +
position: absolute;
 +
width: 180px;
 +
height: 180px;
 +
border-radius: 50%;
 +
 
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transform-style: preserve-3d;
 +
-o-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
 
 +
}
 +
 
 +
#regch .ch-info > div {
 +
display: block;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
border-radius: 50%;
 +
background-position: center center;
 +
 
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-o-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 
 +
#regch .ch-info .ch-info-back {
 +
-webkit-transform: rotate3d(0,1,0,180deg);
 +
-moz-transform: rotate3d(0,1,0,180deg);
 +
-o-transform: rotate3d(0,1,0,180deg);
 +
-ms-transform: rotate3d(0,1,0,180deg);
 +
transform: rotate3d(0,1,0,180deg);
 +
 +
background: #000;
 +
}
 +
 
 +
#regch .ch-img-1 {
 +
background-image: url(https://static.igem.org/mediawiki/2014/f/f8/Sysuchina-3.png);
 +
}
 +
 
 +
#regch .ch-img-2 {
 +
background-image: url(https://static.igem.org/mediawiki/2014/9/9d/Sysuchina-3_06.png);
 +
}
 +
 
 +
#regch .ch-img-3 {
 +
background-image: url(https://static.igem.org/mediawiki/2014/d/de/Sysuchina-3_11.png);
 +
}
 +
 
 +
#regch .ch-img-9 {
 +
background-image: url(https://static.igem.org/mediawiki/2014/1/17/Sysuchina-3_14.png);
 +
}
 +
 
 +
#regch .ch-info h3 {
color: #fff;
color: #fff;
text-transform: uppercase;
text-transform: uppercase;
Line 106: Line 260:
}
}
-
.ch-info p {
+
#regch .ch-info p {
color: #fff;
color: #fff;
padding: 10px 5px;
padding: 10px 5px;
Line 115: Line 269:
}
}
-
.ch-info p a {
+
#regch .ch-info p a {
display: block;
display: block;
color: #fff;
color: #fff;
Line 128: Line 282:
}
}
-
.ch-info p a:hover {
+
#regch .ch-info p a:hover {
color: #fff222;
color: #fff222;
color: rgba(255,242,34, 0.8);
color: rgba(255,242,34, 0.8);
}
}
-
.ch-item:hover .ch-info-wrap {
+
#regch .ch-item:hover .ch-info-wrap {
box-shadow:  
box-shadow:  
0 0 0 0 rgba(255,255,255,0.8),  
0 0 0 0 rgba(255,255,255,0.8),  
Line 139: Line 293:
}
}
-
.ch-item:hover .ch-info {
+
#regch .ch-item:hover .ch-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);

Revision as of 23:48, 17 October 2014

  1. regch .ch-item {

width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }

  1. regch .ch-info-wrap{

position: absolute; width: 180px; height: 180px; border-radius: 50%;

-webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;

top: 20px; left: 20px; background: #f9f9f9 url(Sysuchina-3.png); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);

}

  1. regch .ch-info{

position: absolute; width: 180px; height: 180px; border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

}

  1. regch .ch-info > div {

display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center;

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }

  1. regch .ch-info .ch-info-back {

-webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg);

background: #000; }

  1. regch .ch-img-1 {

background-image: url(Sysuchina-3.png); }

  1. regch .ch-img-2 {

background-image: url(Sysuchina-3_06.png); }

  1. regch .ch-img-3 {

background-image: url(Sysuchina-3_11.png); }

  1. regch .ch-img-9 {

background-image: url(Sysuchina-3_14.png); }

  1. regch .ch-info h3 {

color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }

  1. regch .ch-info p {

color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); }

  1. regch .ch-info p a {

display: block; color: #fff; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; }

  1. regch .ch-info p a:hover {

color: #fff222; color: rgba(255,242,34, 0.8); }

  1. regch .ch-item:hover .ch-info-wrap {

box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); }

  1. regch .ch-item:hover .ch-info {

-webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); }#regch .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }

  1. regch .ch-info-wrap{

position: absolute; width: 180px; height: 180px; border-radius: 50%;

-webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;

top: 20px; left: 20px; background: #f9f9f9 url(Sysuchina-3.png); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);

}

  1. regch .ch-info{

position: absolute; width: 180px; height: 180px; border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

}

  1. regch .ch-info > div {

display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center;

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }

  1. regch .ch-info .ch-info-back {

-webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg);

background: #000; }

  1. regch .ch-img-1 {

background-image: url(Sysuchina-3.png); }

  1. regch .ch-img-2 {

background-image: url(Sysuchina-3_06.png); }

  1. regch .ch-img-3 {

background-image: url(Sysuchina-3_11.png); }

  1. regch .ch-img-9 {

background-image: url(Sysuchina-3_14.png); }

  1. regch .ch-info h3 {

color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }

  1. regch .ch-info p {

color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); }

  1. regch .ch-info p a {

display: block; color: #fff; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; }

  1. regch .ch-info p a:hover {

color: #fff222; color: rgba(255,242,34, 0.8); }

  1. regch .ch-item:hover .ch-info-wrap {

box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); }

  1. regch .ch-item:hover .ch-info {

-webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); }

Retrieved from "http://2014.igem.org/Team:SYSU-China/css/style4.css"