Team:USTC-Software/css/header style
From 2012.igem.org
(Difference between revisions)
(24 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
position: relative; | position: relative; | ||
margin: 0px auto; | margin: 0px auto; | ||
- | float: none; | + | margin-bottom:100px; |
+ | float: none; | ||
+ | list-style:none; | ||
} | } | ||
Line 19: | Line 21: | ||
font-size:64px; | font-size:64px; | ||
font-family: 'Marcellus SC', serif; | font-family: 'Marcellus SC', serif; | ||
- | -webkit-transition: | + | -webkit-transition: all .5s ease-out; |
- | -moz-transition: | + | -moz-transition: all .5s ease-out; |
- | -o-transition: | + | -o-transition: all .5s ease-out; |
- | -ms-transition: | + | -ms-transition: all .5s ease-out; |
- | transition: | + | transition: all .5s ease-out; |
+ | } | ||
+ | #team_logo a{ | ||
+ | text-shadow: 8px 6px 1px black; | ||
+ | position:relative; | ||
+ | -webkit-transition: color .5s ease-out; | ||
+ | -moz-transition: color .5s ease-out; | ||
+ | -o-transition: color .5s ease-out; | ||
+ | -ms-transition: color .5s ease-out; | ||
+ | transition: color .5s ease-out; | ||
+ | } | ||
+ | |||
+ | #team_logo a:active{ | ||
+ | text-shadow: 6px 4px 1px black; | ||
+ | left:1px; | ||
+ | top:1px; | ||
+ | } | ||
+ | |||
+ | #team_logo:hover a{ | ||
+ | color:#3cb5f9; | ||
} | } | ||
- | |||
.nav_button + .nav_button{ | .nav_button + .nav_button{ | ||
- | margin-left: | + | margin-left:12px; |
} | } | ||
.nav_button a{ | .nav_button a{ | ||
Line 44: | Line 64: | ||
- | #navs { | + | #navs { |
clear:both; | clear:both; | ||
- | margin-bottom: | + | margin-bottom:30px; |
} | } | ||
#navs div { margin-right: 5px; float:left;} | #navs div { margin-right: 5px; float:left;} | ||
Line 55: | Line 75: | ||
text-decoration:none; | text-decoration:none; | ||
color:white; | color:white; | ||
+ | text-shadow: 6px 6px 1px black; | ||
+ | -webkit-transition: color .5s ease-out; | ||
+ | -moz-transition: color .5s ease-out; | ||
+ | -o-transition: color .5s ease-out; | ||
+ | -ms-transition: color .5s ease-out; | ||
+ | transition: color .5s ease-out; | ||
+ | |||
+ | } | ||
+ | #navs div a:active{ | ||
+ | left:1px; | ||
+ | top:1px; | ||
+ | text-shadow: 4px 4px 1px black; | ||
+ | } | ||
+ | #navs div a:hover{ | ||
+ | color:#3cb5f9; | ||
+ | } | ||
+ | |||
+ | #navs div ul{ | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | z-index:99999999; | ||
+ | } | ||
+ | |||
+ | #navs div ul li{ | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | .nav_button ul li{ | ||
+ | background-color:black; | ||
+ | } | ||
+ | |||
+ | #navs div:hover ul{ | ||
+ | display:block; | ||
} | } |
Latest revision as of 11:32, 13 November 2012
- header_wrapper {
width: 980px; position: relative; margin: 0px auto; margin-bottom:100px; float: none; list-style:none;
}
- header_wrapper a{
display:block; text-decoration:none; color:white;
}
- team_logo {
height: 74px; float: left; margin-top: 30px; font-size:64px; font-family: 'Marcellus SC', serif; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out;
}
- team_logo a{
text-shadow: 8px 6px 1px black; position:relative; -webkit-transition: color .5s ease-out; -moz-transition: color .5s ease-out; -o-transition: color .5s ease-out; -ms-transition: color .5s ease-out; transition: color .5s ease-out;
}
- team_logo a:active{
text-shadow: 6px 4px 1px black; left:1px; top:1px;
}
- team_logo:hover a{
color:#3cb5f9;
}
.nav_button + .nav_button{
margin-left:12px; } .nav_button a{ font-size:22px; font-family: 'Marcellus SC', serif; }
- header_wrapper a#igem_home{
position:absolute; top:0px; right:0px;
}
- navs {
clear:both; margin-bottom:30px;
}
- navs div { margin-right: 5px; float:left;}
- navs div a{
display:block; height:100%; width:100%; text-decoration:none; color:white; text-shadow: 6px 6px 1px black; -webkit-transition: color .5s ease-out; -moz-transition: color .5s ease-out; -o-transition: color .5s ease-out; -ms-transition: color .5s ease-out; transition: color .5s ease-out; } #navs div a:active{ left:1px; top:1px; text-shadow: 4px 4px 1px black; } #navs div a:hover{ color:#3cb5f9; }
- navs div ul{
display:none; position:absolute; z-index:99999999;
}
- navs div ul li{
list-style:none;
}
.nav_button ul li{
background-color:black;
}
- navs div:hover ul{
display:block;
}