Team:UNITN-Trento/CSS/Subs/Header
From 2013.igem.org
(Difference between revisions)
m |
m |
||
Line 68: | Line 68: | ||
vertical-align: middle; | vertical-align: middle; | ||
- | + | transition-property: transform, background-size; | |
- | + | transition-duration: 0.4s; | |
- | + | transition-timing-function: linear; | |
- | + | transition-delay: 0.5s; | |
- | + | /* Safari */ | |
- | + | -webkit-transition-property:-webkit-transform, background-size; | |
- | + | -webkit-transition-duration:0.4s; | |
+ | -webkit-transition-timing-function:linear; | ||
+ | -webkit-transition-delay:0.5s; | ||
} | } | ||
Line 118: | Line 120: | ||
top: 2.5em; | top: 2.5em; | ||
- | width: | + | width: 500px; |
+ | height: 1em; | ||
- | padding: 0 | + | padding: 0; |
- | + | padding-top: 1em; | |
margin: 0; | margin: 0; | ||
margin-top: 1em; | margin-top: 1em; | ||
Line 133: | Line 136: | ||
text-align: left; | text-align: left; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 156: | Line 147: | ||
margin: 0; | margin: 0; | ||
- | padding: 0 | + | padding: 0; |
font-family: 'Mouse Memoirs', sans-serif; | font-family: 'Mouse Memoirs', sans-serif; | ||
Line 162: | Line 153: | ||
font-variant: small-caps; | font-variant: small-caps; | ||
- | line-height: | + | line-height: 1em; |
} | } | ||
#tn-header #tn-menu li ul li a { | #tn-header #tn-menu li ul li a { | ||
display: block; | display: block; | ||
- | padding: | + | padding-top: 0em; |
- | margin: 0 | + | margin: 0 0.5em; |
color: #1F4457; | color: #1F4457; | ||
text-decoration: none; | text-decoration: none; |
Revision as of 14:58, 26 August 2013
/********/ /*HEADER*/ /********/
- 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(); background-position: center; background-size: 100%;
}
- tn-header {
display: static; position: relative; top: 0;
max-width: 1300px; height: 180px;
margin: 0 auto; padding: 1em;
}
/*-----------*/ /*HEADER MENU*/ /*-----------*/
- tn-header #tn-menu {
position: absolute; top: 170px; left: 0;
width: 100%;
margin: 0; padding: 0;
list-style: none; text-align: center;
}
- 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; transition-delay: 0.5s; /* Safari */ -webkit-transition-property:-webkit-transform, background-size; -webkit-transition-duration:0.4s; -webkit-transition-timing-function:linear; -webkit-transition-delay:0.5s; }
- 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;
}
- 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%;
}
- 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*/
- tn-header #tn-menu li ul {
display: none; position: relative; top: 2.5em;
width: 500px; height: 1em;
padding: 0; padding-top: 1em; 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;
}
- tn-header #tn-menu li:hover ul {
display: block;
}
- 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;
}
- 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;
}
- tn-header #tn-menu li ul li:hover a {
color: #C4221C; text-decoration: underline;
}
/*------------*/ /*HEADER LOGHI*/ /*------------*/
- tn-header #tn-loghi {
width: 100%; height: 180px;
}
- 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;
}