You are on page 1of 26

/* -----------------------------------------PURE CSS SPEECH BUBBLES

by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/
http://nicolasgallagher.com
http://twitter.com/necolas
Created: 02 March 2010
Version: 1.2 (03 March 2011)
Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher
------------------------------------------ */
/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */
/* =============================================================================
===============================================
== GENERAL STYLES
** =============================================================================
=============================================== */
body {
padding:0;
margin:0;
font:1em/1.4 Cambria, Georgia, sans-serif;
color:#333;
background:#fff;
}
a:link,
a:visited {
border-bottom:1px solid #c55500;
text-decoration:none;
color:#c55500;
}
a:visited {
border-bottom:1px solid #730800;
color:#730800;
}
a:hover,
a:focus,
a:active {
border:0;
color:#fff;
background:#c55500;
}
a:visited:hover,
a:visited:focus,
a:visited:active {
color:#fff;
background:#730800;
}
#container {

width:500px;
padding:0 0 50px;
margin:0 auto;
}
h1 {
margin:1em 0 0;
font-size:2.5em;
font-weight:normal;
line-height:1.2;
text-align:center;
}
h2 {
margin:0.5em 0 1.5em;
font-size:1.25em;
font-weight:normal;
font-style:italic;
text-align:center;
}
p {
margin:1em 0;
}
.content h2 {
margin:2em 0 0.75em;
font-size:2em;
font-weight:bold;
font-style:normal;
text-align:left;
}
blockquote {
margin:1em 0;
}
blockquote p {
margin:0;
font-size:2em;
}
.follow {
clear:both;
margin-top:2em;
font-size:1.125em;
}
.follow span {
font-weight:bold;
}
/*
Should you want to set a background colour on a containing element
certain types of bubble effect may require you to include these
style declarations.
*/
.content {
position:relative;

*/ .*/ . } /* THE TRIANGLE . background:linear-gradient(#f9d835. 0 0. #f9d835). #f3961c).triangle-isosceles. 0 0. background:-moz-linear-gradient(#f9d835. #f9d835).triangle-isosceles { position:relative. color:#000. background:-o-linear-gradient(#f9d835. border-radius:10px.*/ . padding:15px. #f3961c). -webkit-border-radius:10px.right { margin-right:50px. background:#f3961c. to(#f9d8 35)). margin:1em 0 3em. #f9d835).left { margin-left:50px. 0 100%. } /* Variant : for left/right positioned triangle -----------------------------------------.*/ .top { background:-webkit-gradient(linear. -moz-border-radius:10px. background:-moz-linear-gradient(#f3961c. background:-o-linear-gradient(#f3961c. /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear. } /* Variant : for right positioned triangle -----------------------------------------. #f3961c).z-index:1. background:linear-gradient(#f3961c. background:#f3961c. } /* ============================================================================= =============================================== == BUBBLE WITH AN ISOCELES TRIANGLE ** ============================================================================= =============================================== */ /* THE SPEECH BUBBLE -----------------------------------------------------------------------------------------------------------------------------.triangle-isosceles.triangle-isosceles. 0 100%. background:#f3961c. from(#f9d835). from(#f3961c). to(#f396 1c)). } /* Variant : for top positioned triangle -----------------------------------------.

border-right-width */ bottom:auto. /* vary these values to change the angle of th e vertex */ border-color:#f3961c transparent. width:0.triangle-isosceles.top:after { top:-15px. border-color:transparent #f3961c. border-width:0 15px 15px. /* value = .border-left-width . /* value = .*/ .border-right-width */ bottom:auto. left:auto. /* controls vertical position */ right:-50px. /* reduce the damage in FF3. /* value = .*/ . } /* Variant : right -----------------------------------------. /* value = .0 */ display:block.*/ /* creates triangle */ .right:after { top:16px.border-left-width .*/ . /* controls horizontal position */ border-width:15px 15px 0.border-top-width .-----------------------------------------------------------------------------------------------------------------------------. /* controls horizontal position */ bottom:auto. left:auto. border-width:10px 0 10px 50px. } /* Variant : top -----------------------------------------.triangle-isosceles:after { content:"".border-top-width . position:absolute. border-color:#f3961c transparent. border-color:transparent #f3961c.triangle-isosceles. /* vary these values to change the angle of th e vertex */ border-style:solid. /* controls vertical position */ left:-50px. } /* Variant : left -----------------------------------------. bottom:-15px. border-width:10px 50px 10px 0.border-bottom-width */ right:50px.border-bottom-width */ left:50px. } /* ============================================================================= =============================================== == BUBBLE WITH A RIGHT-ANGLED TRIANGLE ** ============================================================================= =============================================== */ .triangle-isosceles.left:after { top:16px.

