Team:USTC-Software/css/header style

From 2012.igem.org

(Difference between revisions)
 
(23 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: background .5s ease-out;
+
     -webkit-transition: all .5s ease-out;
-
     -moz-transition: background .5s ease-out;
+
     -moz-transition: all .5s ease-out;
-
     -o-transition: background .5s ease-out;
+
     -o-transition: all .5s ease-out;
-
     -ms-transition: background .5s ease-out;          
+
     -ms-transition: all .5s ease-out;
-
     transition: background .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;
}
}
-
#team_logo:hover{ }
 
.nav_button + .nav_button{
.nav_button + .nav_button{
-
     margin-left:10px;
+
     margin-left:12px;
     }
     }
     .nav_button a{
     .nav_button a{
Line 44: Line 64:
-
#navs {  
+
#navs {
 +
    clear:both;
     margin-bottom:30px;
     margin-bottom:30px;
}
}
Line 54: 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

  1. header_wrapper {
   width: 980px;
   position: relative;
   margin: 0px auto;
   margin-bottom:100px;
   float: none;
   list-style:none;

}

  1. header_wrapper a{
   display:block;
   text-decoration:none;
   color:white;

}


  1. 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;

}

  1. 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;

}

  1. team_logo a:active{
   text-shadow: 6px 4px 1px black;
   left:1px;
   top:1px;

}

  1. team_logo:hover a{
   color:#3cb5f9;

}


.nav_button + .nav_button{

   margin-left:12px;
   }
   .nav_button a{
       font-size:22px;
       font-family: 'Marcellus SC', serif;
   }


  1. header_wrapper a#igem_home{
   position:absolute;
   top:0px;
   right:0px;

}


  1. navs {
   clear:both;
   margin-bottom:30px;

}

  1. navs div { margin-right: 5px; float:left;}
  2. 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;
   }
  1. navs div ul{
   display:none;
   position:absolute;
   z-index:99999999;

}

  1. navs div ul li{
   list-style:none;

}

.nav_button ul li{

   background-color:black;

}

  1. navs div:hover ul{
   display:block;

}