FROM: http://nicolasgallagher.com/ 還有其他更好的CSS特效
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>Demo: Pure CSS speech bubbles – Nicolas Gallagher</title>
7 <style type="text/css">
8
9 /* ------------------------------------------
10 PURE CSS SPEECH BUBBLES
11 by Nicolas Gallagher
12 - http://nicolasgallagher.com/pure-css-speech-bubbles/
13
14 http://nicolasgallagher.com
15 http://twitter.com/necolas
16
17 Created: 02 March 2010
18 Version: 1.1 (21 October 2010)
19
20 Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
21 ------------------------------------------ */
22
23 /* NOTE: Some declarations use longhand notation so that it can be clearly
24 explained what specific properties or values do and what their relationship
25 is to other properties or values in creating the effect */
26
27 /* ============================================================================================================================
28 == GENERAL STYLES
29 ** ============================================================================================================================ */
30
31 body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
32
33 a:link,
34 a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
35 a:visited {border-bottom:1px solid #730800; color:#730800;}
36
37 a:hover,
38 a:focus,
39 a:active {border:0; color:#fff; background:#c55500;}
40
41 a:visited:hover,
42 a:visited:focus,
43 a:visited:active {color:#fff; background:#730800;}
44
45 #container { width:500px; padding:0 0 50px; margin:0 auto;}
46
47 h1 {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
48 h2 {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
49 p {margin:1em 0;}
50
51 .content h2 {margin:2em 0 0.75em; font-size:2em; font-weight:bold; font-style:normal; text-align:left;}
52 blockquote {margin:1em 0;}
53 blockquote p {margin:0; font-size:2em;}
54
55 .follow {clear:both; margin-top:2em; font-size:1.125em;}
56 .follow span {font-weight:bold;}
57
58
59 /*
60 Should you want to set a background colour on a containing element
61 certain types of bubble effect may require you to include these
62 style declarations.
63 */
64 .content {
65 position:relative;
66 z-index:1;
67 }
68
69
70 /* ============================================================================================================================
71 == BUBBLE WITH AN ISOCELES TRIANGLE
72 ** ============================================================================================================================ */
73
74 /* THE SPEECH BUBBLE
75 ------------------------------------------------------------------------------------------------------------------------------- */
76
77 .triangle-isosceles {
78 position:relative;
79 padding:15px;
80 margin:1em 0 3em;
81 color:#000;
82 background:#f3961c; /* default background for browsers without gradient support */
83
84 /* css3 */
85 -moz-border-radius:10px;
86 -webkit-border-radius:10px;
87 border-radius:10px;
88 /* NOTE: webkit gradient implementation is not as per spec */
89 background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
90 background:-moz-linear-gradient(top, #f9d835, #f3961c);
91 background:-o-linear-gradient(top, #f9d835, #f3961c);
92 }
93
94 /* Variant : for top positioned triangle
95 ------------------------------------------ */
96
97 .triangle-isosceles.top {
98 /* NOTE: webkit gradient implementation is not as per spec */
99 background:-webkit-gradient(linear, left top, left bottom, from(#f3961c), to(#f9d835));
100 background:-moz-linear-gradient(top, #f3961c, #f9d835);
101 background:-o-linear-gradient(top, #f3961c, #f9d835);
102 }
103
104 /* Variant : for left/right positioned triangle
105 ------------------------------------------ */
106
107 .triangle-isosceles.left {
108 margin-left:50px;
109 background:#f3961c;
110 }
111
112 /* Variant : for right positioned triangle
113 ------------------------------------------ */
114
115 .triangle-isosceles.right {
116 margin-right:50px;
117 background:#f3961c;
118 }
119
120 /* THE TRIANGLE
121 ------------------------------------------------------------------------------------------------------------------------------- */
122
123 /* creates triangle */
124 .triangle-isosceles:after {
125 content:"";
126 display:block; /* reduce the damage in FF3.0 */
127 position:absolute;
128 bottom:-15px; /* value = - border-top-width - border-bottom-width */
129 left:50px; /* controls horizontal position */
130 width:0;
131 height:0;
132 border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
133 border-style:solid;
134 border-color:#f3961c transparent;
135 }
136
137 /* Variant : top
138 ------------------------------------------ */
139
140 .triangle-isosceles.top:after {
141 top:-15px; /* value = - border-top-width - border-bottom-width */
142 right:50px; /* controls horizontal position */
143 bottom:auto;
144 left:auto;
145 border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
146 border-color: #f3961c transparent;
147 }
148
149 /* Variant : left
150 ------------------------------------------ */
151
152 .triangle-isosceles.left:after {
153 top:16px; /* controls vertical position */
154 left:-50px; /* value = - border-left-width - border-right-width */
155 bottom:auto;
156 border-width:10px 50px 10px 0;
157 border-color:transparent #f3961c;
158 }
159
160 /* Variant : right
161 ------------------------------------------ */
162
163 .triangle-isosceles.right:after {
164 top:16px; /* controls vertical position */
165 right:-50px; /* value = - border-left-width - border-right-width */
166 bottom:auto;
167 left:auto;
168 border-width:10px 0 10px 50px;
169 border-color:transparent #f3961c;
170 }
171
172
173
174 /* ============================================================================================================================
175 == BUBBLE WITH A RIGHT-ANGLED TRIANGLE
176 ** ============================================================================================================================ */
177
178 /* THE SPEECH BUBBLE
179 ------------------------------------------------------------------------------------------------------------------------------- */
180
181 .triangle-right {
182 position:relative;
183 padding:15px;
184 margin:1em 0 3em;
185 color:#fff;
186 background:#075698; /* default background for browsers without gradient support */
187
188 /* css3 */
189 -moz-border-radius:10px;
190 -webkit-border-radius:10px;
191 border-radius:10px;
192 /* NOTE: webkit gradient implementation is not as per spec */
193 background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
194 background:-moz-linear-gradient(top, #2e88c4, #075698);
195 background:-o-linear-gradient(top, #2e88c4, #075698);
196 }
197
198 /* Variant : for top positioned triangle
199 ------------------------------------------ */
200
201 .triangle-right.top {
202 /* NOTE: webkit gradient implementation is not as per spec */
203 background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
204 background:-moz-linear-gradient(top, #075698, #2e88c4);
205 background:-o-linear-gradient(top, #075698, #2e88c4);
206 }
207
208 /* Variant : for left positioned triangle
209 ------------------------------------------ */
210
211 .triangle-right.left {
212 margin-left:40px;
213 background:#075698;
214 }
215
216 /* Variant : for right positioned triangle
217 ------------------------------------------ */
218
219 .triangle-right.right {
220 margin-right:40px;
221 background:#075698;
222 }
223
224 /* THE TRIANGLE
225 ------------------------------------------------------------------------------------------------------------------------------- */
226
227 .triangle-right:after {
228 content:"";
229 display:block; /* reduce the damage in FF3.0 */
230 position:absolute;
231 bottom:-20px; /* value = - border-top-width - border-bottom-width */
232 left:50px; /* controls horizontal position */
233 width:0;
234 height:0;
235 border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
236 border-style:solid;
237 border-color:#075698 transparent;
238 }
239
240 /* Variant : top
241 ------------------------------------------ */
242
243 .triangle-right.top:after {
244 top:-20px; /* value = - border-top-width - border-bottom-width */
245 right:50px; /* controls horizontal position */
246 bottom:auto;
247 left:auto;
248 border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
249 border-color:transparent #075698;
250 }
251
252 /* Variant : left
253 ------------------------------------------ */
254
255 .triangle-right.left:after {
256 top:16px;
257 left:-40px; /* value = - border-left-width - border-right-width */
258 bottom:auto;
259 border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
260 border-color:transparent #075698;
261 }
262
263 /* Variant : right
264 ------------------------------------------ */
265
266 .triangle-right.right:after {
267 top:16px;
268 right:-40px; /* value = - border-left-width - border-right-width */
269 bottom:auto;
270 left:auto;
271 border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
272 border-color:transparent #075698 ;
273 }
274
275
276 /* ============================================================================================================================
277 == BUBBLE WITH AN OBTUSE TRIANGLE
278 ** ============================================================================================================================ */
279
280 /* THE SPEECH BUBBLE
281 ------------------------------------------------------------------------------------------------------------------------------- */
282
283 .triangle-obtuse {
284 position:relative;
285 padding:15px;
286 margin:1em 0 3em;
287 color:#fff;
288 background:#c81e2b;
289
290 /* css3 */
291 -moz-border-radius:10px;
292 -webkit-border-radius:10px;
293 border-radius:10px;
294 /* NOTE: webkit gradient implementation is not as per spec */
295 background:-webkit-gradient(linear, left top, left bottom, from(#f04349), to(#c81e2b));
296 background:-moz-linear-gradient(top, #f04349, #c81e2b);
297 background:-o-linear-gradient(top, #f04349, #c81e2b);
298 }
299
300 /* Variant : for top positioned triangle
301 ------------------------------------------ */
302
303 .triangle-obtuse.top {
304 /* NOTE: webkit gradient implementation is not as per spec */
305 background:-webkit-gradient(linear, left top, left bottom, from(#c81e2b), to(#f04349));
306 background:-moz-linear-gradient(top, #c81e2b, #f04349);
307 background:-o-linear-gradient(top, #c81e2b, #f04349);
308 }
309
310 /* Variant : for left positioned triangle
311 ------------------------------------------ */
312
313 .triangle-obtuse.left {
314 margin-left:50px;
315 background:#c81e2b;
316 }
317
318 /* Variant : for right positioned triangle
319 ------------------------------------------ */
320
321 .triangle-obtuse.right {
322 margin-right:50px;
323 background:#c81e2b;
324 }
325
326 /* THE TRIANGLE
327 ------------------------------------------------------------------------------------------------------------------------------- */
328
329 /* creates the wider right-angled triangle */
330 .triangle-obtuse:before {
331 content:"";
332 display:block; /* reduce the damage in FF3.0 */
333 position:absolute;
334 bottom:-20px; /* value = - border-top-width - border-bottom-width */
335 left:60px; /* controls horizontal position */
336 width:0;
337 height:0;
338 border:0;
339 border-right-width:30px; /* vary this value to change the angle of the vertex */
340 border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
341 border-style:solid;
342 border-color:transparent #c81e2b;
343 }
344
345 /* creates the narrower right-angled triangle */
346 .triangle-obtuse:after {
347 content:"";
348 display:block; /* reduce the damage in FF3.0 */
349 position:absolute;
350 bottom:-20px; /* value = - border-top-width - border-bottom-width */
351 left:80px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-width) */
352 width:0;
353 height:0;
354 border-width:0;
355 border-right-width:10px; /* vary this value to change the angle of the vertex */
356 border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
357 border-style:solid;
358 border-color:transparent #fff;
359 }
360
361 /* Variant : top
362 ------------------------------------------ */
363
364 .triangle-obtuse.top:before {
365 top:-20px; /* value = - border-top-width - border-bottom-width */
366 right:60px; /* controls horizontal position */
367 bottom:auto;
368 left:auto;
369 border:0;
370 border-left-width:30px; /* vary this value to change the width of the triangle */
371 border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
372 border-style:solid;
373 border-color:transparent #c81e2b;
374 }
375
376 .triangle-obtuse.top:after {
377 top:-20px; /* value = - border-top-width - border-bottom-width */
378 right:80px; /* value = (:before's right) + (:before's border-right/left-width) - (:after's border-right/left-width) */
379 bottom:auto;
380 left:auto;
381 border-width:0;
382 border-left-width:10px; /* vary this value to change the width of the triangle */
383 border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
384 border-style:solid;
385 border-color:transparent #fff;
386 }
387
388 /* Variant : left
389 ------------------------------------------ */
390
391 .triangle-obtuse.left:before {
392 top:15px; /* controls vertical position */
393 left:-50px; /* value = - border-left-width - border-right-width */
394 bottom:auto;
395 border:0;
396 border-bottom-width:30px; /* vary this value to change the height of the triangle */
397 border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */
398 border-style:solid;
399 border-color:#c81e2b transparent;
400 }
401
402 .triangle-obtuse.left:after {
403 top:35px; /* value = (:before's top) + (:before's border-top/bottom-width) - (:after's border-top/bottom-width) */
404 left:-50px; /* value = - border-left-width - border-right-width */
405 bottom:auto;
406 border:0;
407 border-bottom-width:10px; /* vary this value to change the height of the triangle */
408 border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */
409 border-style:solid;
410 border-color:#fff transparent;
411 }
412
413 /* Variant : right
414 ------------------------------------------ */
415
416 .triangle-obtuse.right:before {
417 top:15px; /* controls vertical position */
418 right:-50px; /* value = - border-left-width - border-right-width */
419 bottom:auto;
420 border:0;
421 left:auto;
422 border-bottom-width:30px; /* vary this value to change the height of the triangle */
423 border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */
424 border-style:solid;
425 border-color:#c81e2b transparent;
426 }
427
428 .triangle-obtuse.right:after {
429 top:35px; /* value = (:before's top) + (:before's border-top/bottom-width) - (:after's border-top/bottom-width) */
430 right:-50px; /* value = - border-left-width - border-right-width */
431 bottom:auto;
432 border:0;
433 left:auto;
434 border-bottom-width:10px; /* vary this value to change the height of the triangle */
435 border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */
436 border-style:solid;
437 border-color:#fff transparent;
438 }
439
440
441
442
443
444
445
446 /* ============================================================================================================================
447 == BUBBLE WITH A BORDER AND TRIANGLE
448 ** ============================================================================================================================ */
449
450 /* THE SPEECH BUBBLE
451 ------------------------------------------------------------------------------------------------------------------------------- */
452
453 .triangle-border {
454 position:relative;
455 padding:15px;
456 margin:1em 0 3em;
457 border:5px solid #5a8f00;
458 color:#333;
459 background:#fff;
460
461 /* css3 */
462 -moz-border-radius:10px;
463 -webkit-border-radius:10px;
464 border-radius:10px;
465 }
466
467 /* Variant : for left positioned triangle
468 ------------------------------------------ */
469
470 .triangle-border.left {
471 margin-left:30px;
472 }
473
474 /* Variant : for right positioned triangle
475 ------------------------------------------ */
476
477 .triangle-border.right {
478 margin-right:30px;
479 }
480
481 /* THE TRIANGLE
482 ------------------------------------------------------------------------------------------------------------------------------- */
483
484 .triangle-border:before {
485 content:"";
486 display:block; /* reduce the damage in FF3.0 */
487 position:absolute;
488 bottom:-40px; /* value = - border-top-width - border-bottom-width */
489 left:40px; /* controls horizontal position */
490 width:0;
491 height:0;
492 border:20px solid transparent;
493 border-top-color:#5a8f00;
494 }
495
496 /* creates the smaller triangle */
497 .triangle-border:after {
498 content:"";
499 display:block; /* reduce the damage in FF3.0 */
500 position:absolute;
501 bottom:-26px; /* value = - border-top-width - border-bottom-width */
502 left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
503 width:0;
504 height:0;
505 border:13px solid transparent;
506 border-top-color:#fff;
507 }
508
509 /* Variant : top
510 ------------------------------------------ */
511
512 /* creates the larger triangle */
513 .triangle-border.top:before {
514 top:-40px; /* value = - border-top-width - border-bottom-width */
515 right:40px; /* controls horizontal position */
516 bottom:auto;
517 left:auto;
518 border:20px solid transparent;
519 border-bottom-color:#5a8f00;
520 }
521
522 /* creates the smaller triangle */
523 .triangle-border.top:after {
524 top:-26px; /* value = - border-top-width - border-bottom-width */
525 right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
526 bottom:auto;
527 left:auto;
528 border:13px solid transparent;
529 border-bottom-color:#fff;
530 }
531
532 /* Variant : left
533 ------------------------------------------ */
534
535 /* creates the larger triangle */
536 .triangle-border.left:before {
537 top:10px; /* controls vertical position */
538 left:-30px; /* value = - border-left-width - border-right-width */
539 bottom:auto;
540 border-width:15px 30px 15px 0;
541 border-style:solid;
542 border-color:transparent #5a8f00;
543 }
544
545 /* creates the smaller triangle */
546 .triangle-border.left:after {
547 top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
548 left:-21px; /* value = - border-left-width - border-right-width */
549 bottom:auto;
550 border-width:9px 21px 9px 0;
551 border-style:solid;
552 border-color:transparent #fff;
553 }
554
555 /* Variant : right
556 ------------------------------------------ */
557
558 /* creates the larger triangle */
559 .triangle-border.right:before {
560 top:10px; /* controls vertical position */
561 right:-30px; /* value = - border-left-width - border-right-width */
562 bottom:auto;
563 left:auto;
564 border-width:15px 0 15px 30px;
565 border-style:solid;
566 border-color:transparent #5a8f00;
567 }
568
569 /* creates the smaller triangle */
570 .triangle-border.right:after {
571 top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
572 right:-21px; /* value = - border-left-width - border-right-width */
573 bottom:auto;
574 left:auto;
575 border-width:9px 0 9px 21px;
576 border-style:solid;
577 border-color:transparent #fff;
578 }
579
580
581
582
583 /* ============================================================================================================================
584 == SPEECH BUBBLE ICON
585 ** ============================================================================================================================ */
586
587 .example-commentheading {
588 position:relative;
589 padding:0;
590 color:#b513af;
591 }
592
593 /* creates the rectangle */
594 .example-commentheading:before {
595 content:"";
596 display:block; /* reduce the damage in FF3.0 */
597 position:absolute;
598 top:9px;
599 left:-25px;
600 width:15px;
601 height:10px;
602 background:#b513af;
603
604 /* css3 */
605 -moz-border-radius:3px;
606 -webkit-border-radius:3px;
607 border-radius:3px;
608 }
609
610 /* creates the triangle */
611 .example-commentheading:after {
612 content:"";
613 display:block; /* reduce the damage in FF3.0 */
614 position:absolute;
615 top:15px;
616 left:-19px;
617 width:0;
618 height:0;
619 border:4px solid transparent;
620 border-left-color:#b513af;
621 }
622
623
624 /* ============================================================================================================================
625 == BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
626 ** ============================================================================================================================ */
627
628 .example-right {
629 position:relative;
630 padding:15px 30px;
631 margin:0;
632 color:#fff;
633 background:#5a8f00; /* default background for browsers without gradient support */
634
635 /* css3 */
636 -moz-border-radius:10px;
637 -webkit-border-radius:10px;
638 border-radius:10px;
639 /* NOTE: webkit gradient implementation is not as per spec */
640 background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));
641 background:-moz-linear-gradient(top, #b8db29, #5a8f00);
642 background:-o-linear-gradient(top, #b8db29, #5a8f00);
643 }
644
645 /* display of quote author (alternatively use a class on the element following the blockquote) */
646 .example-right + p {margin:15px 0 2em 85px; font-style:italic;}
647
648 /* creates the triangle */
649 .example-right:after {
650 content:"";
651 display:block; /* reduce the damage in FF3.0 */
652 position:absolute;
653 bottom:-50px;
654 left:50px;
655 width:0;
656 height:0;
657 border-width:0 20px 50px 0px;
658 border-style:solid;
659 border-color:transparent #5a8f00;
660 }
661
662
663 /* ============================================================================================================================
664 == BLOCKQUOTE WITH OBTUSE TRIANGLE
665 ** ============================================================================================================================ */
666
667 .example-obtuse {
668 position:relative;
669 padding:15px 30px;
670 margin:0;
671 color:#000;
672 background:#f3961c; /* default background for browsers without gradient support */
673
674 /* css3
675 Using longhand to avoid inconsistencies between Safari 4 and Chrome 4
676 */
677 -webkit-border-top-left-radius:25px 50px;
678 -webkit-border-top-right-radius:25px 50px;
679 -webkit-border-bottom-right-radius:25px 50px;
680 -webkit-border-bottom-left-radius:25px 50px;
681 -moz-border-radius:25px / 50px;
682 border-radius:25px / 50px;
683 /* NOTE: webkit gradient implementation is not as per spec */
684 background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
685 background:-moz-linear-gradient(top, #f9d835, #f3961c);
686 background:-o-linear-gradient(top, #f9d835, #f3961c);
687 }
688
689 /* display of quote author (alternatively use a class on the element following the blockquote) */
690 .example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}
691
692 /* creates the larger triangle */
693 .example-obtuse:before {
694 content:"";
695 display:block; /* reduce the damage in FF3.0 */
696 position:absolute;
697 bottom:-30px;
698 right:80px;
699 width:0;
700 height:0;
701 border-width:0 0 30px 50px;
702 border-style:solid;
703 border-color:transparent #f3961c;
704 }
705
706 /* creates the smaller triangle */
707 .example-obtuse:after {
708 content:"";
709 display:block; /* reduce the damage in FF3.0 */
710 position:absolute;
711 bottom:-30px;
712 right:110px;
713 width:0;
714 height:0;
715 border-width:0 0 30px 20px;
716 border-style:solid;
717 border-color:transparent #fff;
718 }
719
720
721 /* ============================================================================================================================
722 == TWITTER
723 ** ============================================================================================================================ */
724
725 .example-twitter {
726 position:relative;
727 padding:15px;
728 margin:100px 0 0.5em;
729 color:#333;
730 background:#eee;
731
732 /* css3 */
733 -moz-border-radius:10px;
734 -webkit-border-radius:10px;
735 border-radius:10px;
736 }
737
738 .example-twitter p {font-size:28px; line-height:1.25em;}
739
740 /* this isn't necessary, just saves me having to edit the HTML of the demo */
741 .example-twitter:before {
742 content:url(twitter-logo.gif);
743 display:block; /* reduce the damage in FF3.0 */
744 position:absolute;
745 top:-60px;
746 left:0;
747 width:155px;
748 height:36px;
749 }
750
751 /* creates the triangle */
752 .example-twitter:after {
753 content:"";
754 display:block; /* reduce the damage in FF3.0 */
755 position:absolute;
756 top:-30px;
757 left:50px;
758 width:0;
759 height:0;
760 border:15px solid transparent;
761 border-bottom-color:#eee;
762 }
763
764 /* display of quote author (alternatively use a class on the element following the blockquote) */
765 .example-twitter + p {padding-left:15px; font:14px Arial, sans-serif;}
766
767
768 /* ============================================================================================================================
769 == NUMBER
770 ** ============================================================================================================================ */
771
772 .example-number {
773 position:relative;
774 width:200px;
775 height:200px;
776 margin:50px 0 200px;
777 text-align:center;
778 font:140px/200px Arial, sans-serif;
779 color:#fff;
780 background:#C91F2C;
781 }
782
783 /* creates the larger triangle */
784 .example-number:before {
785 content:"";
786 display:block; /* reduce the damage in FF3.0 */
787 position:absolute;
788 bottom:-140px;
789 right:0;
790 width:0;
791 height:0;
792 border-width:0 0 140px 140px;
793 border-style:solid;
794 border-color:transparent #C91F2C;
795 }
796
797 /* creates the larger triangle */
798 .example-number:after {
799 content:"";
800 display:block; /* reduce the damage in FF3.0 */
801 position:absolute;
802 bottom:-140px;
803 right:85px;
804 width:0;
805 height:0;
806 border-width:0 0 140px 55px;
807 border-style:solid;
808 border-color:transparent #fff;
809 }
810
811
812 /* ============================================================================================================================
813 == PINCHED SPEECH BUBBLE (more CSS3)
814 ** ============================================================================================================================ */
815
816 .pinched {
817 position:relative;
818 padding:15px;
819 margin:50px 0 3em;
820 text-align:center;
821 color:#fff;
822 background:#333;
823
824 /* css3 */
825 -moz-border-radius:10px;
826 -webkit-border-radius:10px;
827 border-radius:10px;
828 }
829
830 /* creates a rectangle of the colour wanted for the pointy bit */
831 .pinched:before {
832 content:"";
833 position:absolute;
834 top:-20px;
835 left:50%;
836 width:100px;
837 height:20px;
838 margin:0 0 0 -50px;
839 background:#333;
840 }
841
842 /* creates a rounded rectangle to cover part of the rectangle generated above */
843 .pinched:after {
844 content:"";
845 position:absolute;
846 top:-20px;
847 left:0;
848 width:50%;
849 height:20px;
850 background:#fff;
851
852 /* css3 */
853 -moz-border-radius-bottomright:15px;
854 -webkit-border-bottom-right-radius:15px;
855 border-bottom-right-radius:15px;
856 }
857
858 /* creates the other rounded rectangle */
859 .pinched>:first-child:before {
860 content:"";
861 position:absolute;
862 top:-20px;
863 right:0;
864 width:50%;
865 height:20px;
866 background:#fff;
867
868 /* css3 */
869 -moz-border-radius-bottomleft:15px;
870 -webkit-border-bottom-left-radius:15px;
871 border-bottom-left-radius:15px;
872 }
873
874
875 /* ============================================================================================================================
876 == OVAL SPEECH BUBBLE (more CSS3)
877 ** ============================================================================================================================ */
878
879 .oval-speech {
880 position:relative;
881 width:270px;
882 padding:50px 40px;
883 margin:1em auto 50px;
884 text-align:center;
885 color:#fff;
886 background:#5a8f00;
887
888 /* css3 */
889 /*
890 NOTES:
891 -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
892 -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
893 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
894 */
895 -webkit-border-top-left-radius:220px 120px;
896 -webkit-border-top-right-radius:220px 120px;
897 -webkit-border-bottom-right-radius:220px 120px;
898 -webkit-border-bottom-left-radius:220px 120px;
899 -moz-border-radius:220px / 120px;
900 border-radius:220px / 120px;
901 /* NOTE: webkit gradient implementation is not as per spec */
902 background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));
903 background:-moz-linear-gradient(top, #b8db29, #5a8f00);
904 background:-o-linear-gradient(top, #b8db29, #5a8f00);
905 }
906
907 .oval-speech p {font-size:1.25em;}
908
909 /* creates part of the curve */
910 .oval-speech:before {
911 content:"";
912 position:absolute;
913 z-index:-1;
914 bottom:-30px;
915 right:50%;
916 width:0;
917 height:30px;
918 border-right:60px solid #5a8f00;
919 background:#5a8f00; /* need this for webkit - bug in handling of border-radius */
920
921 /* css3 */
922 -moz-border-radius-bottomright:80px 50px;
923 -webkit-border-bottom-right-radius:80px 50px;
924 border-bottom-right-radius:80px 50px;
925 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
926 -moz-transform:translate(0, -2px);
927 -webkit-transform:translate(0, -2px);
928 -o-transform:translate(0, -2px);
929 transform:translate(0, -2px);
930 }
931
932 /* creates part of the curved pointy bit */
933 .oval-speech:after {
934 content:"";
935 position:absolute;
936 z-index:-1;
937 bottom:-30px;
938 right:50%;
939 width:60px;
940 height:30px;
941 background:#fff;
942
943 /* css3 */
944 -moz-border-radius-bottomright:40px 50px;
945 -webkit-border-bottom-right-radius:40px 50px;
946 border-bottom-right-radius:40px 50px;
947 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
948 -moz-transform:translate(-30px, -2px);
949 -webkit-transform:translate(-30px, -2px);
950 -o-transform:translate(-30px, -2px);
951 transform:translate(-30px, -2px);
952 }
953
954
955 /* ============================================================================================================================
956 == OVAL THOUGHT BUBBLE (more CSS3)
957 ** ============================================================================================================================ */
958
959 .oval-thought {
960 position:relative;
961 width:270px;
962 padding:50px 40px;
963 margin:1em auto 80px;
964 text-align:center;
965 color:#fff;
966 background:#075698;
967
968 /* css3 */
969 /*
970 NOTES:
971 -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
972 -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
973 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
974 */
975 -webkit-border-top-left-radius:220px 120px;
976 -webkit-border-top-right-radius:220px 120px;
977 -webkit-border-bottom-right-radius:220px 120px;
978 -webkit-border-bottom-left-radius:220px 120px;
979 -moz-border-radius:220px / 120px;
980 border-radius:220px / 120px;
981 /* NOTE: webkit gradient implementation is not as per spec */
982 background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
983 background:-moz-linear-gradient(top, #2e88c4, #075698);
984 background:-o-linear-gradient(top, #2e88c4, #075698);
985 }
986
987 .oval-thought p {font-size:1.25em;}
988
989 /* creates the larger circle */
990 .oval-thought:before {
991 content:"";
992 position:absolute;
993 bottom:-20px;
994 left:50px;
995 width:30px;
996 height:30px;
997 background:#075698;
998
999 /* css3 */
1000 -moz-border-radius:30px;
1001 -webkit-border-radius:30px;
1002 border-radius:30px;
1003 }
1004
1005 /* creates the smaller circle */
1006 .oval-thought:after {
1007 content:"";
1008 position:absolute;
1009 bottom:-30px;
1010 left:30px;
1011 width:15px;
1012 height:15px;
1013 background:#075698;
1014
1015 /* css3 */
1016 -moz-border-radius:15px;
1017 -webkit-border-radius:15px;
1018 border-radius:15px;
1019 }
1020
1021 /* ============================================================================================================================
1022 == OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3)
1023 ** ============================================================================================================================ */
1024
1025 .oval-quotes {
1026 position:relative;
1027 width:400px;
1028 height:350px;
1029 margin:2em auto 10px;
1030 color:#000;
1031 background:#ffed26;
1032
1033 /* css3 */
1034 /*
1035 NOTES:
1036 -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
1037 -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
1038 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
1039 */
1040 -webkit-border-top-left-radius:400px 350px;
1041 -webkit-border-top-right-radius:400px 350px;
1042 -webkit-border-bottom-right-radius:400px 350px;
1043 -webkit-border-bottom-left-radius:400px 350px;
1044 -moz-border-radius:400px / 350px;
1045 border-radius:400px / 350px;
1046 }
1047
1048 /* creates opening quotation mark */
1049 .oval-quotes:before {
1050 content:"\201C";
1051 position:absolute;
1052 z-index:1;
1053 top:20px;
1054 left:20px;
1055 font:80px/1 Georgia;
1056 color:#ffed26;
1057 }
1058
1059 /* creates closing quotation mark */
1060 .oval-quotes:after {
1061 content:"\201D";
1062 position:absolute;
1063 z-index:1;
1064 bottom:0;
1065 right:20px;
1066 font:80px/0.25 Georgia;
1067 color:#ffed26;
1068 }
1069
1070 .oval-quotes p {
1071 width:250px;
1072 height:250px;
1073 padding:50px 0 0;
1074 margin:0 auto;
1075 text-align:center;
1076 font-size:35px;
1077 }
1078
1079 /* creates larger curve */
1080 .oval-quotes p:before {
1081 content:"";
1082 position:absolute;
1083 z-index:-1;
1084 bottom:-30px;
1085 right:25%;
1086 width:0;
1087 height:80px;
1088 border-right:200px solid #ffed26;
1089 background:#ffed26; /* need this for webkit - bug in handling of border-radius */
1090
1091 /* css3 */
1092 -moz-border-radius-bottomright:200px 100px;
1093 -webkit-border-bottom-right-radius:200px 100px;
1094 border-bottom-right-radius:200px 100px;
1095 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
1096 -moz-transform:translate(0, -2px);
1097 -webkit-transform:translate(0, -2px);
1098 -o-transform:translate(0, -2px);
1099 transform:translate(0, -2px);
1100 }
1101
1102 /* creates smaller curve */
1103 .oval-quotes p:after {
1104 content:"";
1105 position:absolute;
1106 z-index:-1;
1107 bottom:-30px;
1108 right:55%;
1109 width:180px; /* wider than necessary to make it look a bit better in IE8 */
1110 height:60px;
1111 background:#fff; /* need this for webkit - bug in handling of border-radius */
1112
1113 /* css3 */
1114 -moz-border-radius-bottomright:40px 50px;
1115 -webkit-border-bottom-right-radius:40px 50px;
1116 border-bottom-right-radius:40px 50px;
1117 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
1118 -moz-transform:translate(-30px, -2px);
1119 -webkit-transform:translate(-30px, -2px);
1120 -o-transform:translate(-30px, -2px);
1121 transform:translate(-30px, -2px);
1122 }
1123
1124 .oval-quotes + p {
1125 position:relative; /* part of the IE8 width compromise */
1126 width:150px;
1127 margin:0 0 2em;
1128 font-size:18px;
1129 font-weight:bold;
1130 }
1131
1132
1133 /* ============================================================================================================================
1134 == RECTANGLE-BORDER STYLE WITH CURVE
1135 ** ============================================================================================================================ */
1136
1137 .rectangle-speech-border {
1138 position:relative;
1139 padding:50px 15px;
1140 margin:1em 0 3em;
1141 border:10px solid #5a8f00;
1142 text-align:center;
1143 color:#333;
1144 background:#fff;
1145
1146 /* css3 */
1147 -moz-border-radius:20px;
1148 -webkit-border-radius:20px;
1149 border-radius:20px;
1150 }
1151
1152 /* creates larger curve */
1153 .rectangle-speech-border:before {
1154 content:"";
1155 position:absolute;
1156 z-index:10;
1157 bottom:-40px;
1158 left:50px;
1159 width:50px;
1160 height:30px;
1161 border-style:solid;
1162 border-width:0 10px 10px 0;
1163 border-color:#5a8f00;
1164 background:transparent;
1165
1166 /* css3 */
1167 -moz-border-radius-bottomright:80px 50px;
1168 -webkit-border-bottom-right-radius:80px 50px;
1169 border-bottom-right-radius:80px 50px;
1170 }
1171
1172 /* creates smaller curve */
1173 .rectangle-speech-border:after {
1174 content:"";
1175 position:absolute;
1176 z-index:10;
1177 bottom:-40px;
1178 left:50px;
1179 width:20px;
1180 height:30px;
1181 border-style:solid;
1182 border-width:0 10px 10px 0;
1183 border-color:#5a8f00;
1184 background:transparent;
1185
1186 /* css3 */
1187 -moz-border-radius-bottomright:40px 50px;
1188 -webkit-border-bottom-right-radius:40px 50px;
1189 border-bottom-right-radius:40px 50px;
1190 }
1191
1192 /* creates a small circle to produce a rounded point where the two curves meet */
1193 .rectangle-speech-border>:first-child:before {
1194 content:"";
1195 position:absolute;
1196 bottom:-40px;
1197 left:45px;
1198 width:10px;
1199 height:10px;
1200 background:#5a8f00;
1201
1202 /* css3 */
1203 -moz-border-radius:10px;
1204 -webkit-border-radius:10px;
1205 border-radius:10px;
1206 }
1207
1208 /* creates a white rectangle to cover part of the oval border*/
1209 .rectangle-speech-border>:first-child:after {
1210 content:"";
1211 position:absolute;
1212 bottom:-10px;
1213 left:76px;
1214 width:24px;
1215 height:15px;
1216 background:#fff;
1217 }
1218
1219 /* ============================================================================================================================
1220 == OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
1221 ** ============================================================================================================================ */
1222
1223 .oval-speech-border {
1224 position:relative;
1225 padding:70px 30px;
1226 margin:1em auto 60px;
1227 border:10px solid #f3961c;
1228 text-align:center;
1229 color:#333;
1230 background:#fff;
1231
1232 /* css3 */
1233 /*
1234 NOTES:
1235 -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
1236 -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
1237 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
1238 */
1239 -webkit-border-top-left-radius:240px 140px;
1240 -webkit-border-top-right-radius:240px 140px;
1241 -webkit-border-bottom-right-radius:240px 140px;
1242 -webkit-border-bottom-left-radius:240px 140px;
1243 -moz-border-radius:240px / 140px;
1244 border-radius:240px / 140px;
1245 }
1246
1247 /* creates larger curve */
1248 .oval-speech-border:before {
1249 content:"";
1250 position:absolute;
1251 z-index:2;
1252 bottom:-40px;
1253 right:50%;
1254 width:50px;
1255 height:30px;
1256 border-style:solid;
1257 border-width:0 10px 10px 0;
1258 border-color:#f3961c;
1259 margin-right:-10px;
1260 background:transparent;
1261
1262 /* css3 */
1263 -moz-border-radius-bottomright:80px 50px;
1264 -webkit-border-bottom-right-radius:80px 50px;
1265 border-bottom-right-radius:80px 50px;
1266 }
1267
1268 /* creates smaller curve */
1269 .oval-speech-border:after {
1270 content:"";
1271 position:absolute;
1272 z-index:2;
1273 bottom:-40px;
1274 right:50%;
1275 width:20px;
1276 height:31px;
1277 border-style:solid;
1278 border-width:0 10px 10px 0;
1279 border-color:#f3961c;
1280 margin-right:20px;
1281 background:transparent;
1282
1283 /* css3 */
1284 -moz-border-radius-bottomright:40px 50px;
1285 -webkit-border-bottom-right-radius:40px 50px;
1286 border-bottom-right-radius:40px 50px;
1287 }
1288
1289 /* creates a small circle to produce a rounded point where the two curves meet */
1290 .oval-speech-border>:first-child:before {
1291 content:"";
1292 position:absolute;
1293 z-index:1;
1294 bottom:-40px;
1295 right:50%;
1296 width:10px;
1297 height:10px;
1298 margin-right:45px;
1299 background:#f3961c;
1300
1301 /* css3 */
1302 -moz-border-radius:10px;
1303 -webkit-border-radius:10px;
1304 border-radius:10px;
1305 }
1306
1307 /* creates a white rectangle to cover part of the oval border*/
1308 .oval-speech-border>:first-child:after {
1309 content:"";
1310 position:absolute;
1311 z-index:1;
1312 bottom:-10px;
1313 right:50%;
1314 width:30px;
1315 height:15px;
1316 background:#fff;
1317 }
1318
1319 /* ============================================================================================================================
1320 == OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)
1321 ** ============================================================================================================================ */
1322
1323 .oval-thought-border {
1324 position:relative;
1325 padding:70px 30px;
1326 margin:1em auto 80px;
1327 border:10px solid #c81e2b;
1328 text-align:center;
1329 color:#333;
1330 background:#fff;
1331
1332 /* css3 */
1333 /*
1334 NOTES:
1335 -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
1336 -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
1337 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
1338 */
1339 -webkit-border-top-left-radius:240px 140px;
1340 -webkit-border-top-right-radius:240px 140px;
1341 -webkit-border-bottom-right-radius:240px 140px;
1342 -webkit-border-bottom-left-radius:240px 140px;
1343 -moz-border-radius:240px / 140px;
1344 border-radius:240px / 140px;
1345 }
1346
1347 /* creates the larger circle */
1348 .oval-thought-border:before {
1349 content:"";
1350 position:absolute;
1351 z-index:10;
1352 bottom:-40px;
1353 right:100px;
1354 width:50px;
1355 height:50px;
1356 border:10px solid #c81e2b;
1357 background:#fff;
1358
1359 /* css3 */
1360 -moz-border-radius:50px;
1361 -webkit-border-radius:50px;
1362 border-radius:50px;
1363 }
1364
1365 /* creates the smaller circle */
1366 .oval-thought-border:after {
1367 content:"";
1368 position:absolute;
1369 z-index:10;
1370 bottom:-60px;
1371 right:50px;
1372 width:25px;
1373 height:25px;
1374 border:10px solid #c81e2b;
1375 background:#fff;
1376
1377 /* css3 */
1378 -moz-border-radius:25px;
1379 -webkit-border-radius:25px;
1380 border-radius:25px;
1381 }
1382 </style>
1383 </head>
1384
1385 <body>
1386 <div id="container">
1387 <header>
1388 <hgroup>
1389 <h1>Pure CSS speech bubbles</h1>
1390 <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
1391 </hgroup>
1392
1393
1394 <p>The demo page for <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a>.</p>
1395 <p>For a detailed explanation <a href="default.css">view the CSS file</a>. It is heavily commented.</p>
1396
1397 <p>All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.</p>
1398 </header>
1399
1400 <div class="content">
1401
1402 <h2>The basic bubble variants</h2>
1403 <p class="triangle-isosceles">This only needs one HTML element.</p>
1404 <p class="triangle-isosceles top">For example, <code><p>[text]</p></code>.</p>
1405 <p class="triangle-isosceles left">But it could be any element you want.</p>
1406 <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
1407
1408 <p class="triangle-right">This only needs one HTML element.</p>
1409 <p class="triangle-right top">For example, <code><p>[text]</p></code>.</p>
1410 <p class="triangle-right left">But it could be any element you want.</p>
1411 <p class="triangle-right right">The entire appearance is created only with CSS.</p>
1412 <p class="triangle-obtuse">This only needs one HTML element.</p>
1413
1414 <p class="triangle-obtuse top">For example, <code><p>[text]</p></code>.</p>
1415 <p class="triangle-obtuse left">But it could be any element you want.</p>
1416 <p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>
1417 <p class="triangle-border">This only needs one HTML element.</p>
1418 <p class="triangle-border top">For example, <code><p>[text]</p></code>.</p>
1419
1420 <p class="triangle-border left">But it could be any element you want.</p>
1421 <p class="triangle-border right">The entire appearance is created only with CSS.</p>
1422
1423
1424 <h2>Simple examples</h2>
1425
1426 <h3 class="example-commentheading">125 comments</h3>
1427
1428 <blockquote class="example-right">
1429 <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
1430
1431 </blockquote>
1432 <p>Ivan Chermayeff</p>
1433
1434 <blockquote class="example-obtuse">
1435 <p>It’s not what you look at that matters, it’s what you see.</p>
1436 </blockquote>
1437 <p>Henry David Thoreau</p>
1438
1439
1440 <blockquote class="example-twitter" cite="http://twitter.com/necolas/status/9880187933">
1441 <p>Takes me longer to write up blog posts on experiments or projects than to create them in the first place.</p>
1442 </blockquote>
1443 <p><a href="http://twitter.com/necolas">@necolas</a> at <a href="http://twitter.com/necolas/status/9880187933">4:05 PM March 2nd 2010</a></p>
1444
1445 <div class="example-number">57</div>
1446
1447
1448 <h2>More complex CSS3 examples</h2>
1449 <p>Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.</p>
1450
1451 <div class="pinched">
1452 <p><strong>It doesn’t matter what the first child element of this div is</strong>...but it does need a child element.</p>
1453 </div>
1454
1455 <blockquote class="oval-speech">
1456 <p>This is a blockquote that is styled to look like a speech bubble</p>
1457 </blockquote>
1458
1459 <blockquote class="oval-thought">
1460 <p>This is a blockquote that is styled to look like a thought bubble</p>
1461 </blockquote>
1462
1463 <blockquote class="oval-quotes">
1464
1465 <p>No, Donny, these men are nihilists, there’s nothing to be afraid of.</p>
1466 </blockquote>
1467 <p>Walter Sobchak</p>
1468
1469 <blockquote class="rectangle-speech-border">
1470 <p>This is a blockquote that is styled to look like a speech bubble</p>
1471 </blockquote>
1472
1473 <blockquote class="oval-speech-border">
1474 <p>This is a blockquote that is styled to look like a speech bubble</p>
1475 </blockquote>
1476
1477 <blockquote class="oval-thought-border">
1478 <p>This is a blockquote that is styled to look like a thought bubble</p>
1479 </blockquote>
1480 </div>
1481
1482 <p>Read the article: <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a>.</p>
1483
1484 <p class="follow"><a href="http://twitter.com/necolas">You can find me on <span>twitter</span></a>.</p>
1485
1486 </div>
1487
1488 </body>
1489
1490 </html>
1491
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>Demo: Pure CSS speech bubbles – Nicolas Gallagher</title>
7 <style type="text/css">
8
9 /* ------------------------------------------
10 PURE CSS SPEECH BUBBLES
11 by Nicolas Gallagher
12 - http://nicolasgallagher.com/pure-css-speech-bubbles/
13
14 http://nicolasgallagher.com
15 http://twitter.com/necolas
16
17 Created: 02 March 2010
18 Version: 1.1 (21 October 2010)
19
20 Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
21 ------------------------------------------ */
22
23 /* NOTE: Some declarations use longhand notation so that it can be clearly
24 explained what specific properties or values do and what their relationship
25 is to other properties or values in creating the effect */
26
27 /* ============================================================================================================================
28 == GENERAL STYLES
29 ** ============================================================================================================================ */
30
31 body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
32
33 a:link,
34 a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
35 a:visited {border-bottom:1px solid #730800; color:#730800;}
36
37 a:hover,
38 a:focus,
39 a:active {border:0; color:#fff; background:#c55500;}
40
41 a:visited:hover,
42 a:visited:focus,
43 a:visited:active {color:#fff; background:#730800;}
44
45 #container { width:500px; padding:0 0 50px; margin:0 auto;}
46
47 h1 {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
48 h2 {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
49 p {margin:1em 0;}
50
51 .content h2 {margin:2em 0 0.75em; font-size:2em; font-weight:bold; font-style:normal; text-align:left;}
52 blockquote {margin:1em 0;}
53 blockquote p {margin:0; font-size:2em;}
54
55 .follow {clear:both; margin-top:2em; font-size:1.125em;}
56 .follow span {font-weight:bold;}
57
58
59 /*
60 Should you want to set a background colour on a containing element
61 certain types of bubble effect may require you to include these
62 style declarations.
63 */
64 .content {
65 position:relative;
66 z-index:1;
67 }
68
69
70 /* ============================================================================================================================
71 == BUBBLE WITH AN ISOCELES TRIANGLE
72 ** ============================================================================================================================ */
73
74 /* THE SPEECH BUBBLE
75 ------------------------------------------------------------------------------------------------------------------------------- */
76
77 .triangle-isosceles {
78 position:relative;
79 padding:15px;
80 margin:1em 0 3em;
81 color:#000;
82 background:#f3961c; /* default background for browsers without gradient support */
83
84 /* css3 */
85 -moz-border-radius:10px;
86 -webkit-border-radius:10px;
87 border-radius:10px;
88 /* NOTE: webkit gradient implementation is not as per spec */
89 background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
90 background:-moz-linear-gradient(top, #f9d835, #f3961c);
91 background:-o-linear-gradient(top, #f9d835, #f3961c);
92 }
93
94 /* Variant : for top positioned triangle
95 ------------------------------------------ */
96
97 .triangle-isosceles.top {
98 /* NOTE: webkit gradient implementation is not as per spec */
99 background:-webkit-gradient(linear, left top, left bottom, from(#f3961c), to(#f9d835));
100 background:-moz-linear-gradient(top, #f3961c, #f9d835);
101 background:-o-linear-gradient(top, #f3961c, #f9d835);
102 }
103
104 /* Variant : for left/right positioned triangle
105 ------------------------------------------ */
106
107 .triangle-isosceles.left {
108 margin-left:50px;
109 background:#f3961c;
110 }
111
112 /* Variant : for right positioned triangle
113 ------------------------------------------ */
114
115 .triangle-isosceles.right {
116 margin-right:50px;
117 background:#f3961c;
118 }
119
120 /* THE TRIANGLE
121 ------------------------------------------------------------------------------------------------------------------------------- */
122
123 /* creates triangle */
124 .triangle-isosceles:after {
125 content:"";
126 display:block; /* reduce the damage in FF3.0 */
127 position:absolute;
128 bottom:-15px; /* value = - border-top-width - border-bottom-width */
129 left:50px; /* controls horizontal position */
130 width:0;
131 height:0;
132 border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
133 border-style:solid;
134 border-color:#f3961c transparent;
135 }
136
137 /* Variant : top
138 ------------------------------------------ */
139
140 .triangle-isosceles.top:after {
141 top:-15px; /* value = - border-top-width - border-bottom-width */
142 right:50px; /* controls horizontal position */
143 bottom:auto;
144 left:auto;
145 border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
146 border-color: #f3961c transparent;
147 }
148
149 /* Variant : left
150 ------------------------------------------ */
151
152 .triangle-isosceles.left:after {
153 top:16px; /* controls vertical position */
154 left:-50px; /* value = - border-left-width - border-right-width */
155 bottom:auto;
156 border-width:10px 50px 10px 0;
157 border-color:transparent #f3961c;
158 }
159
160 /* Variant : right
161 ------------------------------------------ */
162
163 .triangle-isosceles.right:after {
164 top:16px; /* controls vertical position */
165 right:-50px; /* value = - border-left-width - border-right-width */
166 bottom:auto;
167 left:auto;
168 border-width:10px 0 10px 50px;
169 border-color:transparent #f3961c;
170 }
171
172
173
174 /* ============================================================================================================================
175 == BUBBLE WITH A RIGHT-ANGLED TRIANGLE
176 ** ============================================================================================================================ */
177
178 /* THE SPEECH BUBBLE
179 ------------------------------------------------------------------------------------------------------------------------------- */
180
181 .triangle-right {
182 position:relative;
183 padding:15px;
184 margin:1em 0 3em;
185 color:#fff;
186 background:#075698; /* default background for browsers without gradient support */
187
188 /* css3 */
189 -moz-border-radius:10px;
190 -webkit-border-radius:10px;
191 border-radius:10px;
192 /* NOTE: webkit gradient implementation is not as per spec */
193 background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
194 background:-moz-linear-gradient(top, #2e88c4, #075698);
195 background:-o-linear-gradient(top, #2e88c4, #075698);
196 }
197
198 /* Variant : for top positioned triangle
199 ------------------------------------------ */
200
201 .triangle-right.top {
202 /* NOTE: webkit gradient implementation is not as per spec */
203 background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
204 background:-moz-linear-gradient(top, #075698, #2e88c4);
205 background:-o-linear-gradient(top, #075698, #2e88c4);
206 }
207
208 /* Variant : for left positioned triangle
209 ------------------------------------------ */
210
211 .triangle-right.left {
212 margin-left:40px;
213 background:#075698;
214 }
215
216 /* Variant : for right positioned triangle
217 ------------------------------------------ */
218
219 .triangle-right.right {
220 margin-right:40px;
221 background:#075698;
222 }
223
224 /* THE TRIANGLE
225 ------------------------------------------------------------------------------------------------------------------------------- */
226
227 .triangle-right:after {
228 content:"";
229 display:block; /* reduce the damage in FF3.0 */
230 position:absolute;
231 bottom:-20px; /* value = - border-top-width - border-bottom-width */
232 left:50px; /* controls horizontal position */
233 width:0;
234 height:0;
235 border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
236 border-style:solid;
237 border-color:#075698 transparent;
238 }
239
240 /* Variant : top
241 ------------------------------------------ */
242
243 .triangle-right.top:after {
244 top:-20px; /* value = - border-top-width - border-bottom-width */
245 right:50px; /* controls horizontal position */
246 bottom:auto;
247 left:auto;
248 border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
249 border-color:transparent #075698;
250 }
251
252 /* Variant : left
253 ------------------------------------------ */
254
255 .triangle-right.left:after {
256 top:16px;
257 left:-40px; /* value = - border-left-width - border-right-width */
258 bottom:auto;
259 border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
260 border-color:transparent #075698;
261 }
262
263 /* Variant : right
264 ------------------------------------------ */
265
266 .triangle-right.right:after {
267 top:16px;
268 right:-40px; /* value = - border-left-width - border-right-width */
269 bottom:auto;
270 left:auto;
271 border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
272 border-color:transparent #075698 ;
273 }
274
275
276 /* ============================================================================================================================
277 == BUBBLE WITH AN OBTUSE TRIANGLE
278 ** ============================================================================================================================ */
279
280 /* THE SPEECH BUBBLE
281 ------------------------------------------------------------------------------------------------------------------------------- */
282
283 .triangle-obtuse {
284 position:relative;
285 padding:15px;
286 margin:1em 0 3em;
287 color:#fff;
288 background:#c81e2b;
289
290 /* css3 */
291 -moz-border-radius:10px;
292 -webkit-border-radius:10px;
293 border-radius:10px;
294 /* NOTE: webkit gradient implementation is not as per spec */
295 background:-webkit-gradient(linear, left top, left bottom, from(#f04349), to(#c81e2b));
296 background:-moz-linear-gradient(top, #f04349, #c81e2b);
297 background:-o-linear-gradient(top, #f04349, #c81e2b);
298 }
299
300 /* Variant : for top positioned triangle
301 ------------------------------------------ */
302
303 .triangle-obtuse.top {
304 /* NOTE: webkit gradient implementation is not as per spec */
305 background:-webkit-gradient(linear, left top, left bottom, from(#c81e2b), to(#f04349));
306 background:-moz-linear-gradient(top, #c81e2b, #f04349);
307 background:-o-linear-gradient(top, #c81e2b, #f04349);
308 }
309
310 /* Variant : for left positioned triangle
311 ------------------------------------------ */
312
313 .triangle-obtuse.left {
314 margin-left:50px;
315 background:#c81e2b;
316 }
317
318 /* Variant : for right positioned triangle
319 ------------------------------------------ */
320
321 .triangle-obtuse.right {
322 margin-right:50px;
323 background:#c81e2b;
324 }
325
326 /* THE TRIANGLE
327 ------------------------------------------------------------------------------------------------------------------------------- */
328
329 /* creates the wider right-angled triangle */
330 .triangle-obtuse:before {
331 content:"";
332 display:block; /* reduce the damage in FF3.0 */
333 position:absolute;
334 bottom:-20px; /* value = - border-top-width - border-bottom-width */
335 left:60px; /* controls horizontal position */
336 width:0;
337 height:0;
338 border:0;
339 border-right-width:30px; /* vary this value to change the angle of the vertex */
340 border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
341 border-style:solid;
342 border-color:transparent #c81e2b;
343 }
344
345 /* creates the narrower right-angled triangle */
346 .triangle-obtuse:after {
347 content:"";
348 display:block; /* reduce the damage in FF3.0 */
349 position:absolute;
350 bottom:-20px; /* value = - border-top-width - border-bottom-width */
351 left:80px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-width) */
352 width:0;
353 height:0;
354 border-width:0;
355 border-right-width:10px; /* vary this value to change the angle of the vertex */
356 border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
357 border-style:solid;
358 border-color:transparent #fff;
359 }
360
361 /* Variant : top
362 ------------------------------------------ */
363
364 .triangle-obtuse.top:before {
365 top:-20px; /* value = - border-top-width - border-bottom-width */
366 right:60px; /* controls horizontal position */
367 bottom:auto;
368 left:auto;
369 border:0;
370 border-left-width:30px; /* vary this value to change the width of the triangle */
371 border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
372 border-style:solid;
373 border-color:transparent #c81e2b;
374 }
375
376 .triangle-obtuse.top:after {
377 top:-20px; /* value = - border-top-width - border-bottom-width */
378 right:80px; /* value = (:before's right) + (:before's border-right/left-width) - (:after's border-right/left-width) */
379 bottom:auto;
380 left:auto;
381 border-width:0;
382 border-left-width:10px; /* vary this value to change the width of the triangle */
383 border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
384 border-style:solid;
385 border-color:transparent #fff;
386 }
387
388 /* Variant : left
389 ------------------------------------------ */
390
391 .triangle-obtuse.left:before {
392 top:15px; /* controls vertical position */
393 left:-50px; /* value = - border-left-width - border-right-width */
394 bottom:auto;
395 border:0;
396 border-bottom-width:30px; /* vary this value to change the height of the triangle */
397 border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */
398 border-style:solid;
399 border-color:#c81e2b transparent;
400 }
401
402 .triangle-obtuse.left:after {
403 top:35px; /* value = (:before's top) + (:before's border-top/bottom-width) - (:after's border-top/bottom-width) */
404 left:-50px; /* value = - border-left-width - border-right-width */
405 bottom:auto;
406 border:0;
407 border-bottom-width:10px; /* vary this value to change the height of the triangle */
408 border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */
409 border-style:solid;
410 border-color:#fff transparent;
411 }
412
413 /* Variant : right
414 ------------------------------------------ */
415
416 .triangle-obtuse.right:before {
417 top:15px; /* controls vertical position */
418 right:-50px; /* value = - border-left-width - border-right-width */
419 bottom:auto;
420 border:0;
421 left:auto;
422 border-bottom-width:30px; /* vary this value to change the height of the triangle */
423 border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */
424 border-style:solid;
425 border-color:#c81e2b transparent;
426 }
427
428 .triangle-obtuse.right:after {
429 top:35px; /* value = (:before's top) + (:before's border-top/bottom-width) - (:after's border-top/bottom-width) */
430 right:-50px; /* value = - border-left-width - border-right-width */
431 bottom:auto;
432 border:0;
433 left:auto;
434 border-bottom-width:10px; /* vary this value to change the height of the triangle */
435 border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */
436 border-style:solid;
437 border-color:#fff transparent;
438 }
439
440
441
442
443
444
445
446 /* ============================================================================================================================
447 == BUBBLE WITH A BORDER AND TRIANGLE
448 ** ============================================================================================================================ */
449
450 /* THE SPEECH BUBBLE
451 ------------------------------------------------------------------------------------------------------------------------------- */
452
453 .triangle-border {
454 position:relative;
455 padding:15px;
456 margin:1em 0 3em;
457 border:5px solid #5a8f00;
458 color:#333;
459 background:#fff;
460
461 /* css3 */
462 -moz-border-radius:10px;
463 -webkit-border-radius:10px;
464 border-radius:10px;
465 }
466
467 /* Variant : for left positioned triangle
468 ------------------------------------------ */
469
470 .triangle-border.left {
471 margin-left:30px;
472 }
473
474 /* Variant : for right positioned triangle
475 ------------------------------------------ */
476
477 .triangle-border.right {
478 margin-right:30px;
479 }
480
481 /* THE TRIANGLE
482 ------------------------------------------------------------------------------------------------------------------------------- */
483
484 .triangle-border:before {
485 content:"";
486 display:block; /* reduce the damage in FF3.0 */
487 position:absolute;
488 bottom:-40px; /* value = - border-top-width - border-bottom-width */
489 left:40px; /* controls horizontal position */
490 width:0;
491 height:0;
492 border:20px solid transparent;
493 border-top-color:#5a8f00;
494 }
495
496 /* creates the smaller triangle */
497 .triangle-border:after {
498 content:"";
499 display:block; /* reduce the damage in FF3.0 */
500 position:absolute;
501 bottom:-26px; /* value = - border-top-width - border-bottom-width */
502 left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
503 width:0;
504 height:0;
505 border:13px solid transparent;
506 border-top-color:#fff;
507 }
508
509 /* Variant : top
510 ------------------------------------------ */
511
512 /* creates the larger triangle */
513 .triangle-border.top:before {
514 top:-40px; /* value = - border-top-width - border-bottom-width */
515 right:40px; /* controls horizontal position */
516 bottom:auto;
517 left:auto;
518 border:20px solid transparent;
519 border-bottom-color:#5a8f00;
520 }
521
522 /* creates the smaller triangle */
523 .triangle-border.top:after {
524 top:-26px; /* value = - border-top-width - border-bottom-width */
525 right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
526 bottom:auto;
527 left:auto;
528 border:13px solid transparent;
529 border-bottom-color:#fff;
530 }
531
532 /* Variant : left
533 ------------------------------------------ */
534
535 /* creates the larger triangle */
536 .triangle-border.left:before {
537 top:10px; /* controls vertical position */
538 left:-30px; /* value = - border-left-width - border-right-width */
539 bottom:auto;
540 border-width:15px 30px 15px 0;
541 border-style:solid;
542 border-color:transparent #5a8f00;
543 }
544
545 /* creates the smaller triangle */
546 .triangle-border.left:after {
547 top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
548 left:-21px; /* value = - border-left-width - border-right-width */
549 bottom:auto;
550 border-width:9px 21px 9px 0;
551 border-style:solid;
552 border-color:transparent #fff;
553 }
554
555 /* Variant : right
556 ------------------------------------------ */
557
558 /* creates the larger triangle */
559 .triangle-border.right:before {
560 top:10px; /* controls vertical position */
561 right:-30px; /* value = - border-left-width - border-right-width */
562 bottom:auto;
563 left:auto;
564 border-width:15px 0 15px 30px;
565 border-style:solid;
566 border-color:transparent #5a8f00;
567 }
568
569 /* creates the smaller triangle */
570 .triangle-border.right:after {
571 top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
572 right:-21px; /* value = - border-left-width - border-right-width */
573 bottom:auto;
574 left:auto;
575 border-width:9px 0 9px 21px;
576 border-style:solid;
577 border-color:transparent #fff;
578 }
579
580
581
582
583 /* ============================================================================================================================
584 == SPEECH BUBBLE ICON
585 ** ============================================================================================================================ */
586
587 .example-commentheading {
588 position:relative;
589 padding:0;
590 color:#b513af;
591 }
592
593 /* creates the rectangle */
594 .example-commentheading:before {
595 content:"";
596 display:block; /* reduce the damage in FF3.0 */
597 position:absolute;
598 top:9px;
599 left:-25px;
600 width:15px;
601 height:10px;
602 background:#b513af;
603
604 /* css3 */
605 -moz-border-radius:3px;
606 -webkit-border-radius:3px;
607 border-radius:3px;
608 }
609
610 /* creates the triangle */
611 .example-commentheading:after {
612 content:"";
613 display:block; /* reduce the damage in FF3.0 */
614 position:absolute;
615 top:15px;
616 left:-19px;
617 width:0;
618 height:0;
619 border:4px solid transparent;
620 border-left-color:#b513af;
621 }
622
623
624 /* ============================================================================================================================
625 == BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
626 ** ============================================================================================================================ */
627
628 .example-right {
629 position:relative;
630 padding:15px 30px;
631 margin:0;
632 color:#fff;
633 background:#5a8f00; /* default background for browsers without gradient support */
634
635 /* css3 */
636 -moz-border-radius:10px;
637 -webkit-border-radius:10px;
638 border-radius:10px;
639 /* NOTE: webkit gradient implementation is not as per spec */
640 background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));
641 background:-moz-linear-gradient(top, #b8db29, #5a8f00);
642 background:-o-linear-gradient(top, #b8db29, #5a8f00);
643 }
644
645 /* display of quote author (alternatively use a class on the element following the blockquote) */
646 .example-right + p {margin:15px 0 2em 85px; font-style:italic;}
647
648 /* creates the triangle */
649 .example-right:after {
650 content:"";
651 display:block; /* reduce the damage in FF3.0 */
652 position:absolute;
653 bottom:-50px;
654 left:50px;
655 width:0;
656 height:0;
657 border-width:0 20px 50px 0px;
658 border-style:solid;
659 border-color:transparent #5a8f00;
660 }
661
662
663 /* ============================================================================================================================
664 == BLOCKQUOTE WITH OBTUSE TRIANGLE
665 ** ============================================================================================================================ */
666
667 .example-obtuse {
668 position:relative;
669 padding:15px 30px;
670 margin:0;
671 color:#000;
672 background:#f3961c; /* default background for browsers without gradient support */
673
674 /* css3
675 Using longhand to avoid inconsistencies between Safari 4 and Chrome 4
676 */
677 -webkit-border-top-left-radius:25px 50px;
678 -webkit-border-top-right-radius:25px 50px;
679 -webkit-border-bottom-right-radius:25px 50px;
680 -webkit-border-bottom-left-radius:25px 50px;
681 -moz-border-radius:25px / 50px;
682 border-radius:25px / 50px;
683 /* NOTE: webkit gradient implementation is not as per spec */
684 background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
685 background:-moz-linear-gradient(top, #f9d835, #f3961c);
686 background:-o-linear-gradient(top, #f9d835, #f3961c);
687 }
688
689 /* display of quote author (alternatively use a class on the element following the blockquote) */
690 .example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}
691
692 /* creates the larger triangle */
693 .example-obtuse:before {
694 content:"";
695 display:block; /* reduce the damage in FF3.0 */
696 position:absolute;
697 bottom:-30px;
698 right:80px;
699 width:0;
700 height:0;
701 border-width:0 0 30px 50px;
702 border-style:solid;
703 border-color:transparent #f3961c;
704 }
705
706 /* creates the smaller triangle */
707 .example-obtuse:after {
708 content:"";
709 display:block; /* reduce the damage in FF3.0 */
710 position:absolute;
711 bottom:-30px;
712 right:110px;
713 width:0;
714 height:0;
715 border-width:0 0 30px 20px;
716 border-style:solid;
717 border-color:transparent #fff;
718 }
719
720
721 /* ============================================================================================================================
722 == TWITTER
723 ** ============================================================================================================================ */
724
725 .example-twitter {
726 position:relative;
727 padding:15px;
728 margin:100px 0 0.5em;
729 color:#333;
730 background:#eee;
731
732 /* css3 */
733 -moz-border-radius:10px;
734 -webkit-border-radius:10px;
735 border-radius:10px;
736 }
737
738 .example-twitter p {font-size:28px; line-height:1.25em;}
739
740 /* this isn't necessary, just saves me having to edit the HTML of the demo */
741 .example-twitter:before {
742 content:url(twitter-logo.gif);
743 display:block; /* reduce the damage in FF3.0 */
744 position:absolute;
745 top:-60px;
746 left:0;
747 width:155px;
748 height:36px;
749 }
750
751 /* creates the triangle */
752 .example-twitter:after {
753 content:"";
754 display:block; /* reduce the damage in FF3.0 */
755 position:absolute;
756 top:-30px;
757 left:50px;
758 width:0;
759 height:0;
760 border:15px solid transparent;
761 border-bottom-color:#eee;
762 }
763
764 /* display of quote author (alternatively use a class on the element following the blockquote) */
765 .example-twitter + p {padding-left:15px; font:14px Arial, sans-serif;}
766
767
768 /* ============================================================================================================================
769 == NUMBER
770 ** ============================================================================================================================ */
771
772 .example-number {
773 position:relative;
774 width:200px;
775 height:200px;
776 margin:50px 0 200px;
777 text-align:center;
778 font:140px/200px Arial, sans-serif;
779 color:#fff;
780 background:#C91F2C;
781 }
782
783 /* creates the larger triangle */
784 .example-number:before {
785 content:"";
786 display:block; /* reduce the damage in FF3.0 */
787 position:absolute;
788 bottom:-140px;
789 right:0;
790 width:0;
791 height:0;
792 border-width:0 0 140px 140px;
793 border-style:solid;
794 border-color:transparent #C91F2C;
795 }
796
797 /* creates the larger triangle */
798 .example-number:after {
799 content:"";
800 display:block; /* reduce the damage in FF3.0 */
801 position:absolute;
802 bottom:-140px;
803 right:85px;
804 width:0;
805 height:0;
806 border-width:0 0 140px 55px;
807 border-style:solid;
808 border-color:transparent #fff;
809 }
810
811
812 /* ============================================================================================================================
813 == PINCHED SPEECH BUBBLE (more CSS3)
814 ** ============================================================================================================================ */
815
816 .pinched {
817 position:relative;
818 padding:15px;
819 margin:50px 0 3em;
820 text-align:center;
821 color:#fff;
822 background:#333;
823
824 /* css3 */
825 -moz-border-radius:10px;
826 -webkit-border-radius:10px;
827 border-radius:10px;
828 }
829
830 /* creates a rectangle of the colour wanted for the pointy bit */
831 .pinched:before {
832 content:"";
833 position:absolute;
834 top:-20px;
835 left:50%;
836 width:100px;
837 height:20px;
838 margin:0 0 0 -50px;
839 background:#333;
840 }
841
842 /* creates a rounded rectangle to cover part of the rectangle generated above */
843 .pinched:after {
844 content:"";
845 position:absolute;
846 top:-20px;
847 left:0;
848 width:50%;
849 height:20px;
850 background:#fff;
851
852 /* css3 */
853 -moz-border-radius-bottomright:15px;
854 -webkit-border-bottom-right-radius:15px;
855 border-bottom-right-radius:15px;
856 }
857
858 /* creates the other rounded rectangle */
859 .pinched>:first-child:before {
860 content:"";
861 position:absolute;
862 top:-20px;
863 right:0;
864 width:50%;
865 height:20px;
866 background:#fff;
867
868 /* css3 */
869 -moz-border-radius-bottomleft:15px;
870 -webkit-border-bottom-left-radius:15px;
871 border-bottom-left-radius:15px;
872 }
873
874
875 /* ============================================================================================================================
876 == OVAL SPEECH BUBBLE (more CSS3)
877 ** ============================================================================================================================ */
878
879 .oval-speech {
880 position:relative;
881 width:270px;
882 padding:50px 40px;
883 margin:1em auto 50px;
884 text-align:center;
885 color:#fff;
886 background:#5a8f00;
887
888 /* css3 */
889 /*
890 NOTES:
891 -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
892 -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
893 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
894 */
895 -webkit-border-top-left-radius:220px 120px;
896 -webkit-border-top-right-radius:220px 120px;
897 -webkit-border-bottom-right-radius:220px 120px;
898 -webkit-border-bottom-left-radius:220px 120px;
899 -moz-border-radius:220px / 120px;
900 border-radius:220px / 120px;
901 /* NOTE: webkit gradient implementation is not as per spec */
902 background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));
903 background:-moz-linear-gradient(top, #b8db29, #5a8f00);
904 background:-o-linear-gradient(top, #b8db29, #5a8f00);
905 }
906
907 .oval-speech p {font-size:1.25em;}
908
909 /* creates part of the curve */
910 .oval-speech:before {
911 content:"";
912 position:absolute;
913 z-index:-1;
914 bottom:-30px;
915 right:50%;
916 width:0;
917 height:30px;
918 border-right:60px solid #5a8f00;
919 background:#5a8f00; /* need this for webkit - bug in handling of border-radius */
920
921 /* css3 */
922 -moz-border-radius-bottomright:80px 50px;
923 -webkit-border-bottom-right-radius:80px 50px;
924 border-bottom-right-radius:80px 50px;
925 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
926 -moz-transform:translate(0, -2px);
927 -webkit-transform:translate(0, -2px);
928 -o-transform:translate(0, -2px);
929 transform:translate(0, -2px);
930 }
931
932 /* creates part of the curved pointy bit */
933 .oval-speech:after {
934 content:"";
935 position:absolute;
936 z-index:-1;
937 bottom:-30px;
938 right:50%;
939 width:60px;
940 height:30px;
941 background:#fff;
942
943 /* css3 */
944 -moz-border-radius-bottomright:40px 50px;
945 -webkit-border-bottom-right-radius:40px 50px;
946 border-bottom-right-radius:40px 50px;
947 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
948 -moz-transform:translate(-30px, -2px);
949 -webkit-transform:translate(-30px, -2px);
950 -o-transform:translate(-30px, -2px);
951 transform:translate(-30px, -2px);
952 }
953
954
955 /* ============================================================================================================================
956 == OVAL THOUGHT BUBBLE (more CSS3)
957 ** ============================================================================================================================ */
958
959 .oval-thought {
960 position:relative;
961 width:270px;
962 padding:50px 40px;
963 margin:1em auto 80px;
964 text-align:center;
965 color:#fff;
966 background:#075698;
967
968 /* css3 */
969 /*
970 NOTES:
971 -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
972 -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
973 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
974 */
975 -webkit-border-top-left-radius:220px 120px;
976 -webkit-border-top-right-radius:220px 120px;
977 -webkit-border-bottom-right-radius:220px 120px;
978 -webkit-border-bottom-left-radius:220px 120px;
979 -moz-border-radius:220px / 120px;
980 border-radius:220px / 120px;
981 /* NOTE: webkit gradient implementation is not as per spec */
982 background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
983 background:-moz-linear-gradient(top, #2e88c4, #075698);
984 background:-o-linear-gradient(top, #2e88c4, #075698);
985 }
986
987 .oval-thought p {font-size:1.25em;}
988
989 /* creates the larger circle */
990 .oval-thought:before {
991 content:"";
992 position:absolute;
993 bottom:-20px;
994 left:50px;
995 width:30px;
996 height:30px;
997 background:#075698;
998
999 /* css3 */
1000 -moz-border-radius:30px;
1001 -webkit-border-radius:30px;
1002 border-radius:30px;
1003 }
1004
1005 /* creates the smaller circle */
1006 .oval-thought:after {
1007 content:"";
1008 position:absolute;
1009 bottom:-30px;
1010 left:30px;
1011 width:15px;
1012 height:15px;
1013 background:#075698;
1014
1015 /* css3 */
1016 -moz-border-radius:15px;
1017 -webkit-border-radius:15px;
1018 border-radius:15px;
1019 }
1020
1021 /* ============================================================================================================================
1022 == OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3)
1023 ** ============================================================================================================================ */
1024
1025 .oval-quotes {
1026 position:relative;
1027 width:400px;
1028 height:350px;
1029 margin:2em auto 10px;
1030 color:#000;
1031 background:#ffed26;
1032
1033 /* css3 */
1034 /*
1035 NOTES:
1036 -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
1037 -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
1038 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
1039 */
1040 -webkit-border-top-left-radius:400px 350px;
1041 -webkit-border-top-right-radius:400px 350px;
1042 -webkit-border-bottom-right-radius:400px 350px;
1043 -webkit-border-bottom-left-radius:400px 350px;
1044 -moz-border-radius:400px / 350px;
1045 border-radius:400px / 350px;
1046 }
1047
1048 /* creates opening quotation mark */
1049 .oval-quotes:before {
1050 content:"\201C";
1051 position:absolute;
1052 z-index:1;
1053 top:20px;
1054 left:20px;
1055 font:80px/1 Georgia;
1056 color:#ffed26;
1057 }
1058
1059 /* creates closing quotation mark */
1060 .oval-quotes:after {
1061 content:"\201D";
1062 position:absolute;
1063 z-index:1;
1064 bottom:0;
1065 right:20px;
1066 font:80px/0.25 Georgia;
1067 color:#ffed26;
1068 }
1069
1070 .oval-quotes p {
1071 width:250px;
1072 height:250px;
1073 padding:50px 0 0;
1074 margin:0 auto;
1075 text-align:center;
1076 font-size:35px;
1077 }
1078
1079 /* creates larger curve */
1080 .oval-quotes p:before {
1081 content:"";
1082 position:absolute;
1083 z-index:-1;
1084 bottom:-30px;
1085 right:25%;
1086 width:0;
1087 height:80px;
1088 border-right:200px solid #ffed26;
1089 background:#ffed26; /* need this for webkit - bug in handling of border-radius */
1090
1091 /* css3 */
1092 -moz-border-radius-bottomright:200px 100px;
1093 -webkit-border-bottom-right-radius:200px 100px;
1094 border-bottom-right-radius:200px 100px;
1095 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
1096 -moz-transform:translate(0, -2px);
1097 -webkit-transform:translate(0, -2px);
1098 -o-transform:translate(0, -2px);
1099 transform:translate(0, -2px);
1100 }
1101
1102 /* creates smaller curve */
1103 .oval-quotes p:after {
1104 content:"";
1105 position:absolute;
1106 z-index:-1;
1107 bottom:-30px;
1108 right:55%;
1109 width:180px; /* wider than necessary to make it look a bit better in IE8 */
1110 height:60px;
1111 background:#fff; /* need this for webkit - bug in handling of border-radius */
1112
1113 /* css3 */
1114 -moz-border-radius-bottomright:40px 50px;
1115 -webkit-border-bottom-right-radius:40px 50px;
1116 border-bottom-right-radius:40px 50px;
1117 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
1118 -moz-transform:translate(-30px, -2px);
1119 -webkit-transform:translate(-30px, -2px);
1120 -o-transform:translate(-30px, -2px);
1121 transform:translate(-30px, -2px);
1122 }
1123
1124 .oval-quotes + p {
1125 position:relative; /* part of the IE8 width compromise */
1126 width:150px;
1127 margin:0 0 2em;
1128 font-size:18px;
1129 font-weight:bold;
1130 }
1131
1132
1133 /* ============================================================================================================================
1134 == RECTANGLE-BORDER STYLE WITH CURVE
1135 ** ============================================================================================================================ */
1136
1137 .rectangle-speech-border {
1138 position:relative;
1139 padding:50px 15px;
1140 margin:1em 0 3em;
1141 border:10px solid #5a8f00;
1142 text-align:center;
1143 color:#333;
1144 background:#fff;
1145
1146 /* css3 */
1147 -moz-border-radius:20px;
1148 -webkit-border-radius:20px;
1149 border-radius:20px;
1150 }
1151
1152 /* creates larger curve */
1153 .rectangle-speech-border:before {
1154 content:"";
1155 position:absolute;
1156 z-index:10;
1157 bottom:-40px;
1158 left:50px;
1159 width:50px;
1160 height:30px;
1161 border-style:solid;
1162 border-width:0 10px 10px 0;
1163 border-color:#5a8f00;
1164 background:transparent;
1165
1166 /* css3 */
1167 -moz-border-radius-bottomright:80px 50px;
1168 -webkit-border-bottom-right-radius:80px 50px;
1169 border-bottom-right-radius:80px 50px;
1170 }
1171
1172 /* creates smaller curve */
1173 .rectangle-speech-border:after {
1174 content:"";
1175 position:absolute;
1176 z-index:10;
1177 bottom:-40px;
1178 left:50px;
1179 width:20px;
1180 height:30px;
1181 border-style:solid;
1182 border-width:0 10px 10px 0;
1183 border-color:#5a8f00;
1184 background:transparent;
1185
1186 /* css3 */
1187 -moz-border-radius-bottomright:40px 50px;
1188 -webkit-border-bottom-right-radius:40px 50px;
1189 border-bottom-right-radius:40px 50px;
1190 }
1191
1192 /* creates a small circle to produce a rounded point where the two curves meet */
1193 .rectangle-speech-border>:first-child:before {
1194 content:"";
1195 position:absolute;
1196 bottom:-40px;
1197 left:45px;
1198 width:10px;
1199 height:10px;
1200 background:#5a8f00;
1201
1202 /* css3 */
1203 -moz-border-radius:10px;
1204 -webkit-border-radius:10px;
1205 border-radius:10px;
1206 }
1207
1208 /* creates a white rectangle to cover part of the oval border*/
1209 .rectangle-speech-border>:first-child:after {
1210 content:"";
1211 position:absolute;
1212 bottom:-10px;
1213 left:76px;
1214 width:24px;
1215 height:15px;
1216 background:#fff;
1217 }
1218
1219 /* ============================================================================================================================
1220 == OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
1221 ** ============================================================================================================================ */
1222
1223 .oval-speech-border {
1224 position:relative;
1225 padding:70px 30px;
1226 margin:1em auto 60px;
1227 border:10px solid #f3961c;
1228 text-align:center;
1229 color:#333;
1230 background:#fff;
1231
1232 /* css3 */
1233 /*
1234 NOTES:
1235 -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
1236 -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
1237 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
1238 */
1239 -webkit-border-top-left-radius:240px 140px;
1240 -webkit-border-top-right-radius:240px 140px;
1241 -webkit-border-bottom-right-radius:240px 140px;
1242 -webkit-border-bottom-left-radius:240px 140px;
1243 -moz-border-radius:240px / 140px;
1244 border-radius:240px / 140px;
1245 }
1246
1247 /* creates larger curve */
1248 .oval-speech-border:before {
1249 content:"";
1250 position:absolute;
1251 z-index:2;
1252 bottom:-40px;
1253 right:50%;
1254 width:50px;
1255 height:30px;
1256 border-style:solid;
1257 border-width:0 10px 10px 0;
1258 border-color:#f3961c;
1259 margin-right:-10px;
1260 background:transparent;
1261
1262 /* css3 */
1263 -moz-border-radius-bottomright:80px 50px;
1264 -webkit-border-bottom-right-radius:80px 50px;
1265 border-bottom-right-radius:80px 50px;
1266 }
1267
1268 /* creates smaller curve */
1269 .oval-speech-border:after {
1270 content:"";
1271 position:absolute;
1272 z-index:2;
1273 bottom:-40px;
1274 right:50%;
1275 width:20px;
1276 height:31px;
1277 border-style:solid;
1278 border-width:0 10px 10px 0;
1279 border-color:#f3961c;
1280 margin-right:20px;
1281 background:transparent;
1282
1283 /* css3 */
1284 -moz-border-radius-bottomright:40px 50px;
1285 -webkit-border-bottom-right-radius:40px 50px;
1286 border-bottom-right-radius:40px 50px;
1287 }
1288
1289 /* creates a small circle to produce a rounded point where the two curves meet */
1290 .oval-speech-border>:first-child:before {
1291 content:"";
1292 position:absolute;
1293 z-index:1;
1294 bottom:-40px;
1295 right:50%;
1296 width:10px;
1297 height:10px;
1298 margin-right:45px;
1299 background:#f3961c;
1300
1301 /* css3 */
1302 -moz-border-radius:10px;
1303 -webkit-border-radius:10px;
1304 border-radius:10px;
1305 }
1306
1307 /* creates a white rectangle to cover part of the oval border*/
1308 .oval-speech-border>:first-child:after {
1309 content:"";
1310 position:absolute;
1311 z-index:1;
1312 bottom:-10px;
1313 right:50%;
1314 width:30px;
1315 height:15px;
1316 background:#fff;
1317 }
1318
1319 /* ============================================================================================================================
1320 == OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)
1321 ** ============================================================================================================================ */
1322
1323 .oval-thought-border {
1324 position:relative;
1325 padding:70px 30px;
1326 margin:1em auto 80px;
1327 border:10px solid #c81e2b;
1328 text-align:center;
1329 color:#333;
1330 background:#fff;
1331
1332 /* css3 */
1333 /*
1334 NOTES:
1335 -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
1336 -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
1337 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
1338 */
1339 -webkit-border-top-left-radius:240px 140px;
1340 -webkit-border-top-right-radius:240px 140px;
1341 -webkit-border-bottom-right-radius:240px 140px;
1342 -webkit-border-bottom-left-radius:240px 140px;
1343 -moz-border-radius:240px / 140px;
1344 border-radius:240px / 140px;
1345 }
1346
1347 /* creates the larger circle */
1348 .oval-thought-border:before {
1349 content:"";
1350 position:absolute;
1351 z-index:10;
1352 bottom:-40px;
1353 right:100px;
1354 width:50px;
1355 height:50px;
1356 border:10px solid #c81e2b;
1357 background:#fff;
1358
1359 /* css3 */
1360 -moz-border-radius:50px;
1361 -webkit-border-radius:50px;
1362 border-radius:50px;
1363 }
1364
1365 /* creates the smaller circle */
1366 .oval-thought-border:after {
1367 content:"";
1368 position:absolute;
1369 z-index:10;
1370 bottom:-60px;
1371 right:50px;
1372 width:25px;
1373 height:25px;
1374 border:10px solid #c81e2b;
1375 background:#fff;
1376
1377 /* css3 */
1378 -moz-border-radius:25px;
1379 -webkit-border-radius:25px;
1380 border-radius:25px;
1381 }
1382 </style>
1383 </head>
1384
1385 <body>
1386 <div id="container">
1387 <header>
1388 <hgroup>
1389 <h1>Pure CSS speech bubbles</h1>
1390 <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
1391 </hgroup>
1392
1393
1394 <p>The demo page for <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a>.</p>
1395 <p>For a detailed explanation <a href="default.css">view the CSS file</a>. It is heavily commented.</p>
1396
1397 <p>All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.</p>
1398 </header>
1399
1400 <div class="content">
1401
1402 <h2>The basic bubble variants</h2>
1403 <p class="triangle-isosceles">This only needs one HTML element.</p>
1404 <p class="triangle-isosceles top">For example, <code><p>[text]</p></code>.</p>
1405 <p class="triangle-isosceles left">But it could be any element you want.</p>
1406 <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
1407
1408 <p class="triangle-right">This only needs one HTML element.</p>
1409 <p class="triangle-right top">For example, <code><p>[text]</p></code>.</p>
1410 <p class="triangle-right left">But it could be any element you want.</p>
1411 <p class="triangle-right right">The entire appearance is created only with CSS.</p>
1412 <p class="triangle-obtuse">This only needs one HTML element.</p>
1413
1414 <p class="triangle-obtuse top">For example, <code><p>[text]</p></code>.</p>
1415 <p class="triangle-obtuse left">But it could be any element you want.</p>
1416 <p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>
1417 <p class="triangle-border">This only needs one HTML element.</p>
1418 <p class="triangle-border top">For example, <code><p>[text]</p></code>.</p>
1419
1420 <p class="triangle-border left">But it could be any element you want.</p>
1421 <p class="triangle-border right">The entire appearance is created only with CSS.</p>
1422
1423
1424 <h2>Simple examples</h2>
1425
1426 <h3 class="example-commentheading">125 comments</h3>
1427
1428 <blockquote class="example-right">
1429 <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
1430
1431 </blockquote>
1432 <p>Ivan Chermayeff</p>
1433
1434 <blockquote class="example-obtuse">
1435 <p>It’s not what you look at that matters, it’s what you see.</p>
1436 </blockquote>
1437 <p>Henry David Thoreau</p>
1438
1439
1440 <blockquote class="example-twitter" cite="http://twitter.com/necolas/status/9880187933">
1441 <p>Takes me longer to write up blog posts on experiments or projects than to create them in the first place.</p>
1442 </blockquote>
1443 <p><a href="http://twitter.com/necolas">@necolas</a> at <a href="http://twitter.com/necolas/status/9880187933">4:05 PM March 2nd 2010</a></p>
1444
1445 <div class="example-number">57</div>
1446
1447
1448 <h2>More complex CSS3 examples</h2>
1449 <p>Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.</p>
1450
1451 <div class="pinched">
1452 <p><strong>It doesn’t matter what the first child element of this div is</strong>...but it does need a child element.</p>
1453 </div>
1454
1455 <blockquote class="oval-speech">
1456 <p>This is a blockquote that is styled to look like a speech bubble</p>
1457 </blockquote>
1458
1459 <blockquote class="oval-thought">
1460 <p>This is a blockquote that is styled to look like a thought bubble</p>
1461 </blockquote>
1462
1463 <blockquote class="oval-quotes">
1464
1465 <p>No, Donny, these men are nihilists, there’s nothing to be afraid of.</p>
1466 </blockquote>
1467 <p>Walter Sobchak</p>
1468
1469 <blockquote class="rectangle-speech-border">
1470 <p>This is a blockquote that is styled to look like a speech bubble</p>
1471 </blockquote>
1472
1473 <blockquote class="oval-speech-border">
1474 <p>This is a blockquote that is styled to look like a speech bubble</p>
1475 </blockquote>
1476
1477 <blockquote class="oval-thought-border">
1478 <p>This is a blockquote that is styled to look like a thought bubble</p>
1479 </blockquote>
1480 </div>
1481
1482 <p>Read the article: <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a>.</p>
1483
1484 <p class="follow"><a href="http://twitter.com/necolas">You can find me on <span>twitter</span></a>.</p>
1485
1486 </div>
1487
1488 </body>
1489
1490 </html>
1491