Template:Team:Northwestern/Template/bootstrap/orange

From 2014.igem.org

(Difference between revisions)
Line 53: Line 53:
font-family: 'Patua One', cursive;
font-family: 'Patua One', cursive;
}
}
 +
 +
.oval-quotes {
 +
  position:relative;
 +
  width:400px;
 +
  height:350px;
 +
  margin:2em auto 10px;
 +
  color:#000;
 +
  background:#ffed26;
 +
  /* css3 */
 +
  /*
 +
  NOTES:
 +
  -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
 +
  -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
 +
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
 +
  */
 +
  -webkit-border-top-left-radius:400px 350px;
 +
  -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 */
 +
.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 */
 +
.oval-quotes:after {
 +
  content:"\201D";
 +
  position:absolute;
 +
  z-index:1;
 +
  bottom:0;
 +
  right:20px;
 +
  font:80px/0.25 Georgia, serif;
 +
  color:#ffed26;
 +
}
 +
 +
.oval-quotes p {
 +
  width:250px;
 +
  height:250px;
 +
  padding:50px 0 0;
 +
  margin:0 auto;
 +
  text-align:center;
 +
  font-size:35px;
 +
}
 +
 +
/* creates smaller curve */
 +
.oval-quotes p:before {
 +
  content:"";
 +
  position:absolute;
 +
  z-index:-1;
 +
  bottom:-30px;
 +
  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 */
 +
.oval-quotes p:after {
 +
  content:"";
 +
  position:absolute;
 +
  z-index:-2;
 +
  bottom:-30px;
 +
  right:25%;
 +
  height:80px;
 +
  border-right:200px solid #ffed26;
 +
  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 */
 +
  display:block;
 +
  width:0;
 +
}
 +
 +
.oval-quotes + p {
 +
  position:relative; /* part of the IE8 width compromise */
 +
  width:150px;
 +
  margin:0 0 2em;
 +
  font-size:18px;
 +
  font-weight:bold;
 +
}
 +
</style>
</style>
</head>
</head>
</html>
</html>

Revision as of 21:20, 17 September 2014

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