left { margin-left:40px. background:-o-linear-gradient(#075698.*/ .triangle-right. background:#075698.triangle-right { position:relative. -webkit-border-radius:10px. #075698). #075698). 0 0. margin:1em 0 3em. } /* Variant : for left positioned triangle -----------------------------------------. position:absolute. 0 0.triangle-right. 0 100%. } /* THE TRIANGLE -----------------------------------------------------------------------------------------------------------------------------. padding:15px. } /* Variant : for top positioned triangle -----------------------------------------. /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear. #2e88c4). from(#075698). background:-moz-linear-gradient(#2e88c4. /* value = .*/ .right { margin-right:40px. -moz-border-radius:10px. /* vary these values to change the angle of . to(#2e88 c4)). 0 100%.top { background:-webkit-gradient(linear.border-bottom-width */ left:50px.*/ . #2e88c4)./* THE SPEECH BUBBLE -----------------------------------------------------------------------------------------------------------------------------. background:linear-gradient(#2e88c4.triangle-right. background:#075698.border-top-width . background:#075698. color:#fff. to(#0756 98)). from(#2e88c4).triangle-right:after { content:"". #075698). } /* Variant : for right positioned triangle -----------------------------------------. border-radius:10px. background:-moz-linear-gradient(#075698. /* controls horizontal position */ border-width:20px 0 0 20px.*/ . background:linear-gradient(#075698. #2e88c4). bottom:-20px.*/ . background:-o-linear-gradient(#2e88c4.

triangle-right.border-bottom-width */ right:50px.*/ . border-width:15px 40px 0 0. /* vary these values to change the angle of the vertex */ border-color:transparent #075698. left:-40px. left:auto.border-top-width . width:0. } /* ============================================================================= =============================================== == BUBBLE WITH AN OBTUSE TRIANGLE ** ============================================================================= =============================================== */ /* THE SPEECH BUBBLE -----------------------------------------------------------------------------------------------------------------------------. /* vary these values to change the angle of the vertex */ border-color:transparent #075698 . /* vary these values to change the angle of the vertex */ border-color:transparent #075698.0 */ display:block.border-right-width */ bottom:auto.border-left-width .right:after { top:16px. border-width:20px 20px 0 0.border-right-width */ bottom:auto. /* value = .left:after { top:16px. } /* Variant : left -----------------------------------------. /* value = .*/ . padding:15px. /* controls horizontal position */ bottom:auto. /* value = . . left:auto.triangle-right. border-width:15px 0 0 40px. right:-40px. } /* Variant : right -----------------------------------------.border-left-width . } /* Variant : top -----------------------------------------.triangle-obtuse { position:relative. border-color:#075698 transparent.top:after { top:-20px.*/ .*/ . /* reduce the damage in FF3.the vertex */ border-style:solid.triangle-right.

/* vary this value to change the height of the triangle. background:linear-gradient(#f04349. color:#fff.triangle-obtuse:before { content:"". } /* Variant : for right positioned triangle -----------------------------------------. border-radius:10px. #f04349).left { margin-left:50px. 0 0. must be equal to the corresponding value in :after */ border-style:solid. background:-moz-linear-gradient(#c81e2b. background:linear-gradient(#c81e2b. #c81e2b).triangle-obtuse.*/ . } /* Variant : for top positioned triangle -----------------------------------------.top { background:-webkit-gradient(linear. background:#c81e2b. . 0 100%. /* value = . 0 0. #f04349). to(#c81e 2b)).border-bottom-width */ left:60px. border-color:transparent #c81e2b. /* reduce the damage in FF3. position:absolute. from(#c81e2b). /* controls horizontal position */ border:0. } /* THE TRIANGLE -----------------------------------------------------------------------------------------------------------------------------.*/ .*/ /* creates the wider right-angled triangle */ .0 */ display:block.triangle-obtuse. bottom:-20px. /* css3 */ background:-webkit-gradient(linear.border-top-width . to(#f043 49)). background:-o-linear-gradient(#c81e2b. background:-o-linear-gradient(#f04349. border-right-width:30px. 0 100%. -moz-border-radius:10px. background:#c81e2b. #c81e2b).margin:1em 0 3em. } /* Variant : for left positioned triangle -----------------------------------------.*/ . /* vary this value to change the angle of the v ertex */ border-bottom-width:20px. -webkit-border-radius:10px. #c81e2b).triangle-obtuse. background:#c81e2b. from(#f04349). #f04349).right { margin-right:50px. background:-moz-linear-gradient(#f04349.

} /* Variant : left -----------------------------------------.border-bottom-width */ bottom:auto. /* value = . position:absolute. must be equal to the corresponding value in :after */ border-color:transparent #c81e2b. border-right-width:10px. border-left-width:30px. /* vary this value to change the angle of the v ertex */ border-bottom-width:20px. /* value = .top:before { top:-20px. width:0.border-left-width .border-bottom-width */ bottom:auto. /* controls vertical position */ bottom:auto. left:auto.*/ . /* vary this value to change the width of the tr iangle */ border-top-width:20px. } .left:before { top:15px.border-top-width . /* value = . } /* creates the narrower right-angled triangle */ .top:after { top:-20px.triangle-obtuse. /* reduce the damage in FF3.border-right-width */ border:0. /* vary this value to change the height of the triangle. /* vary this value to change the height of the tr iangle. /* controls horizontal position */ border:0.(:after's border-right/left-width) */ border-width:0.triangle-obtuse. /* value = (:before's right) + (:before's border-right/leftwidth) . /* value = (:before's left) + (:before's border-right/left-wi dth) .triangle-obtuse:after { content:"".0 */ display:block. .border-top-width .width:0. right:60px. /* vary this value to change the width of the tr iangle */ border-top-width:20px. border-color:transparent #fff. right:80px. border-left-width:10px.border-bottom-width */ left:80px.triangle-obtuse. /* value = . /* vary this value to change the height of the tr iangle. left:-50px.border-top-width . bottom:-20px.*/ .(:after's border-right/left-width) */ border:0. must be equal to the corresponding value in :before */ border-style:solid. left:auto. } /* Variant : top -----------------------------------------. must be equal to the corresponding value in :before */ border-color:transparent #fff.

} . right:-50px.*/ .left:after { top:35px. border-bottom-width:10px. /* vary this value to change the width of the tr iangle. border-bottom-width:30px.right:after { top:35px.border-right-width */ border:0. must be equal to the corresponding value in :before */ border-color:#fff transparent.right:before { top:15px.(:after's border-top/bottom-width) */ bottom:auto. /* controls vertical position */ bottom:auto. left:-50px.triangle-obtuse. /* vary this value to change the width of the tr iangle. /* value = (:before's top) + (:before's border-top/bottom-widt h) .*/ .triangle-obtuse.border-bottom-width:30px. } /* Variant : right -----------------------------------------. /* vary this value to change the height of the triangle */ border-right-width:50px. right:-50px. border:0. must be equal to the corresponding value in :after */ border-color:#c81e2b transparent. /* vary this value to change the width of the t riangle.border-left-width . left:auto. /* vary this value to change the height of the triangle */ border-left-width:50px. } . /* value = .border-right-width */ left:auto. /* vary this value to change the height of the triangle */ border-left-width:50px. /* value = (:before's top) + (:before's border-top/bottom-widt h) . /* value = .border-left-width .border-left-width . /* vary this value to change the height of the triangle */ border-right-width:50px. must be equal to the corresponding value in :after */ border-color:#c81e2b transparent.border-right-width */ border:0. must be equal to the corresponding value in :before */ border-color:#fff transparent. /* value = . border-bottom-width:10px. } /* ============================================================================= =============================================== == BUBBLE WITH A BORDER AND TRIANGLE ** ============================================================================= =============================================== */ /* THE SPEECH BUBBLE -----------------------------------------------------------------------------------------------------------------------------.triangle-obtuse.(:after's border-top/bottom-width) */ bottom:auto. /* vary this value to change the width of the t riangle.

*/ . } /* Variant : for right positioned triangle -----------------------------------------. /* css3 */ -webkit-border-radius:10px. } /* Variant : for left positioned triangle -----------------------------------------. background:#fff.left { margin-left:30px. border-style:solid.. /* reduce the damage in FF3. border-radius:10px.border-top-width .*/ . position:absolute.0 */ display:block. border-style:solid. } /* creates the smaller triangle */ .border-top-width .triangle-border:after { content:"". bottom:-20px. border-color:#fff transparent.border-bottom-width */ left:40px. /* controls horizontal position */ border-width:20px 20px 0.triangle-border { position:relative. /* reduce the damage in FF3. } . position:absolute.border-bottom-width */ left:47px. width:0. /* value = .(:after b order-left) */ border-width:13px 13px 0. width:0.triangle-border. -moz-border-radius:10px. /* value = (:before left) + (:before border-left) .triangle-border.triangle-border:before { content:"".right { margin-right:30px. border-color:#5a8f00 transparent. /* value = .0 */ display:block. color:#333. border:5px solid #5a8f00. padding:15px. bottom:-13px. } /* THE TRIANGLE -----------------------------------------------------------------------------------------------------------------------------. margin:1em 0 3em.*/ .

border-bottom-width */ bottom:auto. /* value = . } /* creates the smaller triangle */ . right:-30px. } /* Variant : left -----------------------------------------.*/ /* creates the larger triangle */ . /* value = (:before right) + (:before border-right) .border-right-width */ border-width:15px 0 15px 30px. right:47px. /* controls vertical position */ bottom:auto. border-color:transparent #fff.top:before { top:-20px. left:auto. } /* creates the smaller triangle */ .left:before { top:10px. border-color:transparent #5a8f00. left:auto.triangle-border.triangle-border.border-right-width */ border-width:15px 30px 15px 0.triangle-border. left:auto. /* value = (:before top) + (:before border-top) . left:-21px. /* value = . } /* Variant : right -----------------------------------------. /* value = .border-top-width .triangle-border.border-top-width . /* controls vertical position */ bottom:auto. /* value = (:before top) + (:before border-top) ./* Variant : top -----------------------------------------.*/ /* creates the larger triangle */ .right:before { top:10px. /* controls horizontal position */ border-width:0 20px 20px. } /* creates the smaller triangle */ .border-left-width . /* value = .(:after bord . left:-30px.border-left-width . right:40px.triangle-border. /* value = .(:afte r border-right) */ border-width:0 13px 13px.border-left-width .border-bottom-width */ bottom:auto.triangle-border.top:after { top:-13px.right:after { top:16px.border-right-width */ border-width:9px 21px 9px 0. border-color:transparent #5a8f00.(:after bord er-top) */ bottom:auto.left:after { top:16px.*/ /* creates the larger triangle */ .

