Template:Team:Northwestern/Template/bootstrap/orange

From 2014.igem.org

(Difference between revisions)
 
(4 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<!--animate.css-->
 +
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<style>
<style>
Line 54: Line 56:
}
}
-
.oval-quotes {
+
/* THE SPEECH BUBBLE
 +
------------------------------------------------------------------------------------------------------------------------------- */
 +
 
 +
.triangle-isosceles {
   position:relative;
   position:relative;
-
   width:400px;
+
   padding:15px;
-
  height:350px;
+
-
  margin:2em auto 10px;
+
   color:#000;
   color:#000;
-
   background:#ffed26;
+
   background:#f3961c; /* default background for browsers without gradient support */
   /* css3 */
   /* css3 */
-
   /*
+
   background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
-
  NOTES:
+
   background:-moz-linear-gradient(#f9d835, #f3961c);
-
  -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
+
   background:-o-linear-gradient(#f9d835, #f3961c);
-
  -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
+
   background:linear-gradient(#f9d835, #f3961c);
-
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
+
   -webkit-border-radius:10px;
-
  */
+
   -moz-border-radius:10px;
-
   -webkit-border-top-left-radius:400px 350px;
+
   border-radius:10px;
-
   -webkit-border-top-right-radius:400px 350px;
+
-
   -webkit-border-bottom-right-radius:400px 350px;
+
-
   -webkit-border-bottom-left-radius:400px 350px;
+
-
   -moz-border-radius:400px / 350px;
+
-
   border-radius:400px / 350px;
+
}
}
-
/* creates opening quotation mark */
+
/* Variant : for top positioned triangle
-
.oval-quotes:before {
+
------------------------------------------ */
-
  content:"\201C";
+
-
  position:absolute;
+
-
  z-index:1;
+
-
  top:20px;
+
-
  left:20px;
+
-
  font:80px/1 Georgia, serif;
+
-
  color:#ffed26;
+
-
}
+
-
/* creates closing quotation mark */
+
.triangle-isosceles.top {
-
.oval-quotes:after {
+
   background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
-
   content:"\201D";
+
   background:-moz-linear-gradient(#f3961c, #f9d835);
-
  position:absolute;
+
   background:-o-linear-gradient(#f3961c, #f9d835);
-
  z-index:1;
+
   background:linear-gradient(#f3961c, #f9d835);
-
  bottom:0;
+
-
   right:20px;
+
-
   font:80px/0.25 Georgia, serif;
+
-
   color:#ffed26;
+
}
}
-
.oval-quotes p {
+
/* Variant : for left/right positioned triangle
-
  width:250px;
+
------------------------------------------ */
-
  height:250px;
+
 
-
  padding:50px 0 0;
+
.triangle-isosceles.left {
-
  margin:0 auto;
+
   margin-left:50px;
-
   text-align:center;
+
   background:#f3961c;
-
   font-size:35px;
+
}
}
-
/* creates smaller curve */
+
/* Variant : for right positioned triangle
-
.oval-quotes p:before {
+
------------------------------------------ */
-
  content:"";
+
 
-
  position:absolute;
+
.triangle-isosceles.right {
-
  z-index:-1;
+
   margin-right:50px;
-
  bottom:-30px;
+
   background:#f3961c;
-
  right:55%;
+
-
  width:180px; /* wider than necessary to make it look a bit better in IE8 */
+
-
  height:60px;
+
-
  background:#fff; /* need this for webkit - bug in handling of border-radius */
+
-
  /* css3 */
+
-
  -webkit-border-bottom-right-radius:40px 50px;
+
-
  -moz-border-radius-bottomright:40px 50px;
+
-
  border-bottom-right-radius:40px 50px;
+
-
  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
+
-
  -webkit-transform:translate(-30px, -2px);
+
-
  -moz-transform:translate(-30px, -2px);
+
-
  -ms-transform:translate(-30px, -2px);
+
-
   -o-transform:translate(-30px, -2px);
+
-
   transform:translate(-30px, -2px);
+
}
}
-
/* creates larger curve */
+
/* THE TRIANGLE
-
.oval-quotes p:after {
+
------------------------------------------------------------------------------------------------------------------------------- */
 +
 
 +
/* creates triangle */
 +
.triangle-isosceles:after {
   content:"";
   content:"";
   position:absolute;
   position:absolute;
-
  z-index:-2;
+
   bottom:-15px; /* value = - border-top-width - border-bottom-width */
-
   bottom:-30px;
+
   left:50px; /* controls horizontal position */
-
  right:25%;
+
   border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
-
  height:80px;
+
   border-style:solid;
-
  border-right:200px solid #ffed26;
+
   border-color:#f3961c transparent;
-
  background:#ffed26; /* need this for webkit - bug in handling of border-radius */
+
-
  /* css3 */
+
-
  -webkit-border-bottom-right-radius:200px 100px;
+
-
   -moz-border-radius-bottomright:200px 100px;
+
-
   border-bottom-right-radius:200px 100px;
+
-
  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
+
-
   -webkit-transform:translate(0, -2px);
+
-
   -moz-transform:translate(0, -2px);
+
-
  -ms-transform:translate(0, -2px);
+
-
  -o-transform:translate(0, -2px);
+
-
  transform:translate(0, -2px);
+
   /* reduce the damage in FF3.0 */
   /* reduce the damage in FF3.0 */
   display:block;
   display:block;
Line 154: Line 117:
}
}
-
.oval-quotes + p {
+
/* Variant : top
-
   position:relative; /* part of the IE8 width compromise */
+
------------------------------------------ */
-
   width:150px;
+
 
-
   margin:0 0 2em;
+
.triangle-isosceles.top:after {
-
   font-size:18px;
+
   top:-15px; /* value = - border-top-width - border-bottom-width */
-
   font-weight:bold;
+
  right:50px; /* controls horizontal position */
 +
  bottom:auto;
 +
  left:auto;
 +
  border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
 +
   border-color:#f3961c transparent;
 +
}
 +
 
 +
/* Variant : left
 +
------------------------------------------ */
 +
 
 +
.triangle-isosceles.left:after {
 +
  top:16px; /* controls vertical position */
 +
  left:-50px; /* value = - border-left-width - border-right-width */
 +
  bottom:auto;
 +
   border-width:10px 50px 10px 0;
 +
   border-color:transparent #f3961c;
 +
}
 +
 
 +
/* Variant : right
 +
------------------------------------------ */
 +
 
 +
.triangle-isosceles.right:after {
 +
  top:16px; /* controls vertical position */
 +
  right:-50px; /* value = - border-left-width - border-right-width */
 +
  bottom:auto;
 +
  left:auto;
 +
  border-width:10px 0 10px 50px;
 +
   border-color:transparent #f3961c;
}
}

Latest revision as of 21:41, 18 September 2014

Retrieved from "http://2014.igem.org/Template:Team:Northwestern/Template/bootstrap/orange"