Team:UNITN-Trento/CSS/Subs/Header

From 2013.igem.org

(Difference between revisions)
Line 4: Line 4:
#tn-header-wrap {
#tn-header-wrap {
-
    display: inline-block;
+
display: inline-block;
-
    width: 100%;
+
width: 100%;
-
    height: 250px;
+
height: 250px;
-
    margin: 0;
+
margin: 0;
-
    padding: 0;
+
padding: 0;
-
    background-color: #2880C5;
+
background-color: #2880C5;
-
    border-bottom: 7px solid white;
+
border-bottom: 7px solid white;
 +
box-shadow: 2px 0 6px #323232;
-
    background-image: url(https://static.igem.org/mediawiki/2013/5/53/Tn-2013-headerbg-Sfondobb.png);
+
background-image: url(http://i44.tinypic.com/690qs8.jpg);
-
    background-position: center;
+
background-position: center;
-
    background-size: 100%;
+
background-size: 100%;
}
}
#tn-header {
#tn-header {
-
    display: static;
+
display: static;
-
    position: relative;
+
position: relative;
-
    top: 0;
+
top: 0;
-
    max-width: 1300px;
+
max-width: 1300px;
-
    height: 180px;
+
height: 180px;
-
    margin: 0 auto;
+
margin: 0 auto;
-
    padding: 1em;
+
padding: 1em;
}
}
Line 37: Line 38:
#tn-header #tn-menu {
#tn-header #tn-menu {
-
    position: absolute;
+
position: absolute;
-
    top: 170px;
+
top: 170px;
-
    left: 0;
+
left: 0;
-
    width: 100%;
+
width: 100%;
-
    margin: 0;
+
margin: 0;
-
    padding: 0;
+
padding: 0;
-
    list-style: none;
+
list-style: none;
-
    text-align: center;
+
text-align: center;
}
}
#tn-header #tn-menu > li {
#tn-header #tn-menu > li {
-
    display: inline-block;
+
position: relative;
 +
display: inline-block;
-
    height: 100px;
+
height: 100px;
-
    width: 100px;
+
width: 100px;
-
    margin: 0.5em;
+
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;
-
    background-position: center center;
+
transition: transform 0.4s;
-
    background-repeat: no-repeat;
+
-webkit-transition: -webkit-transform 0.4s; /* Safari */
-
    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,box-shadow;
+
-
    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;
+
}
}
-
#tn-header #tn-menu > li > div {
+
#tn-header #tn-menu > li > img {
-
    display: block;
+
width: 76px;
-
    padding: 0.3em 0.5em;
+
margin: 12px;
-
    margin-top: 3.5em;
+
-
    border-radius: 0.5em;
+
-
    border: 2px solid white;
+
-
    background: rgba(31,68,87,.9);
+
-
    text-align: center;
+
-
    vertical-align: middle;
+
}
}
-
#tn-header #tn-menu > li > div > a {
+
#tn-header #tn-menu > li > a {
-
    color: #ffffff;
+
display: block;
-
    font-family: 'Mouse Memoirs', sans-serif;
+
 
-
    font-size: 1.5em;
+
position: absolute;
-
    line-height: 1em;
+
top: 2.2em;
-
    text-decoration: none;
+
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);
 +
color: #ffffff;
 +
font-family: 'Mouse Memoirs', sans-serif;
 +
font-size: 1.5em;
 +
line-height: 1em;
 +
text-decoration: none;
}
}
#tn-header #tn-menu > li:hover {
#tn-header #tn-menu > li:hover {
-
    transform: rotate(-15deg);
+
transform: rotate(-15deg);
-
    -ms-transform: rotate(-15deg); /* IE 9 */
+
-ms-transform: rotate(-15deg); /* IE 9 */
-
    -webkit-transform: rotate(-15deg); /* Safari and Chrome */
+
-webkit-transform: rotate(-15deg); /* Safari and Chrome */
-
    background-size: 100%;
