Template:Team:USTC-Software/Header-c

From 2012.igem.org

(Difference between revisions)
(Created page with "{{Team:USTC-Software/hidden}} <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>USTC-Header-c</titl...")
 
(10 intermediate revisions not shown)
Line 5: Line 5:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>USTC-Header-c</title>
<title>USTC-Header-c</title>
-
 
-
 
-
      <!--------no use here maybe one of  the above has include the below one
 
-
      <script type="text/javascript" src="resources/js-clock.js"></script>
 
-
              -------->
 
-
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
    
    
<style>
<style>
Line 33: Line 27:
background-color: black;
background-color: black;
background: url('https://static.igem.org/mediawiki/2012/c/ca/Ustc-software-2012-bg-hex.png');
background: url('https://static.igem.org/mediawiki/2012/c/ca/Ustc-software-2012-bg-hex.png');
 +
        background: url(' https://static.igem.org/mediawiki/igem.org/4/4e/Wiki-bg2.jpg');
 +
        background: url('https://static.igem.org/mediawiki/igem.org/c/c5/Carbon_fibre.png');
margin:0 auto;
margin:0 auto;
}
}
Line 57: Line 53:
width: 980px;
width: 980px;
height:auto;
height:auto;
-
margin: 12px auto;
+
margin: 0px auto;
margin-bottom:2px;
margin-bottom:2px;
padding: 0px;
padding: 0px;
-
font-family: Optima,"Courier New",Courier, "Andale Mono", Monaco ;
+
font-family: Optima,"Courier New",Courier, "Andale Mono", Monaco ;
-
background: url(../images/header-background.png) repeat; /* for IE:not recognize rgba()*/
+
background-color:rgba(0, 0, 0, 0.35);
-
background-color:rgba(0, 0, 0, 0.35) ;
+
                        background:transparent;
position:relative;
position:relative;
color: white;
color: white;
-
  background:#202020;/*for one of the choices*/
+
    }
    }
Line 150: Line 146:
}
}
-
li:after, li:before {
+
.header_menu li:after,.header_menu li:before {
-moz-transition:width 0.5s ease 0s;
-moz-transition:width 0.5s ease 0s;
height: 0px;
height: 0px;
Line 161: Line 157:
top: 32px;
top: 32px;
         }
         }
-
li:after {
+
.header_menu li:after {
background: -moz-linear-gradient(left, #0ad, #08b);
background: -moz-linear-gradient(left, #0ad, #08b);
left: 10px;
left: 10px;
       }
       }
-
li:before {
+
.header_menu li:before {
background: -moz-linear-gradient(right, #0ad, #08b);   
background: -moz-linear-gradient(right, #0ad, #08b);   
right:2px;
right:2px;
     }
     }
-
li:hover:after,li:hover:before{
+
.header_menu li:hover:after,.header_menu li:hover:before{
     width: 51%;
     width: 51%;
height: 1px;
height: 1px;
Line 175: Line 171:
     }  
     }  
-
li:active:after,li:active:before{
+
.header_menu li:active:after,.header_menu li:active:before{
     width: 51%;
     width: 51%;
height: 1px;
height: 1px;
     opacity:1;
     opacity:1;
     }  
     }  
-
li:active:after{left: 12px;}
+
.header_menu li:active:after{left: 12px;}
-
li:active:before{right:0px;}
+
.header_menu li:active:before{right:0px;}
/*---the end of head menu wrapper css-----*/
/*---the end of head menu wrapper css-----*/
Line 189: Line 185:
/*---the begin of head-text shade-shadow css-----*/
/*---the begin of head-text shade-shadow css-----*/
.shade-shadow{
.shade-shadow{
-
         font-size:58px;font-weight: bold;color:#333; /*#487a1b*/line-height:48px;
+
         font-size:58px;font-weight: bold;color:rgba(255,255,255,.7);line-height:48px;
 +
        background:rgba(255,255,255,.7) -webkit-linear-gradient(-15deg,#080808 5%,rgba(255,255,255,.7), rgba(255,255,255,.9),rgba(255,255,255,.7),#222 10%) no-repeat;
 +
        -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));
 +
        text-transform:uppercase;
 +
 
 +
 
 +
        -webkit-background-clip:text;
 +
        -webkit-text-fill-color:transparent;     
 +
        -webkit-animation:texttop0 125s linear infinite;
 +
-webkit-animation-delay:55ms;
 +
              }
 +
 
 +
 
 +
.shade-shadow:hover{
 +
        font-size:58px;font-weight: bold;color:#333;
 +
line-height:48px;
         background:#888 -webkit-linear-gradient(-15deg,#080808 5%,rgba(255,255,255,.7),
         background:#888 -webkit-linear-gradient(-15deg,#080808 5%,rgba(255,255,255,.7),
rgba(255,255,255,.9),rgba(255,255,255,.7),#222 10%) no-repeat;
rgba(255,255,255,.9),rgba(255,255,255,.7),#222 10%) no-repeat;
         -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));
         -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));
         -webkit-background-clip:text;
         -webkit-background-clip:text;
-
         -webkit-text-fill-color:transparent;
+
         -webkit-text-fill-color:transparent;    
-
         -webkit-animation:cliptexttop 3s linear infinite;
+
         -webkit-animation:texttop 3400ms linear infinite;
 +
    -webkit-animation-direction:alternate;
 +
    -webkit-animation-delay:50ms;
         text-transform:uppercase;
         text-transform:uppercase;
               }
               }
