Template:Team:Northwestern/Template/bootstrap/orange
From 2014.igem.org
(Difference between revisions)
(5 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 53: | Line 55: | ||
font-family: 'Patua One', cursive; | font-family: 'Patua One', cursive; | ||
} | } | ||
+ | |||
+ | /* THE SPEECH BUBBLE | ||
+ | ------------------------------------------------------------------------------------------------------------------------------- */ | ||
+ | |||
+ | .triangle-isosceles { | ||
+ | position:relative; | ||
+ | padding:15px; | ||
+ | color:#000; | ||
+ | background:#f3961c; /* default background for browsers without gradient support */ | ||
+ | /* css3 */ | ||
+ | background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); | ||
+ | background:-moz-linear-gradient(#f9d835, #f3961c); | ||
+ | background:-o-linear-gradient(#f9d835, #f3961c); | ||
+ | background:linear-gradient(#f9d835, #f3961c); | ||
+ | -webkit-border-radius:10px; | ||
+ | -moz-border-radius:10px; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | |||
+ | /* Variant : for top positioned triangle | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.top { | ||
+ | background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835)); | ||
+ | background:-moz-linear-gradient(#f3961c, #f9d835); | ||
+ | background:-o-linear-gradient(#f3961c, #f9d835); | ||
+ | background:linear-gradient(#f3961c, #f9d835); | ||
+ | } | ||
+ | |||
+ | /* Variant : for left/right positioned triangle | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.left { | ||
+ | margin-left:50px; | ||
+ | background:#f3961c; | ||
+ | } | ||
+ | |||
+ | /* Variant : for right positioned triangle | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.right { | ||
+ | margin-right:50px; | ||
+ | background:#f3961c; | ||
+ | } | ||
+ | |||
+ | /* THE TRIANGLE | ||
+ | ------------------------------------------------------------------------------------------------------------------------------- */ | ||
+ | |||
+ | /* creates triangle */ | ||
+ | .triangle-isosceles:after { | ||
+ | content:""; | ||
+ | position:absolute; | ||
+ | bottom:-15px; /* value = - border-top-width - border-bottom-width */ | ||
+ | left:50px; /* controls horizontal position */ | ||
+ | border-width:15px 15px 0; /* vary these values to change the angle of the vertex */ | ||
+ | border-style:solid; | ||
+ | border-color:#f3961c transparent; | ||
+ | /* reduce the damage in FF3.0 */ | ||
+ | display:block; | ||
+ | width:0; | ||
+ | } | ||
+ | |||
+ | /* Variant : top | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.top:after { | ||
+ | top:-15px; /* value = - border-top-width - border-bottom-width */ | ||
+ | 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; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 21:41, 18 September 2014