left:-25px. left:auto.er-top) */ bottom:auto.example-right { position:relative. /* reduce the damage in FF3. -moz-border-radius:3px. } /* ============================================================================= =============================================== == BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE ** ============================================================================= =============================================== */ . top:15px.example-commentheading:after { content:"". .0 */ display:block. } /* creates the rectangle */ . border-radius:3px. border-left-color:#b513af. height:10px. /* value = .example-commentheading { position:relative.border-right-width */ border-width:9px 0 9px 21px. right:-21px.border-left-width . top:9px. } /* creates the triangle */ . } /* ============================================================================= =============================================== == SPEECH BUBBLE ICON ** ============================================================================= =============================================== */ .example-commentheading:before { content:"". padding:0. width:0. left:-19px. border:4px solid transparent. width:15px. color:#b513af. border-color:transparent #fff. padding:15px 30px. margin:0. /* css3 */ -webkit-border-radius:3px. position:absolute. position:absolute. background:#b513af.

background:linear-gradient(#b8db29. -moz-border-radius:25px / 50px. 0 100%. 0 100%. 0 0. background:-o-linear-gradient(#f9d835. -moz-border-radius:10px. /* reduce the damage in FF3. #5a8f00).example-right:after { content:"". background:-moz-linear-gradient(#b8db29. position:absolute. } /* display of quote author (alternatively use a class on the element following t he blockquote) */ .0 */ display:block. left:50px. -webkit-border-bottom-left-radius:25px 50px.} /* creates the triangle */ .example-obtuse { position:relative. from(#f9d835). background:-moz-linear-gradient(#f9d835. /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear. bottom:-50px. -webkit-border-radius:10px. -webkit-border-bottom-right-radius:25px 50px. border-radius:25px / 50px. } /* ============================================================================= =============================================== == BLOCKQUOTE WITH OBTUSE TRIANGLE ** ============================================================================= =============================================== */ . border-width:0 20px 50px 0px. -webkit-border-top-right-radius:25px 50px. font-style:italic. width:0. padding:15px 30px. background:#5a8f00. border-color:transparent #5a8f00. /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */ -webkit-border-top-left-radius:25px 50px. #f3961c). background:linear-gradient(#f9d835. color:#000. background:-o-linear-gradient(#b8db29. from(#b8db29).example-right + p {margin:15px 0 2em 85px. to(#f3961c)) . border-radius:10px. . #f3961c). #5a8f00). /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear. background:#f3961c. #5a8f00). margin:0. #f3961c). to(#5a8f 00)). border-style:solid.color:#fff. 0 0.

} /* creates the larger triangle */ . width:0. } . /* css3 */ -webkit-border-radius:10px. /* reduce the damage in FF3.example-obtuse + p {margin:10px 150px 2em 0. color:#333.example-twitter:before { content:url(twitter-logo.} /* this isn't necessary. .example-twitter { position:relative. background:#eee.example-twitter p {font-size:28px. text-align:right. border-width:0 0 30px 50px. width:0. margin:100px 0 0.5em.0 */ display:block.25em. border-color:transparent #f3961c. border-radius:10px. right:80px. position:absolute. } /* ============================================================================= =============================================== == TWITTER ** ============================================================================= =============================================== */ . position:absolute. font-style:itali c.example-obtuse:after { content:"". padding:15px. } /* creates the smaller triangle */ . position:absolute.0 */ display:block.gif).example-obtuse:before { content:"". -moz-border-radius:10px. line-height:1. border-width:0 0 30px 20px. bottom:-30px. right:110px.} /* display of quote author (alternatively use a class on the element following t he blockquote) */ . border-color:transparent #fff. bottom:-30px. border-style:solid. just saves me having to edit the HTML of the demo */ . border-style:solid. /* reduce the damage in FF3.