+
/*background-size: 100%;*/
}
}
-
#tn-header #tn-menu > li:hover > div {
+
@keyframes image {
-
    box-shadow: 2px 2px 2px #323232;
+
from {
-
    padding: 0.3em 0.5em;
+
width: 76px;
-
    margin-top: 3.5em;
+
margin: 12px;
-
    border-radius: 0.5em;
+
}
-
    border: 3px solid white;
+
to {
-
    background: #C4221C;
+
width: 100px;
 +
margin: 0;
 +
}
}
}
 +
@-webkit-keyframes image /* Safari and Chrome */ {
 +
from {
 +
width: 76px;
 +
margin: 12px;
 +
}
 +
to {
 +
width: 100px;
 +
margin: 0;
 +
}
 +
}
 +
 +
#tn-header #tn-menu > li:hover > img {
 +
width: 100px;
 +
margin: 0;
-
#tn-header #tn-menu > li:hover > div > a {
+
animation: image 1s;
-
    font-family: 'Mouse Memoirs', sans-serif;
+
-webkit-animation: image 1s; /* Safari and Chrome */
-
    font-size: 1.5em;
+
}
-
    line-height: 1em;
+
 
-
    text-decoration: underline;
+
#tn-header #tn-menu > li:hover > 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;
}
}
Line 123: Line 160:
#tn-header #tn-menu li ul {
#tn-header #tn-menu li ul {
-
    display: none;
+
display: none;
-
    position: relative;
+
position: absolute;
 +
top: 75%;
 +
left: -100%;
-
    width: 500px;
+
width: 450px;
-
    height: 1em;
+
height: 3em;
-
    line-height: 1em;
+
padding: 0;
-
    list-style: none;
+
padding-top: 3em;
 +
margin: 0;
 +
margin-top: 1em;
-
    transition-property: transform,opacity,padding,margin,top;
+
line-height: 1em;
-
    transition-duration: 0.4s;
+
list-style: none;
-
    transition-timing-function: linear;
+
-
   
+
-
    text-align: left;
+
-
}
+
-
@keyframes open-submenu {
+
transform: rotate(15deg);
-
    0% {
+
-ms-transform: rotate(15deg); /* IE 9 */
-
        opacity: 0;
+
-webkit-transform: rotate(15deg); /* Safari and Chrome */
-
        /*
+
-
        top: 1.5em;
+
text-align: left;
-
        padding: 0;
+
-
        margin: 0;
+
-
        transform: rotate(15deg);
+
-
        -ms-transform: rotate(15deg); /* IE 9 */
+
-
        top:2.5em;
+
-
        padding-top: 1em;
+
-
        margin-top: 1em;
+
-
        transform: rotate(15deg);
+
-
        -ms-transform: rotate(15deg); /* IE 9 */
+
-
    }
+
-
    50% {
+
-
        opacity: 0;
+
-
        /*
+
-
        top: 1.5em;
+
-
        padding: 0;
+
-
        margin: 0;
+
-
        transform: rotate(15deg);
+
-
        -ms-transform: rotate(15deg); /* IE 9 */
+
-
        top:2.5em;
+
-
        padding-top: 1em;
+
-
        margin-top: 1em;
+
-
        transform: rotate(15deg);
+
-
        -ms-transform: rotate(15deg); /* IE 9 */
+
-
    }
+
-
    100% {
+
-
        opacity: 1;
+
-
        top:2.5em;
+
-
        padding-top: 1em;
+
-
        margin-top: 1em;
+
-
        transform: rotate(15deg);
+
-
        -ms-transform: rotate(15deg); /* IE 9 */
+
-
    }
+
}
}
-
@-webkit-keyframes open-submenu {
+
@keyframes submenu {
-
    0% {
+
0% {
-
        opacity: 0;
+
opacity: 0;
-
        /*
+
}
-
        top: 1.5em;
+
50% {
-
        padding: 0;
+
opacity: 0;
-
        margin: 0;
+
}
-
        -webkit-transform: rotate(0deg); /* Safari and Chrome */
+
100% {
-
        top:2.5em;
+
opacity: 1;
-
        padding-top: 1em;
+
}
-
        margin-top: 1em;
+
}
-
        -webkit-transform: rotate(15deg); /* Safari and Chrome */
+
@-webkit-keyframes submenu /* Safari and Chrome */ {
-
    }
+
0% {
-
    50% {
+
opacity: 0;
-
        opacity: 0;
+
}
-
        /*
+
50% {
-
        top: 1.5em;
+
opacity: 0;
-
        padding: 0;
+
}
-
        margin: 0;
+
100% {
-
        -webkit-transform: rotate(0deg); /* Safari and Chrome */
+
opacity: 1;
-
        top:2.5em;
+
}
-
        padding-top: 1em;
+
-
        margin-top: 1em;
+
-
        -webkit-transform: rotate(15deg); /* Safari and Chrome */
+
-
    }
+
-
    100% {
+
-
        opacity: 1;
+
-
        top:2.5em;
+
-
        padding-top: 1em;
+
-
        margin-top: 1em;
+
-
        -webkit-transform: rotate(15deg); /* Safari and Chrome */
+
-
    }
+
}
}
#tn-header #tn-menu li:hover ul {
#tn-header #tn-menu li:hover ul {
-
    display: block;
