12,782
edits
No edit summary |
No edit summary |
||
| Line 120: | Line 120: | ||
/* Speech bubbles */ | /* Speech bubbles */ | ||
/* <p class=" | /* <p class="bubble-right"> */ | ||
. | .bubble-left { | ||
position:relative; | position:relative; | ||
padding:15px; | padding:15px; | ||
| Line 138: | Line 138: | ||
} | } | ||
. | .bubble-left:after { | ||
content:""; | content:""; | ||
position:absolute; | position:absolute; | ||
| Line 151: | Line 151: | ||
} | } | ||
. | .bubble-right { | ||
position:relative; | position:relative; | ||
padding:15px; | padding:15px; | ||
| Line 167: | Line 167: | ||
} | } | ||
. | .bubble-right:after { | ||
content:""; | content:""; | ||
position:absolute; | position:absolute; | ||
bottom:-20px; /* value = - border-top-width - border-bottom-width */ | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | ||
right:50px; /* controls horizontal position */ | right:50px; /* controls horizontal position */ | ||
border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | |||
border-style:solid; | |||
border-color:#075698 transparent; | |||
/* reduce the damage in FF3.0 */ | |||
display:block; | |||
width:0; | |||
} | |||
.bubble-center { | |||
position:relative; | |||
padding:15px; | |||
margin:1em 0 3em; | |||
color:#fff; | |||
background:#075698; /* default background for browsers without gradient support */ | |||
/* css3 */ | |||
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); | |||
background:-moz-linear-gradient(#2e88c4, #075698); | |||
background:-o-linear-gradient(#2e88c4, #075698); | |||
background:linear-gradient(#2e88c4, #075698); | |||
-webkit-border-radius:10px; | |||
-moz-border-radius:10px; | |||
border-radius:10px; | |||
} | |||
.bubble-center:after { | |||
content:""; | |||
position:absolute; | |||
bottom:-20px; /* value = - border-top-width - border-bottom-width */ | |||
left:50px; /* controls horizontal position */ | |||
border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | ||
border-style:solid; | border-style:solid; | ||