width:0. font:14px Arial.example-number:before { content:"". width:200px. left:50px. border-color:transparent #C91F2C.example-number:after { content:"". border-bottom-color:#eee. top:-30px. margin:50px 0 200px. position:absolute. } /* creates the triangle */ . text-align:center. height:200px. right:0.example-twitter + p {padding-left:15px. font:140px/200px Arial.example-twitter:after { content:"".} /* ============================================================================= =============================================== == NUMBER ** ============================================================================= =============================================== */ .example-number { position:relative. bottom:-140px. left:0. border-width:0 0 140px 140px. border:15px solid transparent. /* reduce the damage in FF3. /* reduce the damage in FF3. sans-serif. border-style:solid. position:absolute. } /* creates the larger triangle */ .0 */ display:block. height:36px. } /* creates the larger triangle */ . background:#C91F2C. bottom:-140px. position:absolute. .top:-60px. width:155px.0 */ display:block. color:#fff. sans-serif. right:85px. } /* display of quote author (alternatively use a class on the element following t he blockquote) */ .

border-width:0 0 140px 55px. } /* creates a rounded rectangle to cover part of the rectangle generated above */ . border-color:transparent #fff. -moz-border-radius-bottomright:15px. height:20px. padding:15px. position:absolute. } /* ============================================================================= =============================================== == PINCHED SPEECH BUBBLE (more CSS3) ** ============================================================================= =============================================== */ . position:absolute. left:50%.pinched:before { content:"". width:50%. top:-20px. -moz-border-radius:10px. background:#fff. border-bottom-right-radius:15px. /* css3 */ -webkit-border-bottom-right-radius:15px.pinched:after { content:"". } /* creates a rectangle of the colour wanted for the pointy bit */ . /* css3 */ -webkit-border-radius:10px. . color:#fff.pinched { position:relative. top:-20px. background:#333. width:50%. top:-20px. border-radius:10px. text-align:center. left:0. right:0. } /* creates the other rounded rectangle */ . position:absolute. background:#333. height:20px. border-style:solid. margin:50px 0 3em.pinched > :first-child:before { content:"". width:100px. margin:0 0 0 -50px. height:20px.

