Team:Groningen/CSS3

From 2013.igem.org

(Difference between revisions)
 
(168 intermediate revisions not shown)
Line 1: Line 1:
-
 
+
a:visited{
-
body{
+
  color: white;
-
    font-family: Century;
+
-
    background: rgb(51,51,51);
+
-
    color: #fff;
+
-
    padding:20px;
+
}
}
-
 
+
a:link{
-
.pagina{
+
  color: white;
-
    width:auto;
+
-
    height:auto;   
+
}
}
-
 
+
 
-
.linha{
+
a:hover {text-decoration:none;}
-
    width:auto;
+
 
-
    padding:5px;
+
 
-
    height:auto;
+
 
-
    display:table;    
+
table
 +
{
 +
border:0px solid black;
}
}
-
.tile{
+
td
-
    height:100px; 
+
{
-
    width:100px;  
+
width:230px;
-
    float:left;
+
padding:5px;
-
    margin:0 5px 0 0;
+
vertical-align:top;
-
    padding:2px;
+
position:relative;
}
}
-
 
+
 
-
.tileLargo{
+
.RMbutton#Frontpage{
-
    width:210px;
+
    position:absolute;
 +
    bottom:10px;
 +
    right:0px;
}
}
-
.amarelo{
+
.RMbutton{
-
    background:#DAA520;
+
    position:absolute;
 +
    right:0px;
}
}
-
 
+
 
-
.vermelho{
+
.imgtile{
-
     background:#CD0000;  
+
     height:225px;
 +
    width:225px;
}
}
-
 
+
 
-
.azul{
+
.tileImage:hover{
-
    background:#4682B4;
+
    opacity:0.6;
 +
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
}
-
 
+
 
-
.verde{
+
.tileImage:active {
-
    background-color: #2E8B57;
+
        position:relative;
 +
        top:1px;
}
}
 +
/* readmore button http://css-tricks.com/examples/ButtonMaker/# */
-
Read more: http://mrbool.com/creating-a-metro-style-menu-in-html-and-css/26266#ixzz2ZO11fKs8
+
 +
    .myButton {
 +
       
-
Read more: http://mrbool.com/creating-a-metro-style-menu-in-html-and-css/26266#ixzz2ZO0qR8NY
+
        -moz-box-shadow:inset 0px 0px 0px -1px #0047ab;
 +
        -webkit-box-shadow:inset 0px 0px 0px -1px #0047ab;
 +
        box-shadow:inset 0px 0px 0px -1px #0047ab;
 +
       
 +
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0047ab), color-stop(1, #0067e5));
 +
        background:-moz-linear-gradient(top, #0047ab 5%, #0067e5 100%);
 +
        background:-webkit-linear-gradient(top, #0047ab 5%, #0067e5 100%);
 +
        background:-o-linear-gradient(top, #0047ab 5%, #0067e5 100%);
 +
        background:-ms-linear-gradient(top, #0047ab 5%, #0067e5 100%);
 +
        background:linear-gradient(to bottom, #0047ab 5%, #0067e5 100%);
 +
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0047ab', endColorstr='#0067e5',GradientType=0);
 +
       
 +
        background-color:#0047ab;
 +
       
 +
        -moz-border-radius:15px;
 +
        -webkit-border-radius:15px;
 +
        border-radius:15px;
 +
       
 +
        border:1px solid #0047ab;
 +
       
 +
        display:inline-block;
 +
        color:#ffffff;
 +
        font-family:Trebuchet MS;
 +
        font-size:14px;
 +
        font-weight:bold;
 +
        padding:2px 17px;
 +
        text-decoration:none;
 +
 +
        text-shadow:1px 1px 0px #0047ab;
 +
       
 +
    }
 +
    .myButton:hover {
 +
       
 +
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0067e5), color-stop(1, #0047ab));
 +
        background:-moz-linear-gradient(top, #0067e5 5%, #0047ab 100%);
 +
        background:-webkit-linear-gradient(top, #0067e5 5%, #0047ab 100%);
 +
        background:-o-linear-gradient(top, #0067e5 5%, #0047ab 100%);
 +
        background:-ms-linear-gradient(top, #0067e5 5%, #0047ab 100%);
 +
        background:linear-gradient(to bottom, #0067e5 5%, #0047ab 100%);
 +
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0067e5', endColorstr='#0047ab',GradientType=0);
 +
       
 +
        background-color:#0067e5;
 +
    }
 +
    .myButton:active {
 +
        position:relative;
 +
        top:1px;
 +
    }

Latest revision as of 12:18, 3 October 2013

a:visited{ 

  color: white;

} a:link{ 

  color: white;

}

a:hover {text-decoration:none;}


table { border:0px solid black; }

td { width:230px; padding:5px; vertical-align:top; position:relative; }

.RMbutton#Frontpage{ 

    position:absolute;
    bottom:10px;
    right:0px;

}

.RMbutton{ 

    position:absolute;
    right:0px;

}

.imgtile{ 

   height:225px;
   width:225px;

}

.tileImage:hover{ 

    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

}

.tileImage:active { 

       position:relative;
       top:1px;

}

/* readmore button http://css-tricks.com/examples/ButtonMaker/# */ 


   .myButton {
       

       -moz-box-shadow:inset 0px 0px 0px -1px #0047ab;
       -webkit-box-shadow:inset 0px 0px 0px -1px #0047ab;
       box-shadow:inset 0px 0px 0px -1px #0047ab;
       
       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0047ab), color-stop(1, #0067e5));
       background:-moz-linear-gradient(top, #0047ab 5%, #0067e5 100%);
       background:-webkit-linear-gradient(top, #0047ab 5%, #0067e5 100%);
       background:-o-linear-gradient(top, #0047ab 5%, #0067e5 100%);
       background:-ms-linear-gradient(top, #0047ab 5%, #0067e5 100%);
       background:linear-gradient(to bottom, #0047ab 5%, #0067e5 100%);
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0047ab', endColorstr='#0067e5',GradientType=0);
       
       background-color:#0047ab;
       
       -moz-border-radius:15px;
       -webkit-border-radius:15px;
       border-radius:15px;
       
       border:1px solid #0047ab;
       
       display:inline-block;
       color:#ffffff;
       font-family:Trebuchet MS;
       font-size:14px;
       font-weight:bold;
       padding:2px 17px;
       text-decoration:none;

       text-shadow:1px 1px 0px #0047ab;
       
   }
   .myButton:hover {
       
       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0067e5), color-stop(1, #0047ab));
       background:-moz-linear-gradient(top, #0067e5 5%, #0047ab 100%);
       background:-webkit-linear-gradient(top, #0067e5 5%, #0047ab 100%);
       background:-o-linear-gradient(top, #0067e5 5%, #0047ab 100%);
       background:-ms-linear-gradient(top, #0067e5 5%, #0047ab 100%);
       background:linear-gradient(to bottom, #0067e5 5%, #0047ab 100%);
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0067e5', endColorstr='#0047ab',GradientType=0);
       
       background-color:#0067e5;
   }
   .myButton:active {
       position:relative;
       top:1px;
   }
Retrieved from "http://2013.igem.org/Team:Groningen/CSS3"