-
@-webkit-keyframes cliptexttop{
+
 
 +
@-webkit-keyframes texttop0{
 +
        0%{background-position:left 0;}
 +
        100%{background-position:33000px 0;}}
 +
   
 +
@-webkit-keyframes texttop{
         0%{background-position:left 0;}
         0%{background-position:left 0;}
         100%{background-position:1000px 0;}}
         100%{background-position:1000px 0;}}
-
/*---the end of head-text shade-shadow css-----*/
+
/*---the end of head-text shade-shadow css-----*/
-
+
 
 +
 
.unselectable {
.unselectable {
Line 241: Line 260:
width:140px;
width:140px;
top:2px;
top:2px;
-
right:28px;
+
right:23px;
/*border:1px red solid;
/*border:1px red solid;
background:rgba(2,22,0 .04); */
background:rgba(2,22,0 .04); */
Line 285: Line 304:
     #topBar div:hover {
     #topBar div:hover {
background: url('https://static.igem.org/mediawiki/2012/f/f8/Gray-top-arrow.png');
background: url('https://static.igem.org/mediawiki/2012/f/f8/Gray-top-arrow.png');
-
         -moz-transform: scale(1.08);
+
         -moz-transform: scale(1.05);
-
         -webkit-transform:  scale(1.08);
+
         -webkit-transform:  scale(1.05);
-
         -o-transform:scale(1.08);
+
         -o-transform:scale(1.05);
-
         transform:scale(1.08);
+
         transform:scale(1.05);
     }/**************************the end of to top css*************/    
     }/**************************the end of to top css*************/    
Line 305: Line 324:
<div class="unselectable">
<div class="unselectable">
-
                     <div id="head_text0"><!-----other effetive action chooce head_text or 1------>
+
                     <div id="head_tex0"><!-----other effetive action chooce head_text or 1------>
    <div id = "logo">
    <div id = "logo">
                             <section class="shade-shadow">USTC-Software</secton>
                             <section class="shade-shadow">USTC-Software</secton>
Line 317: Line 336:
     <div id="wrap_header_menu">
     <div id="wrap_header_menu">
  <ul class="header_menu">
  <ul class="header_menu">
-
         <li id="gn-home"><a href="index.html" class="home_li">Home</a></li>
+
         <li id="gn-home"><a href="home" class="home_li">Home</a></li>
-
         <li id="gn-pro"><a href="project.html" class="pro_li">Project</a></li>
+
         <li id="gn-pro"><a href="project" class="pro_li">Project</a></li>
-
         <li id="gn-tec"><a href="#" class="tec_li">Technology</a></li>
+
         <li id="gn-tec"><a href="technology" class="tec_li">Technology</a></li>
-
         <li id="gn-ach"><a href="#" class="ach_li">Achivements</a></li>
+
         <li id="gn-ach"><a href="achivements" class="ach_li">Achivements</a></li>
-
         <li id="gn-team"><a href="team.html" class="team_li">Our Team</a></li>
+
         <li id="gn-team"><a href="team" class="team_li">Our Team</a></li>
-
         <li id="gn-note"><a href="#" class="note_li">Notes</a></li>
+
         <li id="gn-note"><a href="notes" class="note_li">Notes</a></li>
-
         <li id="gn-hp"><a href="hp.html" class="hp_li">Human Practice</a></li>
+
         <li id="gn-hp"><a href="hp" class="hp_li">Human Practice</a></li>
       </ul>
       </ul>
     </div><!---the end of header-menu div--->
     </div><!---the end of header-menu div--->
Line 455: Line 474:
       <div id="goToTop" class="goToTop">TOP</div>
       <div id="goToTop" class="goToTop">TOP</div>
   </div><!-----the begin of go to top div---->  
   </div><!-----the begin of go to top div---->  
-
    <!----BACKUP-to the top div--
+
 
 +
<!----BACKUP-to the top div--
     <div id="to_top">
     <div id="to_top">
           <a href="#top"><img src="images/top-black-arrow.png" alt="Go back to Top"></a>
           <a href="#top"><img src="images/top-black-arrow.png" alt="Go back to Top"></a>
-
     </div><!-----the end of to top div---->
+
     </div>   ----------the end of to top div---->
-
<!-----the begin of go to top js---------
+
   
-
      <script type="text/javascript" src="resources/go-top-bar.js"></script>
+
-
<!---the js of top_bar on the line-
+
-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+
-
<!---the js of top_bar on the line-  end-->       
+
   <script type="text/javascript">
   <script type="text/javascript">
     (function(){
     (function(){

Latest revision as of 05:34, 15 August 2012

USTC-Header-c

TOP

Retrieved from "http://2012.igem.org/Template:Team:USTC-Software/Header-c"