border-bottom-left-radius:15px. /* NOTES: -webkit-border-radius:220px 120px. using longhand t o avoid future problems with webkit corrects this */ -webkit-border-top-left-radius:220px 120px. -webkit-border-top-right-radius:220px 120px. color:#fff.oval-speech:before { content:"". 0 100%. /* css3 */ -webkit-border-bottom-left-radius:15px. #5a8f00).25em. background:linear-gradient(#b8db29. to(#5a8f 00)). /* css3 */ background:-webkit-gradient(linear. width:270px. . position:absolute. background:-moz-linear-gradient(#b8db29. from(#b8db29). background:#5a8f00. therefore. // produces oval in safari 4 and chro me 4 -webkit-border-radius:220px / 120px. border-radius:220px / 120px.oval-speech p {font-size:1. } /* ============================================================================= =============================================== == OVAL SPEECH BUBBLE (more CSS3) ** ============================================================================= =============================================== */ . -moz-border-radius:220px / 120px. border-right:60px solid #5a8f00. z-index:-1. // produces oval in chrome 4 (again !) but not supported in safari 4 Not correct application of the current spec. text-align:center.} /* creates part of the curve */ . #5a8f00). bottom:-30px. -webkit-border-bottom-left-radius:220px 120px. /* need this for webkit . background:-o-linear-gradient(#b8db29. height:30px. #5a8f00). -webkit-border-bottom-right-radius:220px 120px. background:#5a8f00. 0 0.bug in handling of borderradius */ /* css3 */ -webkit-border-bottom-right-radius:80px 50px. -moz-border-radius-bottomleft:15px.oval-speech { position:relative. } .background:#fff. padding:50px 40px. right:50%. margin:1em auto 50px.

