Team:UNITN-Trento/CSS/Subs/Header

From 2013.igem.org

(Difference between revisions)
 
(26 intermediate revisions not shown)
Line 14: Line 14:
     background-color: #2880C5;
     background-color: #2880C5;
     border-bottom: 7px solid white;
     border-bottom: 7px solid white;
-
     box-shadow: 2px 0 6px #323232;
+
     box-shadow: inset 0 -2px 6px black;
     background-image: url(http://i44.tinypic.com/690qs8.jpg);
     background-image: url(http://i44.tinypic.com/690qs8.jpg);
-
     background-position: center;
+
    background-attachment: fixed;
 +
     background-position: 0px -500px;
     background-size: 100%;
     background-size: 100%;
}
}
Line 58: Line 59:
     width: 100px;
     width: 100px;
-
     margin: 0.5em;
+
     margin: 0.4em;
     /*
     /*
     background-position: center center;
     background-position: center center;
Line 94: Line 95:
     border: 3px solid white;
     border: 3px solid white;
     background: rgba(31,68,87,.9);
     background: rgba(31,68,87,.9);
 +
    background-image: url(imgs/box-bottoni.png);
     color: #ffffff;
     color: #ffffff;
     font-family: 'Mouse Memoirs', sans-serif;
     font-family: 'Mouse Memoirs', sans-serif;
Line 100: Line 102:
     text-decoration: none;
     text-decoration: none;
-
     z-index: 0;
+
     z-index: 5;
}
}
-
#tn-header #tn-menu > li:hover {
+
#tn-header #tn-menu > li.active {
     transform: rotate(-15deg);
     transform: rotate(-15deg);
     -ms-transform: rotate(-15deg); /* IE 9 */
     -ms-transform: rotate(-15deg); /* IE 9 */
Line 132: Line 134:
}
}
-
#tn-header #tn-menu > li:hover > img {
+
#tn-header #tn-menu > li.active > img {
     width: 100px;
     width: 100px;
     margin: 0;
     margin: 0;
Line 140: Line 142:
}
}
-
#tn-header #tn-menu > li:hover > a {
+
#tn-header #tn-menu > li.active > a {
     display: block;
     display: block;
Line 157: Line 159:
     line-height: 1em;
     line-height: 1em;
     text-decoration: underline;
     text-decoration: underline;
-
 
-
    z-index: 1;
 
}
}
Line 166: Line 166:
     display: none;
     display: none;
     position: absolute;
     position: absolute;
-
     top: 75%;
+
     top: 60%;
-
     left: -100%;
+
     left: -125%;
     width: 450px;
     width: 450px;
Line 185: Line 185:
      
      
     text-align: left;
     text-align: left;
-
   
 
-
    z-index:2;
 
}
}
Line 212: Line 210:
}
}
-
#tn-header #tn-menu li:hover ul {
+
/*#tn-header #tn-menu li:hover ul {
     display: block;
     display: block;
     animation: submenu .5s;
     animation: submenu .5s;
-
     -webkit-animation: submenu .5s; /* Safari and Chrome */
+
     -webkit-animation: submenu .5s;
-
}
+
}*/
#tn-header #tn-menu li ul li {
#tn-header #tn-menu li ul li {
     display: inline-block;
     display: inline-block;
-
     height: 1.4em;
+
     height: 32px;
     margin: 0;
     margin: 0;
 +
    margin-bottom: 3px;
     padding: 0;
     padding: 0;
 +
    background-color: rgba(45,133,110,.8);
 +
    border-radius: 0.5em;
 +
    border: 3px solid rgba(250,250,250,1);
 +
    box-shadow: 1px 1px 2px black;
     font-family: 'Mouse Memoirs', sans-serif;
     font-family: 'Mouse Memoirs', sans-serif;
-
     font-size: 1.5em;
+
     font-size: 1.3em;
-
    font-variant: small-caps;
+
-
     line-height: 1em;
+
     line-height: 1.5em;
 +
    vertical-align: middle;
}
}
Line 237: Line 240:
     padding-top: 0em;
     padding-top: 0em;
     margin: 0 0.5em;
     margin: 0 0.5em;
-
     color: #1F4457;
+
     color: white;
     text-decoration: none;
     text-decoration: none;
-
     text-shadow: none;
+
     text-shadow: 0 0 8px black;
 +
}
 +
 
 +
#tn-header #tn-menu li ul li:hover {
 +
    background-color: rgba(196,34,28,.8);
 +
    border: 3px solid white;
 +
    border-radius: 0.5em;
 +
    box-shadow: 2px 2px 4px black;
}
}
#tn-header #tn-menu li ul li:hover a {
#tn-header #tn-menu li ul li:hover a {
-
     color: #C4221C;
+
     color: white;
-
     text-decoration: underline;
