Template:Team:Tsinghua/CSS/Icon-Style
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <style> - →Icons Buttons Styling: .iconContainer { position: relative; border: 0 auto 0; padding: 20px 30px 20px; height: 300px; } .iconLeft, .iconRight { display: ...") |
|||
(3 intermediate revisions not shown) | |||
Line 7: | Line 7: | ||
padding: 20px 30px 20px; | padding: 20px 30px 20px; | ||
height: 300px; | height: 300px; | ||
+ | } | ||
+ | .iconContainer_200 { | ||
+ | position: relative; | ||
+ | border: 0 auto 0; | ||
+ | padding: 20px 30px 20px; | ||
+ | height: 200px; | ||
} | } | ||
.iconLeft, .iconRight { | .iconLeft, .iconRight { | ||
Line 21: | Line 27: | ||
.iconRight { | .iconRight { | ||
right: 50px; | right: 50px; | ||
+ | } | ||
+ | |||
+ | .icon1, .icon2, .icon3, .iconLeft_200, .iconRight_200 { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border-radius: 13px; | ||
+ | box-shadow: 5px 5px 3px #aaaaaa; | ||
+ | } | ||
+ | .icon1 { | ||
+ | left: 50px; | ||
+ | } | ||
+ | .icon2 { | ||
+ | left: 290px; | ||
+ | } | ||
+ | .icon3 { | ||
+ | right: 50px; | ||
+ | } | ||
+ | .iconLeft_200 { | ||
+ | left: 140px; | ||
+ | } | ||
+ | .iconRight_200 { | ||
+ | right: 140px; | ||
} | } | ||
#intro_diabetes { | #intro_diabetes { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/1/10/Tsinghua_Icon_Intro_Diabetes.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/1/10/Tsinghua_Icon_Intro_Diabetes.gif"); | ||
} | } | ||
#intro_diabetes:hover { | #intro_diabetes:hover { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/8/8c/Tsinghua_Icon_Intro_Diabetes_active.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/8/8c/Tsinghua_Icon_Intro_Diabetes_active.gif"); | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
#intro_genetherapy{ | #intro_genetherapy{ | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/4/4e/Tsinghua_Icon_Intro_GeneTherapy.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/4/4e/Tsinghua_Icon_Intro_GeneTherapy.gif"); | ||
} | } | ||
#intro_genetherapy:hover { | #intro_genetherapy:hover { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/4/4b/Tsinghua_Icon_Intro_GeneTherapy_active.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/4/4b/Tsinghua_Icon_Intro_GeneTherapy_active.gif"); | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
#project_cocktail { | #project_cocktail { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/2/2c/Tsinghua_Icon_Project_Cocktail.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/2/2c/Tsinghua_Icon_Project_Cocktail.gif"); | ||
} | } | ||
#project_cocktail:hover { | #project_cocktail:hover { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/9/9b/Tsinghua_Icon_Project_Cocktail_active.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/9/9b/Tsinghua_Icon_Project_Cocktail_active.gif"); | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
#project_drug { | #project_drug { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/e/ee/Tsinghua_Icon_Project_Drug.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/e/ee/Tsinghua_Icon_Project_Drug.gif"); | ||
} | } | ||
#project_drug:hover { | #project_drug:hover { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/8/8e/Tsinghua_Icon_Project_Drug_active.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/8/8e/Tsinghua_Icon_Project_Drug_active.gif"); | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
#project_microbe { | #project_microbe { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/a/a2/Tsinghua_Icon_Project_Microbe.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/a/a2/Tsinghua_Icon_Project_Microbe.gif"); | ||
} | } | ||
#project_microbe:hover { | #project_microbe:hover { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/2/29/Tsinghua_Icon_Project_Microbe_active.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/2/29/Tsinghua_Icon_Project_Microbe_active.gif"); | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
#project_virus { | #project_virus { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/2/22/Tsinghua_Icon_Project_Virus.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/2/22/Tsinghua_Icon_Project_Virus.gif"); | ||
} | } | ||
#project_virus:hover { | #project_virus:hover { | ||
+ | background-size: 100%; | ||
background-image: url("https://static.igem.org/mediawiki/2014/6/60/Tsinghua_Icon_Project_Virus_active.gif"); | background-image: url("https://static.igem.org/mediawiki/2014/6/60/Tsinghua_Icon_Project_Virus_active.gif"); | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
- | / | + | #notebook_lablog { |
- | + | background-size: 100%; | |
+ | background-image: url("https://static.igem.org/mediawiki/2014/3/30/Tsinghua_Icon_Notebook_Lablog.gif"); | ||
+ | } | ||
+ | #notebook_lablog:hover { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/3/34/Tsinghua_Icon_Notebook_Lablog_active.gif"); | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | #notebook_protocol { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/2/2c/Tsinghua_Icon_Notebook_Protocol.gif"); | ||
+ | } | ||
+ | #notebook_protocol:hover { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/3/31/Tsinghua_Icon_Notebook_Protocol_active.gif"); | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | #hp_gallery { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/b/be/Tsinghua_Icon_HP_Gallery.gif"); | ||
+ | } | ||
+ | #hp_gallery:hover { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/5/50/Tsinghua_Icon_HP_Gallery_active.gif"); | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | #hp_outreach { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/0/0e/Tsinghua_Icon_HP_Outreach.gif"); | ||
+ | } | ||
+ | #hp_outreach:hover { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/e/ef/Tsinghua_Icon_HP_Outreach_active.gif"); | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | #hp_video { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/b/bd/Tsinghua_Icon_HP_Video.gif"); | ||
+ | } | ||
+ | #hp_video:hover { | ||
+ | background-size: 100%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2014/9/99/Tsinghua_Icon_HP_Video_active.gif"); | ||
+ | cursor:pointer; | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 18:12, 16 October 2014