0 100%. -moz-transform:translate(-30px.1-capabable but CSS3-incapable browsers */ -webkit-transform:translate(-30px. background:#075698. #075698). -moz-border-radius-bottomright:40px 50px. } /* creates part of the curved pointy bit */ . -o-transform:translate(0. -ms-transform:translate(-30px.-moz-border-radius-bottomright:80px 50px. margin:1em auto 80px.1-capabable but CSS3-incapable browsers */ -webkit-transform:translate(0. position:absolute. border-bottom-right-radius:40px 50px. -moz-transform:translate(0. -2px). -2px). // produces oval in safari 4 and chro me 4 -webkit-border-radius:220px / 120px. -o-transform:translate(-30px. /* css3 */ background:-webkit-gradient(linear. width:270px. bottom:-30px. z-index:-1. 0 0. background:#fff. transform:translate(-30px. transform:translate(0. to(#0756 98)). -2px). -2px). -2px).oval-speech:after { content:"". color:#fff. background:linear-gradient(#2e88c4. -2px). /* using translate to avoid undesired appearance in CSS2. right:50%. -2px). /* css3 */ -webkit-border-bottom-right-radius:40px 50px. border-bottom-right-radius:80px 50px. #075698). height:30px. -ms-transform:translate(0. #075698). background:-o-linear-gradient(#2e88c4. -2px). -2px). padding:50px 40px. width:60px.oval-thought { position:relative. } /* ============================================================================= =============================================== == OVAL THOUGHT BUBBLE (more CSS3) ** ============================================================================= =============================================== */ . -2px). // produces oval in chrome 4 (again . /* using translate to avoid undesired appearance in CSS2. /* NOTES: -webkit-border-radius:220px 120px. background:-moz-linear-gradient(#2e88c4. text-align:center. from(#2e88c4).

background:#075698. border-radius:30px. } /* ============================================================================= =============================================== == OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3) ** ============================================================================= =============================================== */ .} /* creates the larger circle */ . therefore. } . /* css3 */ -webkit-border-radius:15px. -webkit-border-top-right-radius:220px 120px. margin:2em auto 10px. height:350px. border-radius:15px.oval-thought p {font-size:1. left:50px. -webkit-border-bottom-right-radius:220px 120px. bottom:-30px. background:#075698. border-radius:220px / 120px.oval-thought:before { content:"". width:30px. position:absolute. /* css3 */ /* NOTES: . } /* creates the smaller circle */ . height:15px. /* css3 */ -webkit-border-radius:30px. position:absolute. bottom:-20px.oval-thought:after { content:"". width:15px. background:#ffed26.!) but not supported in safari 4 Not correct application of the current spec. left:30px. width:400px. -webkit-border-bottom-left-radius:220px 120px.oval-quotes { position:relative. height:30px. -moz-border-radius:30px. using longhand t o avoid future problems with webkit corrects this */ -webkit-border-top-left-radius:220px 120px. color:#000. -moz-border-radius:15px. -moz-border-radius:220px / 120px.25em.

z-index:1. text-align:center. width:180px.-webkit-border-radius:Apx Bpx. color:#ffed26. therefore.oval-quotes p { width:250px. -webkit-border-bottom-left-radius:400px 350px. position:absolute. position:absolute.oval-quotes p:before { content:"". /* wider than necessary to make it look a bit better in IE8 */ height:60px. bottom:-30px.bug in handling of border-rad ius */ /* css3 */ -webkit-border-bottom-right-radius:40px 50px. left:20px. } /* creates smaller curve */ . position:absolute. } /* creates closing quotation mark */ . font:80px/0. z-index:1. } . // produces oval in chrome 4 (again!) b ut not supported in safari 4 Not correct application of the current spec. using longhand t o avoid future problems with webkit corrects this */ -webkit-border-top-left-radius:400px 350px.25 Georgia. /* need this for webkit . } /* creates opening quotation mark */ . font-size:35px. serif. serif. background:#fff. top:20px. border-radius:400px / 350px. right:55%. -moz-border-radius-bottomright:40px 50px. -moz-border-radius:400px / 350px. -webkit-border-top-right-radius:400px 350px. bottom:0.oval-quotes:before { content:"\201C". height:250px.oval-quotes:after { content:"\201D". right:20px. -webkit-border-bottom-right-radius:400px 350px. . margin:0 auto. color:#ffed26. font:80px/1 Georgia. z-index:-1. // produces oval in safari 4 and chrome 4 -webkit-border-radius:Apx / Bpx. padding:50px 0 0.

-2px). } /* ============================================================================= =============================================== == RECTANGLE-BORDER STYLE WITH CURVE ** ============================================================================= =============================================== */ . -ms-transform:translate(-30px. font-size:18px. width:0. border:10px solid #5a8f00.oval-quotes p:after { content:"". -2px). transform:translate(-30px.1-capabable but CSS3-incapable browsers */ -webkit-transform:translate(0. color:#333. background:#fff. height:80px. . -ms-transform:translate(0.oval-quotes + p { position:relative.0 */ display:block. -moz-transform:translate(-30px. -2px). margin:1em 0 3em. -2px). -o-transform:translate(-30px. -2px). -2px). border-right:200px solid #ffed26. border-bottom-right-radius:200px 100px.bug in handling of borderradius */ /* css3 */ -webkit-border-bottom-right-radius:200px 100px. position:absolute.border-bottom-right-radius:40px 50px. /* need this for webkit . transform:translate(0. /* reduce the damage in FF3. -moz-border-radius-bottomright:200px 100px. -2px). -o-transform:translate(0. text-align:center. /* using translate to avoid undesired appearance in CSS2. font-weight:bold. /* using translate to avoid undesired appearance in CSS2. z-index:-2. -2px). } . background:#ffed26. } /* creates larger curve */ . -moz-transform:translate(0. -2px).rectangle-speech-border { position:relative. -2px).1-capabable but CSS3-incapable browsers */ -webkit-transform:translate(-30px. right:25%. /* part of the IE8 width compromise */ width:150px. margin:0 0 2em. padding:50px 15px. bottom:-30px.

/* css3 */ -webkit-border-radius:10px. } /* creates a small circle to produce a rounded point where the two curves meet * / . width:10px. border-bottom-right-radius:80px 50px. width:20px. background:transparent. border-color:#5a8f00. border-width:0 10px 10px 0. position:absolute. z-index:10. height:30px. border-style:solid. /* reduce the damage in FF3. height:30px. ./* css3 */ -webkit-border-radius:20px. height:10px. /* reduce the damage in FF3. position:absolute. bottom:-40px.0 */ display:block. bottom:-40px. } /* creates larger curve */ . } /* creates smaller curve */ . -moz-border-radius-bottomright:40px 50px. border-style:solid. background:#5a8f00. width:50px. position:absolute. background:transparent. bottom:-40px. border-color:#5a8f00. /* css3 */ -webkit-border-bottom-right-radius:40px 50px. left:50px. left:45px.rectangle-speech-border > :first-child:before { content:"". /* css3 */ -webkit-border-bottom-right-radius:80px 50px. border-width:0 10px 10px 0.0 */ display:block. -moz-border-radius-bottomright:80px 50px. border-radius:20px. border-bottom-right-radius:40px 50px.rectangle-speech-border:after { content:"". -moz-border-radius:20px.rectangle-speech-border:before { content:"". left:50px. z-index:10.

