Team:UNITN-Trento/CSS/Subs/Header
From 2013.igem.org
(Difference between revisions)
m |
|||
(157 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | /********/ | |
- | + | /*HEADER*/ | |
+ | /********/ | ||
- | + | #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(http://i44.tinypic.com/690qs8.jpg); | ||
+ | background-attachment: fixed; | ||
+ | background-position: 0px -500px; | ||
+ | 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- | + | #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 */ | ||
} | } | ||
- | #tn- | + | #tn-header #tn-menu > li > img { |
- | + | width: 76px; | |
+ | margin: 12px; | ||
} | } | ||
- | #tn-menu { | + | #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; | ||
} | } | ||
- | #tn-menu > li { | + | #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; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #tn-header #tn-menu > li.active > img { | ||
+ | width: 100px; | ||
+ | margin: 0; | ||
- | + | animation: image 1s; | |
- | + | -webkit-animation: image 1s; /* Safari and Chrome */ | |
} | } | ||
- | #tn-menu > li | + | #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*/ | |
- | + | ||
- | + | ||
- | + | #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; | ||
} | } | ||
- | #tn-menu li { | + | @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; | ||
+ | }*/ | ||
+ | |||
+ | #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; | ||
} | } | ||
- | #tn-menu | + | #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; | ||
} | } | ||
- | #tn-menu | + | #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-menu a { | + | #tn-header #tn-menu li ul li:hover a { |
- | + | color: white; | |
- | + | text-decoration: none; | |
- | + | text-shadow: 0 0 4px black; | |
} | } | ||
- | + | /*------------*/ | |
- | + | /*HEADER LOGHI*/ | |
- | + | /*------------*/ | |
+ | |||
+ | #tn-header #tn-loghi { | ||
+ | width: 100%; | ||
+ | height: 180px; | ||
} | } | ||
- | #tn- | + | #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; | ||
} | } | ||
- | #tn-menu li | + | #tn-menu li > span a img { |
- | + | margin-top: 2.5em; | |
- | + | transition: transform 5s; | |
+ | -webkit-transition: -webkit-transform 5s; /* Safari */ | ||
} | } | ||
- | #tn-menu li | + | #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*/ /********/
- 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(http://i44.tinypic.com/690qs8.jpg); background-attachment: fixed; background-position: 0px -500px; 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 {
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 */
}
- tn-header #tn-menu > li > img {
width: 76px; margin: 12px;
}
- 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;
}
- 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; }
}
- tn-header #tn-menu > li.active > img {
width: 100px; margin: 0;
animation: image 1s; -webkit-animation: image 1s; /* Safari and Chrome */
}
- 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*/
- 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;
}*/
- 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;
}
- 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;
}
- 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 {
color: white; text-decoration: none; text-shadow: 0 0 4px black;
}
/*------------*/ /*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 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 */
}