+
display: block;
-
    animation: open-submenu 0.8s;
+
-
    -webkit-animation: open-submenu 0.8s;
+
-
 
+
-
    opacity: 1;
+
-
    top:2.5em;
+
-
    padding-top: 1em;
+
animation: submenu .5s;
-
    margin-top: 1em;
+
-webkit-animation: submenu .5s; /* Safari and Chrome */
-
    transform: rotate(15deg);
+
-
    -ms-transform: rotate(15deg); /* IE 9 */
+
-
    -webkit-transform: rotate(15deg); /* Safari and Chrome */
+
}
}
#tn-header #tn-menu li ul li {
#tn-header #tn-menu li ul li {
-
    display: inline-block;
+
display: inline-block;
-
    height: 1.4em;
+
height: 1.4em;
-
    margin: 0;
+
margin: 0;
-
    padding: 0;
+
padding: 0;
-
    font-family: 'Mouse Memoirs', sans-serif;
+
font-family: 'Mouse Memoirs', sans-serif;
-
    font-size: 1.5em;
+
font-size: 1.5em;
-
    font-variant: small-caps;
+
font-variant: small-caps;
-
    line-height: 1em;
+
line-height: 1em;
}
}
#tn-header #tn-menu li ul li a {
#tn-header #tn-menu li ul li a {
-
    display: block;
+
display: block;
-
    padding-top: 0em;
+
padding-top: 0em;
-
    margin: 0 0.5em;
+
margin: 0 0.5em;
-
    color: #1F4457;
+
color: #1F4457;
-
    text-decoration: none;
+
text-decoration: none;
-
    text-shadow: none;
+
text-shadow: none;
}
}
#tn-header #tn-menu li ul li:hover a {
#tn-header #tn-menu li ul li:hover a {
-
    color: #C4221C;
+
color: #C4221C;
-
    text-decoration: underline;
+
text-decoration: underline;
}
}
Line 260: Line 246:
#tn-header #tn-loghi {
#tn-header #tn-loghi {
-
    width: 100%;
+
width: 100%;
-
    height: 180px;
+
height: 180px;
}
}
#tn-header #tn-loghi .title {
#tn-header #tn-loghi .title {
-
    margin: 0;
+
margin: 0;
-
    margin-top: 0.3em;
+
margin-top: 0.3em;
-
    color: #eee;
+
color: #eee;
-
    font-family: 'Marck Script', cursive;
+
font-family: 'Marck Script', cursive;
-
    font-size: 7em;
+
font-size: 7em;
-
    line-height: 1em;
+
line-height: 1em;
-
    text-align: center;
+
text-align: center;
-
    text-shadow: 1px 1px 5px #1e0b12;
+
text-shadow: 1px 1px 2px #000;
}
}

Revision as of 14:04, 7 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: 2px 0 6px #323232;

background-image: url(http://i44.tinypic.com/690qs8.jpg); 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; }

  1. tn-header #tn-menu > li {

position: relative; 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: 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); 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%;*/ }

@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:hover > img {

width: 100px; margin: 0;

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

  1. tn-header #tn-menu > li:hover > 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: 75%; left: -100%;

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; } }

  1. tn-header #tn-menu li:hover ul {

display: block;

animation: submenu .5s; -webkit-animation: submenu .5s; /* Safari and Chrome */ }

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

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