width:24px. position:absolute. border-width:0 10px 10px 0. margin:1em auto 60px. text-align:center.rectangle-speech-border > :first-child:after { content:"". } /* creates a white rectangle to cover part of the oval border*/ .oval-speech-border { position:relative. border-radius:10px. margin-right:-10px. -webkit-border-bottom-left-radius:240px 140px. // produces oval in chrome 4 (again !) but not supported in safari 4 Not correct application of the current spec. padding:70px 30px. border-color:#f3961c. . position:absolute.oval-speech-border:before { content:"". right:50%. background:#fff. } /* creates larger curve */ . height:30px.-moz-border-radius:10px. left:76px. WITH BORDER (more CSS3) ** ============================================================================= =============================================== */ . -moz-border-radius:240px / 140px. } /* ============================================================================= =============================================== == OVER SPEECH BUBBLE. /* css3 */ /* NOTES: -webkit-border-radius:240px 140px. -webkit-border-bottom-right-radius:240px 140px. therefore. EMPTY. width:50px. border-radius:240px / 140px. using longhand t o avoid future problems with webkit corrects this */ -webkit-border-top-left-radius:240px 140px. border-style:solid. bottom:-40px. z-index:2. // produces oval in safari 4 and chro me 4 -webkit-border-radius:240px / 140px. border:10px solid #f3961c. -webkit-border-top-right-radius:240px 140px. height:15px. color:#333. bottom:-10px. background:#fff.

} . -moz-border-radius-bottomright:40px 50px.0 */ display:block. width:20px. /* css3 */ -webkit-border-bottom-right-radius:80px 50px. border-width:0 10px 10px 0. -moz-border-radius:10px. z-index:1. background:#f3961c. z-index:1. margin-right:20px.background:transparent. /* css3 */ -webkit-border-bottom-right-radius:40px 50px. bottom:-10px. } /* creates a white rectangle to cover part of the oval border*/ . background:#fff. right:50%. width:10px. width:30px. border-color:#f3961c.oval-speech-border > :first-child:before { content:"". bottom:-40px. /* reduce the damage in FF3. right:50%. /* css3 */ -webkit-border-radius:10px. position:absolute. z-index:2. height:31px. border-bottom-right-radius:80px 50px. } /* creates smaller curve */ . margin-right:45px. height:10px. position:absolute. background:transparent.oval-speech-border:after { content:"". height:15px. } /* creates a small circle to produce a rounded point where the two curves meet * / . position:absolute.oval-speech-border > :first-child:after { content:"". border-bottom-right-radius:40px 50px. border-style:solid. border-radius:10px.0 */ display:block. right:50%. -moz-border-radius-bottomright:80px 50px. bottom:-40px. /* reduce the damage in FF3.

