Template:CSS/newpage

From 2014.igem.org

(Difference between revisions)
(Created page with "- →Now the styles: * { margin: 0; padding: 0; } body { background: #ccc; font-family: arial, verdana, tahoma; } /*Time to apply widths for accordian to work Width of image...")
 
(35 intermediate revisions not shown)
Line 1: Line 1:
-
/*Now the styles*/
+
<html>
-
* {
+
<style rel='stylesheet' type='text/css'>
-
margin: 0;  
+
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
-
padding: 0;
+
@-webkit-keyframes flip-top {
 +
  from {
 +
    -webkit-transform: rotate(50deg) translateY(120vh);
 +
            transform: rotate(50deg) translateY(120vh);
 +
  }
}
}
 +
@keyframes flip-top {
 +
  from {
 +
    -webkit-transform: rotate(50deg) translateY(120vh);
 +
            transform: rotate(50deg) translateY(120vh);
 +
  }
 +
}
 +
@-webkit-keyframes flip-bottom {
 +
  from {
 +
    -webkit-transform: rotate(-50deg) translateY(120vh);
 +
            transform: rotate(-50deg) translateY(120vh);
 +
  }
 +
}
 +
@keyframes flip-bottom {
 +
  from {
 +
    -webkit-transform: rotate(-50deg) translateY(120vh);
 +
            transform: rotate(-50deg) translateY(120vh);
 +
  }
 +
}
 +
body {
body {
-
background: #ccc;  
+
  display: -webkit-box;
-
font-family: arial, verdana, tahoma;
+
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-pack: center;
 +
  -webkit-justify-content: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  -webkit-box-align: center;
 +
  -webkit-align-items: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  height: 100vh;
 +
  overflow: hidden;
 +
  background: #111;
 +
  -webkit-animation: glow 8s both;
 +
          animation: glow 8s both;
 +
 
 +
 +
 
 +
 
}
}
-
/*Time to apply widths for accordian to work
 
-
Width of image = 640px
 
-
total images = 5
 
-
so width of hovered image = 640px
 
-
width of un-hovered image = 40px - you can set this to anything
 
-
so total container width = 640 + 40*4 = 800px;
 
-
default width = 800/5 = 160px;
 
-
*/
 
-
.accordian {
+
 
-
width: 805px; height: 320px;
+
span {
-
overflow: hidden;
+
  font: 900 15vw Raleway;
-
+
  position: relative;
-
/*Time for some styling*/
+
  display: inline-block;
-
margin: 100px auto;
+
  -webkit-perspective: 500px;
-
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
+
          perspective: 500px;
-
-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);
+
}
}
 +
span:nth-child(odd):before {
 +
  -webkit-animation-name: flip-top;
 +
          animation-name: flip-top;
 +
}
 +
span:nth-child(odd):after {
 +
  -webkit-animation-name: flip-bottom;
 +
          animation-name: flip-bottom;
 +
}
 +
span:nth-child(even):before {
 +
  -webkit-animation-name: flip-bottom;
 +
          animation-name: flip-bottom;
 +
}
 +
span:nth-child(even):after {
 +
  -webkit-animation-name: flip-top;
 +
          animation-name: flip-top;
 +
}
 +
span:nth-child(1n + 0):before {
 +
  color: #4EC0B6;
 +
}
 +
span:nth-child(1n + 0):after {
 +
  color: #4ea4c0;
 +
}
 +
span:nth-child(2n + 1):before {
 +
  color: #3967CB;
 +
}
 +
span:nth-child(2n + 1):after {
 +
  color: #3c39cb;
 +
}
 +
span:nth-child(3n + 2):before {
 +
  color: #FDCD2F;
 +
}
 +
span:nth-child(3n + 2):after {
 +
  color: #e8fd2f;
 +
}
 +
span:nth-child(4n + 3):before {
 +
  color: #E23942;
 +
}
 +
span:nth-child(4n + 3):after {
 +
  color: #e26839;
 +
}
 +
span:nth-child(1):before {
 +
  -webkit-animation-delay: 0.88706s;
 +
          animation-delay: 0.88706s;
 +
}
 +
