Team:UNITN-Trento/CSS/Subs/Header

From 2013.igem.org

(Difference between revisions)
Line 137: Line 137:
}
}
-
@keyframes move-item,
+
@keyframes move-item {
 +
    0% {
 +
        opacity: 0;
 +
 
 +
        top: 1.5em;
 +
 
 +
        padding: 0;
 +
        margin: 0;
 +
 
 +
        transform: rotate(0);
 +
        -ms-transform: rotate(0); /* IE 9 */
 +
        -webkit-transform: rotate(0); /* Safari and Chrome */
 +
    }
 +
    100% {
 +
        opacity: 1;
 +
 
 +
        top:2.5em;
 +
 
 +
        padding-top: 1em;
 +
        margin-top: 1em;
 +
 
 +
        transform: rotate(15deg);
 +
        -ms-transform: rotate(15deg); /* IE 9 */
 +
        -webkit-transform: rotate(15deg); /* Safari and Chrome */
 +
    }
 +
}
@-webkit-keyframes move-item {
@-webkit-keyframes move-item {
     0% {
     0% {

Revision as of 07:17, 27 August 2013

/********/ /*HEADER*/ /********/

  1. tn-header-wrap {
   display: inline-block;
   width: 100%;
   height: 250px;
   margin: 0;
   padding: 0;
   background-color: #2880C5;
   border-bottom: 7px solid white;
   background-image: url(Tn-2013-headerbg-Sfondobb.png);
   background-position: center;
   background-size: 100%;

}

  1. tn-header {
   display: static;
   position: relative;
   top: 0;
   max-width: 1300px;
   height: 180px;
   margin: 0 auto;
   padding: 1em;

}

/*-----------*/ /*HEADER MENU*/ /*-----------*/

  1. tn-header #tn-menu {
   position: absolute;
   top: 170px;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
   border-bottom: 4.5em solid #fefefe;

}

  1. tn-header #tn-menu > li {
   display: inline-block;
   height: 100px;
   width: 100px;
   margin: 0.5em;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 75%;
   line-height: 100px;
   /*font-weight: bold;*/
   text-shadow: 0 0 2px black;
   text-align: center;
   vertical-align: middle;
   transition-property: transform, background-size;
   transition-duration: 0.4s;
   transition-timing-function: linear;
   /* Safari */
   -webkit-transition-property:-webkit-transform, background-size;
   -webkit-transition-duration:0.4s;
   -webkit-transition-timing-function:linear;

}

  1. tn-header #tn-menu > li > a {
   display: block;
   padding: 0.3em 0.5em;
   margin-top: 2.2em;
   border-radius: 0.5em;
   border: 2px solid white;
   background: rgba(31,68,87,.9);
   color: #ffffff;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.5em;
   line-height: 1em;
   text-decoration: none;

}

  1. tn-header #tn-menu > li:hover {
   transform: rotate(-15deg);
   -ms-transform: rotate(-15deg); /* IE 9 */
   -webkit-transform: rotate(-15deg); /* Safari and Chrome */
   background-size: 100%;

}

  1. tn-header #tn-menu > li:hover > a {
   padding: 0.3em 0.5em;
   margin-top: 2.2em;
   border-radius: 0.5em;
   border: 3px solid white;
   background: #C4221C;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.5em;
   line-height: 1em;
   text-decoration: underline;

}

/*SUB MENU*/

  1. tn-header #tn-menu li ul {
   display: none;


   position: relative;


   width: 500px;
   height: 1em;


   line-height: 1em;
   list-style: none;
   transition-property: transform,opacity,padding,margin,top;
   transition-duration: 0.4s;
   transition-timing-function: linear;
   text-align: left;

}

@keyframes move-item {

   0% {
       opacity: 0;
       top: 1.5em;
       padding: 0;
       margin: 0;
       transform: rotate(0);
       -ms-transform: rotate(0); /* IE 9 */
       -webkit-transform: rotate(0); /* Safari and Chrome */
   }
   100% {
       opacity: 1;
       top:2.5em;
       padding-top: 1em;
       margin-top: 1em;
       transform: rotate(15deg);
       -ms-transform: rotate(15deg); /* IE 9 */
       -webkit-transform: rotate(15deg); /* Safari and Chrome */
   }

} @-webkit-keyframes move-item {

   0% {
       opacity: 0;
       top: 1.5em;
       padding: 0;
       margin: 0;
       transform: rotate(0);
       -ms-transform: rotate(0); /* IE 9 */
       -webkit-transform: rotate(0); /* Safari and Chrome */
   }
   100% {
       opacity: 1;
       top:2.5em;
       padding-top: 1em;
       margin-top: 1em;
       transform: rotate(15deg);
       -ms-transform: rotate(15deg); /* IE 9 */
       -webkit-transform: rotate(15deg); /* Safari and Chrome */
   }

}

  1. tn-header #tn-menu li ul {
   animation-name: move-item;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-delay: 0;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-timing-function: running;
   animation-name: move-item;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-delay: 0;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-timing-function: running;

}

  1. tn-header #tn-menu li ul li {
   display: inline-block;
   height: 1.4em;
   margin: 0;
   padding: 0;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.5em;
   font-variant: small-caps;
   line-height: 1em;

}

  1. tn-header #tn-menu li ul li a {
   display: block;
   padding-top: 0em;
   margin: 0 0.5em;
   color: #1F4457;
   text-decoration: none;
   text-shadow: none;

}

  1. tn-header #tn-menu li ul li:hover a {
   color: #C4221C;
   text-decoration: underline;

}

/*------------*/ /*HEADER LOGHI*/ /*------------*/

  1. tn-header #tn-loghi {
   width: 100%;
   height: 180px;

}

  1. tn-header #tn-loghi .title {
   margin: 0;
   margin-top: 0.3em;
   color: #eee;
   font-family: 'Marck Script', cursive;
   font-size: 7em;
   line-height: 1em;
   text-align: center;
   text-shadow: 1px 1px 5px #1e0b12;

}