// produces oval in safari 4 and chro me 4 -webkit-border-radius:240px / 140px. z-index:10. color:#333. right:50px. WITH BORDER (more CSS3) ** ============================================================================= =============================================== */ . width:25px. width:50px.oval-thought-border { position:relative. border:10px solid #c81e2b. therefore. . EMPTY. -moz-border-radius:50px. bottom:-40px. border-radius:50px. text-align:center. using longhand t o avoid future problems with webkit corrects this */ -webkit-border-top-left-radius:240px 140px. /* css3 */ -webkit-border-radius:50px. z-index:10. } /* creates the smaller circle */ ./* ============================================================================= =============================================== == OVER THOUGHT BUBBLE. border-radius:240px / 140px. border:10px solid #c81e2b. // produces oval in chrome 4 (again !) but not supported in safari 4 Not correct application of the current spec. background:#fff. right:100px.0 */ display:block. bottom:-60px. -webkit-border-bottom-left-radius:240px 140px.oval-thought-border:before { content:"". } /* creates the larger circle */ . height:50px. padding:70px 30px. margin:1em auto 80px. -webkit-border-bottom-right-radius:240px 140px. background:#fff. -webkit-border-top-right-radius:240px 140px. /* reduce the damage in FF3.oval-thought-border:after { content:"". -moz-border-radius:240px / 140px. /* css3 */ /* NOTES: -webkit-border-radius:240px 140px. position:absolute. position:absolute.

} . /* reduce the damage in FF3. border-radius:25px. -moz-border-radius:25px. background:#fff.0 */ display:block. /* css3 */ -webkit-border-radius:25px. border:10px solid #c81e2b.height:25px.