Team:ZJU-China/css/js-slider.css

From 2013.igem.org

(Difference between revisions)
(This code is from Codrops. The resources on Codrops can be used freely in personal and commercial projects if integrated and built upon. http://tympanus.net/codrops/licensing/)
Line 1: Line 1:
.rotator{
.rotator{
-
     background-color:#222;
+
     background-color:transparent;
     width:800px;
     width:800px;
     height:300px;
     height:300px;
Line 9: Line 9:
     text-transform:uppercase;
     text-transform:uppercase;
     letter-spacing:-1px;
     letter-spacing:-1px;
-
     border:3px solid #f0f0f0;
+
     border:3px solid rgba(240, 240, 240, 0.5);
     overflow:hidden;
     overflow:hidden;
     -moz-box-shadow:0px 0px 10px #222;
     -moz-box-shadow:0px 0px 10px #222;
Line 48: Line 48:
     color:#f0f0f0;
     color:#f0f0f0;
     font-size:20px;
     font-size:20px;
-
    border:2px solid #000;
 
-
    border-right:none;
 
     outline:none;
     outline:none;
     text-shadow:-1px 1px 1px #000;
     text-shadow:-1px 1px 1px #000;
Line 57: Line 55:
     border-top-left-radius:10px;
     border-top-left-radius:10px;
     border-bottom-left-radius:20px;
     border-bottom-left-radius:20px;
 +
font-family: "Comic Sans MS", cursive;
}
}
.rotator ul li a:hover{
.rotator ul li a:hover{
Line 72: Line 71:
     font-size:46px;
     font-size:46px;
     padding:20px;
     padding:20px;
 +
color: #FFF;
 +
font-family: "Comic Sans MS", cursive;
}
}
.rotator .description{
.rotator .description{
Line 80: Line 81:
     left:0px;
     left:0px;
     padding:20px;
     padding:20px;
-
     background-color:#222;
+
     background-color:rgba(255, 255, 255, 0.2);
     -moz-border-radius:0px 10px 0px 0px;
     -moz-border-radius:0px 10px 0px 0px;
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-right-radius:10px;
     border-top-right-radius:10px;
     border-top-right-radius:10px;
-
    opacity:0.7;
+
-
    border-top:2px solid #000;
+
-
    border-right:2px solid #000;
+
}
}
.rotator .description p{
.rotator .description p{
Line 93: Line 92:
     letter-spacing:normal;
     letter-spacing:normal;
     line-height:26px;
     line-height:26px;
 +
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 +
font-style: italic;
 +
color: #FFFFFF;
}
}
a.more{
a.more{

Revision as of 04:43, 26 September 2013

.rotator{ 

   background-color:transparent;
   width:800px;
   height:300px;
   margin:0px auto;
   position:relative;
   font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
   color:#fff;
   text-transform:uppercase;
   letter-spacing:-1px;
   border:3px solid rgba(240, 240, 240, 0.5);
   overflow:hidden;
   -moz-box-shadow:0px 0px 10px #222;
   -webkit-box-shadow:0px 0px 10px #222;
   box-shadow:0px 0px 10px #222;

} img.bg{ 

   position:absolute;
   top:0px;
   left:0px;

} .rotator ul{ 

   list-style:none;
   position:absolute;
   right:0px;
   top:0px;
   margin-top:6px;
   z-index:999999;

} .rotator ul li{ 

   display:block;
   float:left;
   clear:both;
   width:260px;

} .rotator ul li a{ 

   width:230px;
   float:right;
   clear:both;
   padding-left:10px;
   text-decoration:none;
   display:block;
   height:52px;
   line-height:52px;
   background-color:#222;
   margin:1px -20px 1px 0px;
   opacity:0.7;
   color:#f0f0f0;
   font-size:20px;
   outline:none;
   text-shadow:-1px 1px 1px #000;
   -moz-border-radius:10px 0px 0px 20px;
   -webkit-border-top-left-radius:10px;
   -webkit-border-bottom-left-radius:20px;
   border-top-left-radius:10px;
   border-bottom-left-radius:20px;

font-family: "Comic Sans MS", cursive; } .rotator ul li a:hover{ 

     text-shadow:0px 0px 2px #fff;

} .rotator .heading{ 

   position:absolute;
   top:0px;
   left:0px;
   width:500px;

} .rotator .heading h1{ 

   text-shadow:-1px 1px 1px #555;
   font-weight:normal;
   font-size:46px;
   padding:20px;

color: #FFF; font-family: "Comic Sans MS", cursive; } .rotator .description{ 

   width:500px;
   height:80px;
   position:absolute;
   bottom:0px;
   left:0px;
   padding:20px;
   background-color:rgba(255, 255, 255, 0.2);
   -moz-border-radius:0px 10px 0px 0px;
   -webkit-border-top-right-radius:10px;
   border-top-right-radius:10px;

} .rotator .description p{ 

   text-shadow:-1px 1px 1px #000;
   text-transform:none;
   letter-spacing:normal;
   line-height:26px;

font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; font-style: italic; color: #FFFFFF; } a.more{ 

   color:orange;
   text-decoration:none;
   text-transform:uppercase;
   font-size:10px;

} a.more:hover{ 

   color:#fff;

}

Retrieved from "http://2013.igem.org/Team:ZJU-China/css/js-slider.css"