span:nth-child(1):after {
 +
  -webkit-animation-delay: 1.32717s;
 +
          animation-delay: 1.32717s;
 +
}
 +
span:nth-child(2):before {
 +
  -webkit-animation-delay: 1.76318s;
 +
          animation-delay: 1.76318s;
 +
}
 +
span:nth-child(2):after {
 +
  -webkit-animation-delay: 2.19375s;
 +
          animation-delay: 2.19375s;
 +
}
 +
span:nth-child(3):before {
 +
  -webkit-animation-delay: 2.61756s;
 +
          animation-delay: 2.61756s;
 +
}
 +
span:nth-child(3):after {
 +
  -webkit-animation-delay: 3.03328s;
 +
          animation-delay: 3.03328s;
 +
}
 +
span:nth-child(4):before {
 +
  -webkit-animation-delay: 3.43965s;
 +
          animation-delay: 3.43965s;
 +
}
 +
span:nth-child(4):after {
 +
  -webkit-animation-delay: 3.8354s;
 +
          animation-delay: 3.8354s;
 +
}
 +
span:nth-child(5):before {
 +
  -webkit-animation-delay: 4.21932s;
 +
          animation-delay: 4.21932s;
 +
}
 +
span:nth-child(5):after {
 +
  -webkit-animation-delay: 4.59022s;
 +
          animation-delay: 4.59022s;
 +
}
 +
span:nth-child(6):before {
 +
  -webkit-animation-delay: 4.94696s;
 +
          animation-delay: 4.94696s;
 +
}
 +
span:nth-child(6):after {
 +
  -webkit-animation-delay: 5.28843s;
 +
          animation-delay: 5.28843s;
 +
}
 +
span:nth-child(7):before {
 +
  -webkit-animation-delay: 5.61358s;
 +
          animation-delay: 5.61358s;
 +
}
 +
span:nth-child(7):after {
 +
  -webkit-animation-delay: 5.92141s;
 +
          animation-delay: 5.92141s;
 +
}
 +
span:nth-child(8):before {
 +
  -webkit-animation-delay: 6.21098s;
 +
          animation-delay: 6.21098s;
 +
}
 +
span:nth-child(8):after {
 +
  -webkit-animation-delay: 6.48137s;
 +
          animation-delay: 6.48137s;
 +
}
 +
span:nth-child(9):before {
 +
  -webkit-animation-delay: 6.73177s;
 +
          animation-delay: 6.73177s;
 +
}
 +
span:nth-child(9):after {
 +
  -webkit-animation-delay: 6.96139s;
 +
          animation-delay: 6.96139s;
 +
}
 +
span:before, span:after {
 +
  display: block;
 +
  content: attr(data-text);
 +
  -webkit-animation: 0.88889s ease-out both;
 +
          animation: 0.88889s ease-out both;
 +
  -webkit-animation-name: inherit;
 +
          animation-name: inherit;
 +
  text-shadow: 0 0 1em;
 +
}
 +
span:before {
 +
  -webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
 +
  clip-path: polygon(0 0 100% 0, 100% 100%);
 +
  position: absolute;
 +
  -webkit-transform-origin: left center;
 +
      -ms-transform-origin: left center;
 +
          transform-origin: left center;
 +
  color: #4EC0B6;
 +
}
 +
span:after {
 +
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
 +
  clip-path: polygon(0 0, 100% 100%, 0 100%);
 +
  color: #3967CB;
 +
}
 +
-
/*A small hack to prevent flickering on some browsers*/
+
#Body path {
-
.accordian ul {
+
  stroke: #00ff30;
-
width: 2000px;
+
}
-
/*This will give ample space to the last item to move
+
#TopRed path {
-
instead of falling down/flickering during hovers.*/
+
  stroke: #ff0000;
 +
}
 +
#Bottom_Blue path {
 +
  stroke: #00c6ff;
 +
}
 +
#Bottom_Green path {
 +
  stroke: #69e692;
 +
}
 +
#TopYellow path {
 +
  stroke: #fff000;
 +
}
 +
#BottomYellow path {
 +
  stroke: #fff000;
 +
}
 +
