Template:Team:USTC-Software/Header-c
From 2012.igem.org
(Difference between revisions)
(8 intermediate revisions not shown) | |||
Line 27: | 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 51: | Line 53: | ||
width: 980px; | width: 980px; | ||
height:auto; | height:auto; | ||
- | margin: | + | 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-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; | ||
- | + | ||
} | } | ||
Line 183: | 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:# | + | 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: | + | -webkit-animation:texttop 3400ms linear infinite; |
+ | -webkit-animation-direction:alternate; | ||
+ | -webkit-animation-delay:50ms; | ||
text-transform:uppercase; | text-transform:uppercase; | ||
} | } | ||
- | @-webkit-keyframes | + | |
+ | @-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 235: | Line 260: | ||
width:140px; | width:140px; | ||
top:2px; | top:2px; | ||
- | right: | + | right:23px; |
/*border:1px red solid; | /*border:1px red solid; | ||
background:rgba(2,22,0 .04); */ | background:rgba(2,22,0 .04); */ | ||
Line 279: | 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. | + | -moz-transform: scale(1.05); |
- | -webkit-transform: scale(1. | + | -webkit-transform: scale(1.05); |
- | -o-transform:scale(1. | + | -o-transform:scale(1.05); |
- | transform:scale(1. | + | transform:scale(1.05); |
}/**************************the end of to top css*************/ | }/**************************the end of to top css*************/ | ||
Line 299: | Line 324: | ||
<div class="unselectable"> | <div class="unselectable"> | ||
- | <div id=" | + | <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 311: | 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=" | + | <li id="gn-home"><a href="home" class="home_li">Home</a></li> |
- | <li id="gn-pro"><a href="project | + | <li id="gn-pro"><a href="project" class="pro_li">Project</a></li> |
- | <li id="gn-tec"><a href=" | + | <li id="gn-tec"><a href="technology" class="tec_li">Technology</a></li> |
- | <li id="gn-ach"><a href=" | + | <li id="gn-ach"><a href="achivements" class="ach_li">Achivements</a></li> |
- | <li id="gn-team"><a href="team | + | <li id="gn-team"><a href="team" class="team_li">Our Team</a></li> |
- | <li id="gn-note"><a href=" | + | <li id="gn-note"><a href="notes" class="note_li">Notes</a></li> |
- | <li id="gn-hp"><a href="hp | + | <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 449: | 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-- | ||
<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> | + | </div> ----------the end of to top div----> |
Latest revision as of 05:34, 15 August 2012
TOP