+
     text-decoration: none;
 +
    text-shadow: 0 0 4px black;
}
}
Line 268: Line 279:
     text-align: center;
     text-align: center;
     text-shadow: 1px 1px 2px #000;
     text-shadow: 1px 1px 2px #000;
 +
}
 +
 +
#tn-menu li > span a img {
 +
    margin-top: 2.5em;
 +
    transition: transform 5s;
 +
    -webkit-transition: -webkit-transform 5s; /* Safari */
 +
}
 +
 +
#tn-menu li > span a:hover img {
 +
    transition: transform 5s;
 +
    -webkit-transition: -webkit-transform 5s; /* Safari */
 +
 +
    transform:rotate(3000deg);
 +
    -ms-transform:rotate(3000deg); /* IE 9 */
 +
    -webkit-transform:rotate(3000deg); /* Safari and Chrome */
 +
}
}

Latest revision as of 14:42, 29 September 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;
   box-shadow: inset 0 -2px 6px black;

   background-image: url(690qs8.jpg);
   background-attachment: fixed;
   background-position: 0px -500px;
   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;

}

  1. tn-header #tn-menu > li { 
   position: relative;
   display: inline-block;

   height: 100px;
   width: 100px;

   margin: 0.4em;
   /*
   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: transform 0.4s;
   -webkit-transition: -webkit-transform 0.4s; /* Safari */

}

  1. tn-header #tn-menu > li > img { 
   width: 76px;
   margin: 12px;

}

  1. tn-header #tn-menu > li > a { 
   display: block;

   position: absolute;
   top: 2.2em;
   left: 0;

   padding: 0.3em 0.5em;
   /*margin-top: 2.2em;*/

   width: 3em;

   border-radius: 0.5em;
   border: 3px solid white;
   background: rgba(31,68,87,.9);
   background-image: url(imgs/box-bottoni.png);
   color: #ffffff;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.5em;
   line-height: 1em;
   text-decoration: none;

   z-index: 5;

}

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

   /*background-size: 100%;*/

}

@keyframes image { 

   from {
       width: 76px;
       margin: 12px;
   }
   to {
       width: 100px;
       margin: 0;
   }

} @-webkit-keyframes image /* Safari and Chrome */ { 

   from {
       width: 76px;
       margin: 12px;
   }
   to {
       width: 100px;
       margin: 0;
   }

}

  1. tn-header #tn-menu > li.active > img { 
   width: 100px;
   margin: 0;

   animation: image 1s;
   -webkit-animation: image 1s; /* Safari and Chrome */

}

  1. tn-header #tn-menu > li.active > a { 
   display: block;

   position: absolute;
   top: 2.2em;
   left: 0;

   padding: 0.3em 0.5em;
   /*margin-top: 2.2em;*/
   border-radius: 0.5em;
   border: 3px solid white;
   box-shadow: 2px 2px 4px #323232;
   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: absolute;
   top: 60%;
   left: -125%;

   width: 450px;
   height: 3em;

   padding: 0;
   padding-top: 3em;
   margin: 0;
   margin-top: 1em;

   line-height: 1em;
   list-style: none;

   transform: rotate(15deg);
   -ms-transform: rotate(15deg); /* IE 9 */
   -webkit-transform: rotate(15deg); /* Safari and Chrome */
   
   text-align: left;

}

@keyframes submenu { 

   0% {
       opacity: 0;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

} @-webkit-keyframes submenu /* Safari and Chrome */ { 

   0% {
       opacity: 0;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

}

/*#tn-header #tn-menu li:hover ul { 

   display: block;

   animation: submenu .5s;
   -webkit-animation: submenu .5s;

}*/

  1. tn-header #tn-menu li ul li { 
   display: inline-block;
   height: 32px;

   margin: 0;
   margin-bottom: 3px;
   padding: 0;

   background-color: rgba(45,133,110,.8);
   border-radius: 0.5em;
   border: 3px solid rgba(250,250,250,1);
   box-shadow: 1px 1px 2px black;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.3em;

   line-height: 1.5em;
   vertical-align: middle;

}

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

}

  1. tn-header #tn-menu li ul li:hover { 
   background-color: rgba(196,34,28,.8);
   border: 3px solid white;
   border-radius: 0.5em;
   box-shadow: 2px 2px 4px black;

}

  1. tn-header #tn-menu li ul li:hover a { 
   color: white;
   text-decoration: none;
   text-shadow: 0 0 4px black;

}

/*------------*/ /*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 2px #000;

}

  1. tn-menu li > span a img { 
   margin-top: 2.5em;
   transition: transform 5s;
   -webkit-transition: -webkit-transform 5s; /* Safari */

}

  1. tn-menu li > span a:hover img { 
   transition: transform 5s;
   -webkit-transition: -webkit-transform 5s; /* Safari */

   transform:rotate(3000deg);
   -ms-transform:rotate(3000deg); /* IE 9 */
   -webkit-transform:rotate(3000deg); /* Safari and Chrome */

}

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Subs/Header"