.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;
}
}
-
.accordian li {
+
.butterfly {
-
position: relative;
+
  position: absolute;
-
display: block;
+
  top: 50%;
-
width: 160px;
+
  left: 82%;
-
float: left;
+
  margin-top: -250px;
-
+
  margin-left: -250px;
-
border-left: 1px solid #888;
+
  x: 0;
-
+
  y: 0;
-
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
+
  width: 500px;
-
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
+
  height: 500px;
-
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
+
  viewBox: 0 0 500 500;
-
+
  enable-background:new 0 0 500 500;
-
/*Transitions to give animation effect*/
+
  animation: wrapper 4s infinite;
-
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*/
+
.st0 {
-
.accordian ul:hover li {width: 40px;}
+
    stroke-dasharray: 640;
-
/*Lets apply hover effects now*/
+
    stroke-dashoffset: 0;
-
/*The LI hover style should override the UL hover style*/
+
  -webkit-transform-origin: center;
-
.accordian ul li:hover {width: 640px;}
+
      -ms-transform-origin: center;
 +
          transform-origin: center;
 +
  -webkit-animation: draw-around 4s infinite;
 +
          animation: draw-around 4s infinite;
 +
}
 +
@-webkit-keyframes draw-around {
 +
  0% {
 +
    stroke-dashoffset: 640;
 +
  }
 +
  10% {
 +
    stroke-dashoffset: 640;
 +
  }
 +
  100% {
 +
    stroke-dashoffset: 0;
 +
  }
 +
}
 +
@keyframes draw-around {
 +
  0% {
 +
    stroke-dashoffset: 640;
 +
  }
 +
  10% {
 +
    stroke-dashoffset: 640;
 +
  }
 +
  100% {
 +
    stroke-dashoffset: 0;
 +
  }
 +
}
-
.accordian li img {
+
@keyframes wrapper {
-
display: block;
+
  0% {
 +
    opacity: 0;
 +
   
 +
    -webkit-filter: blur(10px);
 +
    -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 styles*/
+
@-webkit-keyframes wrapper {
-
.image_title {
+
  0% {
-
background: rgba(0, 0, 0, 0.5);
+
    opacity: 0;
-
position: absolute;
+
   
-
left: 0; bottom: 0;
+
    -webkit-filter: blur(15px);
-
width: 640px;
+
    -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;
 +
  }
 +
}
 +
.below{
 +
-webkit-filter: url("#goo");
 +
          filter: url("#goo");
}
}
-
.image_title a {
+
 
-
display: block;
+
footer {
-
color: #fff;
+
  position: absolute;
-
text-decoration: none;
+
  bottom: 0;
-
padding: 20px;
+
  width: 100%;
-
font-size: 16px;
+
  height: 7vh;
 +
  background:red;
}
}
 +
 +
 +
.bubble {
 +
  position: absolute;
 +
  top: 90vh;
 +
  left: 45%;
 +
  width: 50px;
 +
  height: 20px;
 +
  background: red;
 +
  border-radius: 50%;
 +
  -webkit-animation: loader 1.3s ease-in-out infinite;
 +
  animation: loader 1.3s ease-in-out infinite;
 +
}
 +
.bubble:nth-child(2) {
 +
  left: 50%;
 +
  width: 40px;
 +
  height: 20px;
 +
  -webkit-animation: loader 2.6s ease-in-out infinite;
 +
  animation: loader 2.6s ease-in-out infinite;
 +
}
 +
 +
.bubble:nth-child(3) {
 +
  left: 55%;
 +
  -webkit-animation: loader 1.3s ease-in-out infinite;
 +
  animation: loader 1.3s ease-in-out infinite;
 +
}
 +
 +
@keyframes loader {
 +
  0% {
 +
    -webkit-transform: translate(0, 0);
 +
            transform: translate(0, 0);
 +
  }
 +
  50% {
 +
    -webkit-transform: translate(0, -70px);
 +
            transform: translate(0, -70px);
 +
  }
 +
 +
}
 +
 +
 +
</style>
 +
</html>

Latest revision as of 07:52, 9 June 2015

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