Template:Team:Northwestern/Template/bootstrap/orange
From 2014.igem.org
(Difference between revisions)
Line 54: | Line 54: | ||
} | } | ||
- | . | + | /* THE SPEECH BUBBLE |
+ | ------------------------------------------------------------------------------------------------------------------------------- */ | ||
+ | |||
+ | .triangle-isosceles { | ||
position:relative; | position:relative; | ||
- | + | padding:15px; | |
- | + | margin:1em 0 3em; | |
- | margin: | + | |
color:#000; | color:#000; | ||
- | background:# | + | background:#f3961c; /* default background for browsers without gradient support */ |
/* css3 */ | /* 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; |
- | - | + | |
- | - | + | |
- | -webkit-border | + | |
- | -moz-border-radius: | + | |
- | border-radius: | + | |
} | } | ||
- | /* | + | /* 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; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | - | + | |
- | + | ||
} | } | ||
- | /* creates | + | /* THE TRIANGLE |
- | . | + | ------------------------------------------------------------------------------------------------------------------------------- */ |
+ | |||
+ | /* creates triangle */ | ||
+ | .triangle-isosceles:after { | ||
content:""; | content:""; | ||
position:absolute; | position:absolute; | ||
- | + | bottom:-15px; /* value = - border-top-width - border-bottom-width */ | |
- | bottom:- | + | 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; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | border- | + | |
- | + | ||
- | - | + | |
- | - | + | |
- | + | ||
- | + | ||
- | + | ||
/* reduce the damage in FF3.0 */ | /* reduce the damage in FF3.0 */ | ||
display:block; | display:block; | ||
Line 154: | Line 116: | ||
} | } | ||
- | . | + | /* Variant : top |
- | position: | + | ------------------------------------------ */ |
- | width: | + | |
- | + | .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; | ||
} | } | ||
Revision as of 21:24, 17 September 2014