Team:Groningen/CSS3

From 2013.igem.org

(Difference between revisions)
Line 54: Line 54:
/* readmore button http://css-tricks.com/examples/ButtonMaker/# */
/* readmore button http://css-tricks.com/examples/ButtonMaker/# */
-
.button {
+
 
-
  border-top: 1px solid #80b9ff;
+
    .myButton {
-
  background: #0067e5;
+
       
-
  background: -webkit-gradient(linear, left top, left bottom, from(#0047ab), to(#0067e5));
+
        -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-
  background: -webkit-linear-gradient(top, #0047ab, #0067e5);
+
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-
  background: -moz-linear-gradient(top, #0047ab, #0067e5);
+
        box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-
  background: -ms-linear-gradient(top, #0047ab, #0067e5);
+
       
-
  background: -o-linear-gradient(top, #0047ab, #0067e5);
+
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0047ab), color-stop(1, #0067e5));
-
  padding: 3.5px 7px;
+
        background:-moz-linear-gradient(top, #0047ab 5%, #0067e5 100%);
-
  -webkit-border-radius: 40px;
+
        background:-webkit-linear-gradient(top, #0047ab 5%, #0067e5 100%);
-
  -moz-border-radius: 40px;
+
        background:-o-linear-gradient(top, #0047ab 5%, #0067e5 100%);
-
  border-radius: 40px;
+
        background:-ms-linear-gradient(top, #0047ab 5%, #0067e5 100%);
-
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
+
        background:linear-gradient(to bottom, #0047ab 5%, #0067e5 100%);
-
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
+
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0047ab', endColorstr='#0067e5',GradientType=0);
-
  box-shadow: rgba(0,0,0,1) 0 1px 0;
+
       
-
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
+
        background-color:#0047ab;
-
  color: white;
+
       
-
  font-size: 11px;
+
        -moz-border-radius:7px;
-
  font-family: Helvetica, Arial, Sans-Serif;
+
        -webkit-border-radius:7px;
-
  text-decoration:none;
+
        border-radius:7px;
-
  vertical-align: middle;
+
       
-
  }
+
        border:1px solid #0047ab;
-
.button:hover {
+
       
-
  border-top-color: #0047ab;
+
        display:inline-block;
-
  background: #0047ab;
+
        color:#ffffff;
-
  color: #ffffff;
+
        font-family:Trebuchet MS;
-
  }
+
        font-size:17px;
-
.button:active {
+
        font-weight:bold;
-
  border-top-color: #1b435e;
+
        padding:6px 11px;
-
  background: #1b435e;
+
        text-decoration:none;
-
  }
+
       
 +
        text-shadow:0px 1px 0px #8f7f24;
 +
       
 +
    }
 +
    .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;
 +
    }

Revision as of 12:04, 31 July 2013

.table{ 

   width:auto;
   padding:5px;
   height:auto;
   display:table;

}

/* Code for the characteristics for the tiles */

.tile{ 

   height:200px;  
   width:200px; 
   float:left;
   margin:0 5px 0 0;
   padding:2px;

}

/* Code for the characteristics for the tiles with text (made a seperate one so this one does not doe anything if you hover over*/

.tileText{ 

   height:200px;  
   width:200px; 
   float:left;
   margin:0 5px 0 0;
   padding:2px;

}

/* Color-code for the tiles */

.color1{ 

   background: #fff;

} .color2{ 

   background-color: transparent;

}

.color3{ 

   background:#fff;

}

.color4{ 

   background-color: #fff;

}

/* Color for the mouse hover */

.selection{ 

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

}

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


   .myButton {
       
       -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
       -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
       box-shadow:inset 0px 1px 0px 0px #ffe0b5;
       
       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:7px;
       -webkit-border-radius:7px;
       border-radius:7px;
       
       border:1px solid #0047ab;
       
       display:inline-block;
       color:#ffffff;
       font-family:Trebuchet MS;
       font-size:17px;
       font-weight:bold;
       padding:6px 11px;
       text-decoration:none;
       
       text-shadow:0px 1px 0px #8f7f24;
       
   }
   .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"