Template:CSS/newpage

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<style rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
-
/*Now the styles*/
 
-
* {
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
body {
body {
-
background: #ccc;
+
  background: #fff;
-
font-family: arial, verdana, tahoma;
+
}
}
-
 
+
#Body path {
-
/*Time to apply widths for accordian to work
+
  stroke: #00ff30;
-
Width of image = 640px
+
}
-
total images = 5
+
#TopRed path {
-
so width of hovered image = 640px
+
  stroke: #ff0000;
-
width of un-hovered image = 40px - you can set this to anything
+
}
-
so total container width = 640 + 40*4 = 800px;
+
#Bottom_Blue path {
-
default width = 800/5 = 160px;
+
  stroke: #00c6ff;
-
*/
+
}
-
 
+
#Bottom_Green path {
-
.accordian {
+
  stroke: #69e692;
-
width: 805px; height: 320px;
+
}
-
overflow: hidden;
+
#TopYellow path {
-
+
  stroke: #fff000;
-
/*Time for some styling*/
+
}
-
margin: 100px auto;
+
#BottomYellow path {
-
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
+
  stroke: #fff000;
-
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
+
}
-
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
+
.st0{
 +
  /*fill:#8CC63F;*/
 +
  /*stroke: #8CC63F;*/
 +
  fill:none;
 +
  stroke:#FBB03B;
 +
  stroke-miterlimit:10;
 +
}
 +
.st1{
 +
  fill:none;
 +
  stroke:#8CC63F;
 +
  stroke-miterlimit:10;
 +
}
 +
.st2{
 +
  fill:none;
 +
  stroke:#FFFF00;
 +
  stroke-miterlimit:10;
 +
}
 +
.st3{
 +
  fill:#65C8D0;
 +
}
 +
.st4{
 +
  fill:#0000FF;
}
}
-
/*A small hack to prevent flickering on some browsers*/
+
.butterfly {
-
.accordian ul {
+
  position: absolute;
-
width: 2000px;
+
  top: 50%;
-
/*This will give ample space to the last item to move
+
  left: 50%;
-
instead of falling down/flickering during hovers.*/
+
  margin-top: -250px;
 +
  margin-left: -250px;
 +
  x: 0;
 +
  y: 0;
 +
  width: 500px;
 +
  height: 500px;
 +
  viewBox: 0 0 500 500;
 +
  enable-background:new 0 0 500 500;
 +
  animation: wrapper 4s infinite;
}
}
-
.accordian li {
+
.st0 {
-
position: relative;
+
    stroke-dasharray: 640;
-
display: block;
+
    stroke-dashoffset: 0;
-
width: 160px;
+
  -webkit-transform-origin: center;
-
float: left;
+
      -ms-transform-origin: center;
-
+
          transform-origin: center;
-
border-left: 1px solid #888;
+
  -webkit-animation: draw-around 4s infinite;
-
+
          animation: draw-around 4s infinite;
-
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
+
-
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
+
-
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
+
-
+
-
/*Transitions to give animation effect*/
+
-
transition: all 0.5s;
+
-
-webkit-transition: all 0.5s;
+
-
-moz-transition: all 0.5s;
+
-
/*If you hover on the images now you should be able to
+
-
see the basic accordian*/
+
}
}
-
/*Reduce with of un-hovered elements*/
+
@-webkit-keyframes draw-around {
-
.accordian ul:hover li {width: 40px;}
+
  0% {
-
/*Lets apply hover effects now*/
+
    stroke-dashoffset: 640;
-
/*The LI hover style should override the UL hover style*/
+
  }
-
.accordian ul li:hover {width: 640px;}
+
  10% {
-
 
+
    stroke-dashoffset: 640;
-
 
+
  }
-
.accordian li img {
+
  100% {
-
display: block;
+
    stroke-dashoffset: 0;
 +
  }
 +
}
 +
@keyframes draw-around {
 +
  0% {
 +
    stroke-dashoffset: 640;
 +
  }
 +
  10% {
 +
    stroke-dashoffset: 640;
 +
  }
 +
  100% {
 +
    stroke-dashoffset: 0;
 +
  }
}
}
-
/*Image title styles*/
+
@keyframes wrapper {
-
.image_title {
+
  0% {
-
background: rgba(0, 0, 0, 0.5);
+
    opacity: 0;
-
position: absolute;
+
   
-
left: 0; bottom: 0;
+
    -webkit-filter: blur(10px);
-
width: 640px;
+
    -moz-filter: blur(10px);
-
 
+
    -o-filter: blur(10px);
 +
    -ms-filter: blur(10px);
 +
    filter: blur(10px);
 +
  }
 +
  20% {
 +
    opacity: 1;
 +
   
 +
    -webkit-filter: none;
 +
    -moz-filter: none;
 +
    -o-filter: none;
 +
    -ms-filter: none;
 +
    filter: none;
 +
  }
}
}
-
.image_title a {
+
 
-
display: block;
+
@-webkit-keyframes wrapper {
-
color: #fff;
+
  0% {
-
text-decoration: none;
+
    opacity: 0;
-
padding: 20px;
+
   
-
font-size: 16px;
+
    -webkit-filter: blur(15px);
 +
    -moz-filter: blur(15px);
 +
    -o-filter: blur(15px);
 +
    -ms-filter: blur(15px);
 +
    filter: blur(15px);
 +
  }
 +
  20% {
 +
    opacity: 1;
 +
   
 +
    -webkit-filter: none;
 +
    -moz-filter: none;
 +
    -o-filter: none;
 +
    -ms-filter: none;
 +
    filter: none;
 +
  }
}
}
</style>
</style>
</html>
</html>

Revision as of 06:00, 9 June 2015

Retrieved from "http://2014.igem.org/Template:CSS/newpage"