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;
}
}
-
/* Preload images */
+
#notebook_lablog {
-
div#preload { display: none; }
+
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