1/* CSS Speech Bubbles 2--------> http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 3*/ 4 5/* ============================================================================================================================ 6== BUBBLE WITH AN ISOCELES TRIANGLE 7** ============================================================================================================================ */ 8 9/* THE SPEECH BUBBLE 10------------------------------------------------------------------------------------------------------------------------------- */ 11 12.triangle-isosceles { 13 position:relative; 14 padding:15px; 15 margin:1em 0 3em; 16 color:#000; 17 background:#56B4AB; /* default background for browsers without gradient support */ 18 19 /* css3 */ 20 -moz-border-radius:10px; 21 -webkit-border-radius:10px; 22 border-radius:10px; 23 border-color: #000000; 24 border-width:0 10px 10px 0; 25 /* NOTE: webkit gradient implementation is not as per spec */ 26 background-color: #F4F2DC; 27} 28 29/* Variant : for top positioned triangle 30------------------------------------------ */ 31 32.triangle-isosceles.top { 33 /* NOTE: webkit gradient implementation is not as per spec */ 34 background:-webkit-gradient(linear, left top, left bottom, from(#f3961c), to(#f9d835)); 35 background:-moz-linear-gradient(top, #FFB8A8, #f9d835); 36 background:-o-linear-gradient(top, #FFB8A8, #f9d835); 37} 38 39/* Variant : for left/right positioned triangle 40------------------------------------------ */ 41 42.triangle-isosceles.left { 43 margin-left:50px; 44 /* NOTE: webkit gradient implementation is not as per spec */ 45 background-color: #F4F2DC; 46} 47 48/* Variant : for right positioned triangle 49------------------------------------------ */ 50 51.triangle-isosceles.right { 52 margin-right:50px; 53 background:#FFB8A8; 54} 55 56/* THE TRIANGLE 57------------------------------------------------------------------------------------------------------------------------------- */ 58 59/* creates triangle */ 60.triangle-isosceles:after { 61 content:""; 62 display:block; /* reduce the damage in FF3.0 */ 63 position:absolute; 64 bottom:-15px; /* value = - border-top-width - border-bottom-width */ 65 left:50px; /* controls horizontal position */ 66 width:0; 67 height:0; 68 border-width:15px 15px 0; /* vary these values to change the angle of the vertex */ 69 border-style:solid; 70 border-color:#FFB8A8 transparent; 71} 72 73/* Variant : top 74------------------------------------------ */ 75 76.triangle-isosceles.top:after { 77 top:-15px; /* value = - border-top-width - border-bottom-width */ 78 right:50px; /* controls horizontal position */ 79 bottom:auto; 80 left:auto; 81 border-width:0 15px 15px; /* vary these values to change the angle of the vertex */ 82 border-color: #FFB8A8 transparent; 83} 84 85/* Variant : left 86------------------------------------------ */ 87 88.triangle-isosceles.left:after { 89 top:16px; /* controls vertical position */ 90 left:-50px; /* value = - border-left-width - border-right-width */ 91 bottom:auto; 92 border-width:10px 50px 10px 0; 93 border-color:transparent #F4F2DC; 94} 95 96/* Variant : right 97------------------------------------------ */ 98 99.triangle-isosceles.right:after { 100 top:16px; /* controls vertical position */ 101 right:-50px; /* value = - border-left-width - border-right-width */ 102 bottom:auto; 103 left:auto; 104 border-width:10px 0 10px 50px; 105 border-color:transparent #ffcc66; 106} 107 108 109 110/* ============================================================================================================================ 111== BUBBLE WITH A RIGHT-ANGLED TRIANGLE 112** ============================================================================================================================ */ 113 114/* THE SPEECH BUBBLE 115------------------------------------------------------------------------------------------------------------------------------- */ 116 117.triangle-right { 118 position:relative; 119 padding:15px; 120 margin:1em 0 3em; 121 color:#fff; 122 background:#075698; /* default background for browsers without gradient support */ 123 124 /* css3 */ 125 -moz-border-radius:10px; 126 -webkit-border-radius:10px; 127 border-radius:0px; 128 /* NOTE: webkit gradient implementation is not as per spec */ 129 background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698)); 130 background:-moz-linear-gradient(top, #2e88c4, #075698); 131 background:-o-linear-gradient(top, #2e88c4, #075698); 132} 133 134/* Variant : for top positioned triangle 135------------------------------------------ */ 136 137.triangle-right.top { 138 /* NOTE: webkit gradient implementation is not as per spec */ 139 background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4)); 140 background:-moz-linear-gradient(top, #075698, #2e88c4); 141 background:-o-linear-gradient(top, #075698, #2e88c4); 142} 143 144/* Variant : for left positioned triangle 145------------------------------------------ */ 146 147.triangle-right.left { 148 margin-left:40px; 149 background:#075698; 150} 151 152/* Variant : for right positioned triangle 153------------------------------------------ */ 154 155.triangle-right.right { 156 margin-right:40px; 157 background:#075698; 158} 159 160/* THE TRIANGLE 161------------------------------------------------------------------------------------------------------------------------------- */ 162 163.triangle-right:after { 164 content:""; 165 display:block; /* reduce the damage in FF3.0 */ 166 position:absolute; 167 bottom:-20px; /* value = - border-top-width - border-bottom-width */ 168 left:50px; /* controls horizontal position */ 169 width:0; 170 height:0; 171 border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ 172 border-style:solid; 173 border-color:#075698 transparent; 174} 175 176/* Variant : top 177------------------------------------------ */ 178 179.triangle-right.top:after { 180 top:-20px; /* value = - border-top-width - border-bottom-width */ 181 right:50px; /* controls horizontal position */ 182 bottom:auto; 183 left:auto; 184 border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */ 185 border-color:transparent #075698; 186} 187 188/* Variant : left 189------------------------------------------ */ 190 191.triangle-right.left:after { 192 top:16px; 193 left:-40px; /* value = - border-left-width - border-right-width */ 194 bottom:auto; 195 border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */ 196 border-color:transparent #075698; 197} 198 199/* Variant : right 200------------------------------------------ */ 201 202.triangle-right.right:after { 203 top:16px; 204 right:-40px; /* value = - border-left-width - border-right-width */ 205 bottom:auto; 206 left:auto; 207 border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */ 208 border-color:transparent #075698 ; 209} 210 211 212/* ============================================================================================================================ 213== BUBBLE WITH AN OBTUSE TRIANGLE 214** ============================================================================================================================ */ 215 216/* THE SPEECH BUBBLE 217------------------------------------------------------------------------------------------------------------------------------- */ 218 219.triangle-obtuse { 220 position:relative; 221 padding:15px; 222 margin:1em 0 3em; 223 color:#fff; 224 background:#c81e2b; 225 226 /* css3 */ 227 -moz-border-radius:10px; 228 -webkit-border-radius:10px; 229 border-radius:10px; 230 /* NOTE: webkit gradient implementation is not as per spec */ 231 background:-webkit-gradient(linear, left top, left bottom, from(#f04349), to(#c81e2b)); 232 background:-moz-linear-gradient(top, #f04349, #c81e2b); 233 background:-o-linear-gradient(top, #f04349, #c81e2b); 234} 235 236/* Variant : for top positioned triangle 237------------------------------------------ */ 238 239.triangle-obtuse.top { 240 /* NOTE: webkit gradient implementation is not as per spec */ 241 background:-webkit-gradient(linear, left top, left bottom, from(#c81e2b), to(#f04349)); 242 background:-moz-linear-gradient(top, #c81e2b, #f04349); 243 background:-o-linear-gradient(top, #c81e2b, #f04349); 244} 245 246/* Variant : for left positioned triangle 247------------------------------------------ */ 248 249.triangle-obtuse.left { 250 margin-left:50px; 251 background:#c81e2b; 252} 253 254/* Variant : for right positioned triangle 255------------------------------------------ */ 256 257.triangle-obtuse.right { 258 margin-right:50px; 259 background:#c81e2b; 260} 261 262/* THE TRIANGLE 263------------------------------------------------------------------------------------------------------------------------------- */ 264 265/* creates the wider right-angled triangle */ 266.triangle-obtuse:before { 267 content:""; 268 display:block; /* reduce the damage in FF3.0 */ 269 position:absolute; 270 bottom:-20px; /* value = - border-top-width - border-bottom-width */ 271 left:60px; /* controls horizontal position */ 272 width:0; 273 height:0; 274 border:0; 275 border-right-width:30px; /* vary this value to change the angle of the vertex */ 276 border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */ 277 border-style:solid; 278 border-color:transparent #c81e2b; 279} 280 281/* creates the narrower right-angled triangle */ 282.triangle-obtuse:after { 283 content:""; 284 display:block; /* reduce the damage in FF3.0 */ 285 position:absolute; 286 bottom:-20px; /* value = - border-top-width - border-bottom-width */ 287 left:80px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-width) */ 288 width:0; 289 height:0; 290 border-width:0; 291 border-right-width:10px; /* vary this value to change the angle of the vertex */ 292 border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */ 293 border-style:solid; 294 border-color:transparent #fff; 295} 296 297/* Variant : top 298------------------------------------------ */ 299 300.triangle-obtuse.top:before { 301 top:-20px; /* value = - border-top-width - border-bottom-width */ 302 right:60px; /* controls horizontal position */ 303 bottom:auto; 304 left:auto; 305 border:0; 306 border-left-width:30px; /* vary this value to change the width of the triangle */ 307 border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */ 308 border-style:solid; 309 border-color:transparent #c81e2b; 310} 311 312.triangle-obtuse.top:after { 313 top:-20px; /* value = - border-top-width - border-bottom-width */ 314 right:80px; /* value = (:before's right) + (:before's border-right/left-width) - (:after's border-right/left-width) */ 315 bottom:auto; 316 left:auto; 317 border-width:0; 318 border-left-width:10px; /* vary this value to change the width of the triangle */ 319 border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */ 320 border-style:solid; 321 border-color:transparent #fff; 322} 323 324/* Variant : left 325------------------------------------------ */ 326 327.triangle-obtuse.left:before { 328 top:15px; /* controls vertical position */ 329 left:-50px; /* value = - border-left-width - border-right-width */ 330 bottom:auto; 331 border:0; 332 border-bottom-width:30px; /* vary this value to change the height of the triangle */ 333 border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */ 334 border-style:solid; 335 border-color:#c81e2b transparent; 336} 337 338.triangle-obtuse.left:after { 339 top:35px; /* value = (:before's top) + (:before's border-top/bottom-width) - (:after's border-top/bottom-width) */ 340 left:-50px; /* value = - border-left-width - border-right-width */ 341 bottom:auto; 342 border:0; 343 border-bottom-width:10px; /* vary this value to change the height of the triangle */ 344 border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */ 345 border-style:solid; 346 border-color:#fff transparent; 347} 348 349/* Variant : right 350------------------------------------------ */ 351 352.triangle-obtuse.right:before { 353 top:15px; /* controls vertical position */ 354 right:-50px; /* value = - border-left-width - border-right-width */ 355 bottom:auto; 356 border:0; 357 left:auto; 358 border-bottom-width:30px; /* vary this value to change the height of the triangle */ 359 border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */ 360 border-style:solid; 361 border-color:#c81e2b transparent; 362} 363 364.triangle-obtuse.right:after { 365 top:35px; /* value = (:before's top) + (:before's border-top/bottom-width) - (:after's border-top/bottom-width) */ 366 right:-50px; /* value = - border-left-width - border-right-width */ 367 bottom:auto; 368 border:0; 369 left:auto; 370 border-bottom-width:10px; /* vary this value to change the height of the triangle */ 371 border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */ 372 border-style:solid; 373 border-color:#fff transparent; 374} 375 376 377 378 379 380 381 382/* ============================================================================================================================ 383== BUBBLE WITH A BORDER AND TRIANGLE 384** ============================================================================================================================ */ 385 386/* THE SPEECH BUBBLE 387------------------------------------------------------------------------------------------------------------------------------- */ 388 389.triangle-border { 390 position:relative; 391 padding:15px; 392 margin:1em 0 3em; 393 border:5px solid #5a8f00; 394 color:#333; 395 background:#fff; 396 397 /* css3 */ 398 -moz-border-radius:10px; 399 -webkit-border-radius:10px; 400 border-radius:10px; 401} 402 403/* Variant : for left positioned triangle 404------------------------------------------ */ 405 406.triangle-border.left { 407 margin-left:30px; 408} 409 410/* Variant : for right positioned triangle 411------------------------------------------ */ 412 413.triangle-border.right { 414 margin-right:30px; 415} 416 417/* THE TRIANGLE 418------------------------------------------------------------------------------------------------------------------------------- */ 419 420 421 422.triangle-border:before { 423 424 content:""; 425 426 display:block; /* reduce the damage in FF3.0 */ 427 428 position:absolute; 429 430 bottom:-40px; /* value = - border-top-width - border-bottom-width */ 431 432 left:40px; /* controls horizontal position */ 433 434 width:0; 435 436 height:0; 437 438 border:20px solid transparent; 439 440 border-top-color:#5a8f00; 441 442} 443 444 445 446/* creates the smaller triangle */ 447 448.triangle-border:after { 449 450 content:""; 451 452 display:block; /* reduce the damage in FF3.0 */ 453 454 position:absolute; 455 456 bottom:-26px; /* value = - border-top-width - border-bottom-width */ 457 458 left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ 459 460 width:0; 461 462 height:0; 463 464 border:13px solid transparent; 465 466 border-top-color:#fff; 467 468} 469 470 471 472/* Variant : top 473 474------------------------------------------ */ 475 476 477 478/* creates the larger triangle */ 479 480.triangle-border.top:before { 481 482 top:-40px; /* value = - border-top-width - border-bottom-width */ 483 484 right:40px; /* controls horizontal position */ 485 486 bottom:auto; 487 488 left:auto; 489 490 border:20px solid transparent; 491 492 border-bottom-color:#5a8f00; 493 494} 495 496 497 498/* creates the smaller triangle */ 499 500.triangle-border.top:after { 501 502 top:-26px; /* value = - border-top-width - border-bottom-width */ 503 504 right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */ 505 506 bottom:auto; 507 508 left:auto; 509 510 border:13px solid transparent; 511 512 border-bottom-color:#fff; 513 514} 515 516 517 518/* Variant : left 519 520------------------------------------------ */ 521 522 523 524/* creates the larger triangle */ 525 526.triangle-border.left:before { 527 528 top:10px; /* controls vertical position */ 529 530 left:-30px; /* value = - border-left-width - border-right-width */ 531 532 bottom:auto; 533 534 border-width:15px 30px 15px 0; 535 536 border-style:solid; 537 538 border-color:transparent #5a8f00; 539 540} 541 542 543 544/* creates the smaller triangle */ 545 546.triangle-border.left:after { 547 548 top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ 549 550 left:-21px; /* value = - border-left-width - border-right-width */ 551 552 bottom:auto; 553 554 border-width:9px 21px 9px 0; 555 556 border-style:solid; 557 558 border-color:transparent #fff; 559 560} 561 562 563 564/* Variant : right 565 566------------------------------------------ */ 567 568 569 570/* creates the larger triangle */ 571 572.triangle-border.right:before { 573 574 top:10px; /* controls vertical position */ 575 576 right:-30px; /* value = - border-left-width - border-right-width */ 577 578 bottom:auto; 579 580 left:auto; 581 582 border-width:15px 0 15px 30px; 583 584 border-style:solid; 585 586 border-color:transparent #5a8f00; 587 588} 589 590 591 592/* creates the smaller triangle */ 593 594.triangle-border.right:after { 595 596 top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ 597 598 right:-21px; /* value = - border-left-width - border-right-width */ 599 600 bottom:auto; 601 602 left:auto; 603 604 border-width:9px 0 9px 21px; 605 606 border-style:solid; 607 608 border-color:transparent #fff; 609 610} 611 612 613 614 615 616 617 618 619 620/* ============================================================================================================================ 621 622== SPEECH BUBBLE ICON 623 624** ============================================================================================================================ */ 625 626 627 628.example-commentheading { 629 630 position:relative; 631 632 padding:0; 633 634 color:#b513af; 635 636} 637 638 639 640/* creates the rectangle */ 641 642.example-commentheading:before { 643 644 content:""; 645 646 display:block; /* reduce the damage in FF3.0 */ 647 648 position:absolute; 649 650 top:9px; 651 652 left:-25px; 653 654 width:15px; 655 656 height:10px; 657 658 background:#b513af; 659 660 661 662 /* css3 */ 663 664 -moz-border-radius:3px; 665 666 -webkit-border-radius:3px; 667 668 border-radius:3px; 669 670} 671 672 673 674/* creates the triangle */ 675 676.example-commentheading:after { 677 678 content:""; 679 680 display:block; /* reduce the damage in FF3.0 */ 681 682 position:absolute; 683 684 top:15px; 685 686 left:-19px; 687 688 width:0; 689 690 height:0; 691 692 border:4px solid transparent; 693 694 border-left-color:#b513af; 695 696} 697 698 699 700 701 702/* ============================================================================================================================ 703 704== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE 705 706** ============================================================================================================================ */ 707 708 709 710.example-right { 711 712 position:relative; 713 714 padding:15px 30px; 715 716 margin:0; 717 718 color:#fff; 719 720 background:#5a8f00; /* default background for browsers without gradient support */ 721 722 723 724 /* css3 */ 725 726 -moz-border-radius:10px; 727 728 -webkit-border-radius:10px; 729 730 border-radius:10px; 731 732 /* NOTE: webkit gradient implementation is not as per spec */ 733 734 background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00)); 735 736 background:-moz-linear-gradient(top, #b8db29, #5a8f00); 737 738 background:-o-linear-gradient(top, #b8db29, #5a8f00); 739 740} 741 742 743 744/* display of quote author (alternatively use a class on the element following the blockquote) */ 745 746.example-right + p {margin:15px 0 2em 85px; font-style:italic;} 747 748 749 750/* creates the triangle */ 751 752.example-right:after { 753 754 content:""; 755 756 display:block; /* reduce the damage in FF3.0 */ 757 758 position:absolute; 759 760 bottom:-50px; 761 762 left:50px; 763 764 width:0; 765 766 height:0; 767 768 border-width:0 20px 50px 0px; 769 770 border-style:solid; 771 772 border-color:transparent #5a8f00; 773 774} 775 776 777 778 779 780/* ============================================================================================================================ 781 782== BLOCKQUOTE WITH OBTUSE TRIANGLE 783 784** ============================================================================================================================ */ 785 786 787 788.example-obtuse { 789 790 position:relative; 791 792 padding:15px 30px; 793 794 margin:0; 795 796 color:#000; 797 798 background:#f3961c; /* default background for browsers without gradient support */ 799 800 801 802 /* css3 803 804 Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 805 806 */ 807 808 -webkit-border-top-left-radius:25px 50px; 809 810 -webkit-border-top-right-radius:25px 50px; 811 812 -webkit-border-bottom-right-radius:25px 50px; 813 814 -webkit-border-bottom-left-radius:25px 50px; 815 816 -moz-border-radius:25px / 50px; 817 818 border-radius:25px / 50px; 819 820 /* NOTE: webkit gradient implementation is not as per spec */ 821 822 background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c)); 823 824 background:-moz-linear-gradient(top, #f9d835, #f3961c); 825 826 background:-o-linear-gradient(top, #f9d835, #f3961c); 827 828} 829 830 831 832/* display of quote author (alternatively use a class on the element following the blockquote) */ 833 834.example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;} 835 836 837 838/* creates the larger triangle */ 839 840.example-obtuse:before { 841 842 content:""; 843 844 display:block; /* reduce the damage in FF3.0 */ 845 846 position:absolute; 847 848 bottom:-30px; 849 850 right:80px; 851 852 width:0; 853 854 height:0; 855 856 border-width:0 0 30px 50px; 857 858 border-style:solid; 859 860 border-color:transparent #f3961c; 861 862} 863 864 865 866/* creates the smaller triangle */ 867 868.example-obtuse:after { 869 870 content:""; 871 872 display:block; /* reduce the damage in FF3.0 */ 873 874 position:absolute; 875 876 bottom:-30px; 877 878 right:110px; 879 880 width:0; 881 882 height:0; 883 884 border-width:0 0 30px 20px; 885 886 border-style:solid; 887 888 border-color:transparent #fff; 889 890} 891 892 893 894 895 896/* ============================================================================================================================ 897 898== TWITTER 899 900** ============================================================================================================================ */ 901 902 903 904.example-twitter { 905 906 position:relative; 907 908 padding:15px; 909 910 margin:100px 0 0.5em; 911 912 color:#333; 913 914 background:#eee; 915 916 917 918 /* css3 */ 919 920 -moz-border-radius:10px; 921 922 -webkit-border-radius:10px; 923 924 border-radius:10px; 925 926} 927 928 929 930.example-twitter p {font-size:28px; line-height:1.25em;} 931 932 933 934/* this isn't necessary, just saves me having to edit the HTML of the demo */ 935 936.example-twitter:before { 937 938 content:url(twitter-logo.gif); 939 940 display:block; /* reduce the damage in FF3.0 */ 941 942 position:absolute; 943 944 top:-60px; 945 946 left:0; 947 948 width:155px; 949 950 height:36px; 951 952} 953 954 955 956/* creates the triangle */ 957 958.example-twitter:after { 959 960 content:""; 961 962 display:block; /* reduce the damage in FF3.0 */ 963 964 position:absolute; 965 966 top:-30px; 967 968 left:50px; 969 970 width:0; 971 972 height:0; 973 974 border:15px solid transparent; 975 976 border-bottom-color:#eee; 977 978} 979 980 981 982/* display of quote author (alternatively use a class on the element following the blockquote) */ 983 984.example-twitter + p {padding-left:15px; font:14px Arial, sans-serif;} 985 986 987 988 989 990/* ============================================================================================================================ 991 992== NUMBER 993 994** ============================================================================================================================ */ 995 996 997 998.example-number { 999 1000 position:relative; 1001 1002 width:200px; 1003 1004 height:200px; 1005 1006 margin:50px 0 200px; 1007 1008 text-align:center; 1009 1010 font:140px/200px Arial, sans-serif; 1011 1012 color:#fff; 1013 1014 background:#C91F2C; 1015 1016} 1017 1018 1019 1020/* creates the larger triangle */ 1021 1022.example-number:before { 1023 1024 content:""; 1025 1026 display:block; /* reduce the damage in FF3.0 */ 1027 1028 position:absolute; 1029 1030 bottom:-140px; 1031 1032 right:0; 1033 1034 width:0; 1035 1036 height:0; 1037 1038 border-width:0 0 140px 140px; 1039 1040 border-style:solid; 1041 1042 border-color:transparent #C91F2C; 1043 1044} 1045 1046 1047 1048/* creates the larger triangle */ 1049 1050.example-number:after { 1051 1052 content:""; 1053 1054 display:block; /* reduce the damage in FF3.0 */ 1055 1056 position:absolute; 1057 1058 bottom:-140px; 1059 1060 right:85px; 1061 1062 width:0; 1063 1064 height:0; 1065 1066 border-width:0 0 140px 55px; 1067 1068 border-style:solid; 1069 1070 border-color:transparent #fff; 1071 1072} 1073 1074 1075 1076 1077 1078/* ============================================================================================================================ 1079 1080== PINCHED SPEECH BUBBLE (more CSS3) 1081 1082** ============================================================================================================================ */ 1083 1084 1085 1086.pinched { 1087 1088 position:relative; 1089 1090 padding:15px; 1091 1092 margin:50px 0 3em; 1093 1094 text-align:center; 1095 1096 color:#fff; 1097 1098 background:#333; 1099 1100 1101 1102 /* css3 */ 1103 1104 -moz-border-radius:10px; 1105 1106 -webkit-border-radius:10px; 1107 1108 border-radius:10px; 1109 1110} 1111 1112 1113 1114/* creates a rectangle of the colour wanted for the pointy bit */ 1115 1116.pinched:before { 1117 1118 content:""; 1119 1120 position:absolute; 1121 1122 top:-20px; 1123 1124 left:50%; 1125 1126 width:100px; 1127 1128 height:20px; 1129 1130 margin:0 0 0 -50px; 1131 1132 background:#333; 1133 1134} 1135 1136 1137 1138/* creates a rounded rectangle to cover part of the rectangle generated above */ 1139 1140.pinched:after { 1141 1142 content:""; 1143 1144 position:absolute; 1145 1146 top:-20px; 1147 1148 left:0; 1149 1150 width:50%; 1151 1152 height:20px; 1153 1154 background:#fff; 1155 1156 1157 1158 /* css3 */ 1159 1160 -moz-border-radius-bottomright:15px; 1161 1162 -webkit-border-bottom-right-radius:15px; 1163 1164 border-bottom-right-radius:15px; 1165 1166} 1167 1168 1169 1170/* creates the other rounded rectangle */ 1171 1172.pinched>:first-child:before { 1173 1174 content:""; 1175 1176 position:absolute; 1177 1178 top:-20px; 1179 1180 right:0; 1181 1182 width:50%; 1183 1184 height:20px; 1185 1186 background:#fff; 1187 1188 1189 1190 /* css3 */ 1191 1192 -moz-border-radius-bottomleft:15px; 1193 1194 -webkit-border-bottom-left-radius:15px; 1195 1196 border-bottom-left-radius:15px; 1197 1198} 1199 1200 1201 1202 1203 1204/* ============================================================================================================================ 1205 1206== OVAL SPEECH BUBBLE (more CSS3) 1207 1208** ============================================================================================================================ */ 1209 1210 1211 1212.oval-speech { 1213 1214 position:relative; 1215 1216 width:270px; 1217 1218 padding:50px 40px; 1219 1220 margin:1em auto 50px; 1221 1222 text-align:center; 1223 1224 color:#fff; 1225 1226 background:#5a8f00; 1227 1228 1229 1230 /* css3 */ 1231 1232 /* 1233 1234 NOTES: 1235 1236 -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4 1237 1238 -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4 1239 1240 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this 1241 1242 */ 1243 1244 -webkit-border-top-left-radius:220px 120px; 1245 1246 -webkit-border-top-right-radius:220px 120px; 1247 1248 -webkit-border-bottom-right-radius:220px 120px; 1249 1250 -webkit-border-bottom-left-radius:220px 120px; 1251 1252 -moz-border-radius:220px / 120px; 1253 1254 border-radius:220px / 120px; 1255 1256 /* NOTE: webkit gradient implementation is not as per spec */ 1257 1258 background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00)); 1259 1260 background:-moz-linear-gradient(top, #b8db29, #5a8f00); 1261 1262 background:-o-linear-gradient(top, #b8db29, #5a8f00); 1263 1264} 1265 1266 1267 1268.oval-speech p {font-size:1.25em;} 1269 1270 1271 1272/* creates part of the curve */ 1273 1274.oval-speech:before { 1275 1276 content:""; 1277 1278 position:absolute; 1279 1280 z-index:-1; 1281 1282 bottom:-30px; 1283 1284 right:50%; 1285 1286 width:0; 1287 1288 height:30px; 1289 1290 border-right:60px solid #5a8f00; 1291 1292 background:#5a8f00; /* need this for webkit - bug in handling of border-radius */ 1293 1294 1295 1296 /* css3 */ 1297 1298 -moz-border-radius-bottomright:80px 50px; 1299 1300 -webkit-border-bottom-right-radius:80px 50px; 1301 1302 border-bottom-right-radius:80px 50px; 1303 1304 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */ 1305 1306 -moz-transform:translate(0, -2px); 1307 1308 -webkit-transform:translate(0, -2px); 1309 1310 -o-transform:translate(0, -2px); 1311 1312 transform:translate(0, -2px); 1313 1314} 1315 1316 1317 1318/* creates part of the curved pointy bit */ 1319 1320.oval-speech:after { 1321 1322 content:""; 1323 1324 position:absolute; 1325 1326 z-index:-1; 1327 1328 bottom:-30px; 1329 1330 right:50%; 1331 1332 width:60px; 1333 1334 height:30px; 1335 1336 background:#fff; 1337 1338 1339 1340 /* css3 */ 1341 1342 -moz-border-radius-bottomright:40px 50px; 1343 1344 -webkit-border-bottom-right-radius:40px 50px; 1345 1346 border-bottom-right-radius:40px 50px; 1347 1348 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */ 1349 1350 -moz-transform:translate(-30px, -2px); 1351 1352 -webkit-transform:translate(-30px, -2px); 1353 1354 -o-transform:translate(-30px, -2px); 1355 1356 transform:translate(-30px, -2px); 1357 1358} 1359 1360 1361 1362 1363 1364/* ============================================================================================================================ 1365 1366== OVAL THOUGHT BUBBLE (more CSS3) 1367 1368** ============================================================================================================================ */ 1369 1370 1371 1372.oval-thought { 1373 1374 position:relative; 1375 1376 width:270px; 1377 1378 padding:50px 40px; 1379 1380 margin:1em auto 80px; 1381 1382 text-align:center; 1383 1384 color:#fff; 1385 1386 background:#075698; 1387 1388 1389 1390 /* css3 */ 1391 1392 /* 1393 1394 NOTES: 1395 1396 -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4 1397 1398 -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4 1399 1400 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this 1401 1402 */ 1403 1404 -webkit-border-top-left-radius:220px 120px; 1405 1406 -webkit-border-top-right-radius:220px 120px; 1407 1408 -webkit-border-bottom-right-radius:220px 120px; 1409 1410 -webkit-border-bottom-left-radius:220px 120px; 1411 1412 -moz-border-radius:220px / 120px; 1413 1414 border-radius:220px / 120px; 1415 1416 /* NOTE: webkit gradient implementation is not as per spec */ 1417 1418 background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698)); 1419 1420 background:-moz-linear-gradient(top, #2e88c4, #075698); 1421 1422 background:-o-linear-gradient(top, #2e88c4, #075698); 1423 1424} 1425 1426 1427 1428.oval-thought p {font-size:1.25em;} 1429 1430 1431 1432/* creates the larger circle */ 1433 1434.oval-thought:before { 1435 1436 content:""; 1437 1438 position:absolute; 1439 1440 bottom:-20px; 1441 1442 left:50px; 1443 1444 width:30px; 1445 1446 height:30px; 1447 1448 background:#075698; 1449 1450 1451 1452 /* css3 */ 1453 1454 -moz-border-radius:30px; 1455 1456 -webkit-border-radius:30px; 1457 1458 border-radius:30px; 1459 1460} 1461 1462 1463 1464/* creates the smaller circle */ 1465 1466.oval-thought:after { 1467 1468 content:""; 1469 1470 position:absolute; 1471 1472 bottom:-30px; 1473 1474 left:30px; 1475 1476 width:15px; 1477 1478 height:15px; 1479 1480 background:#075698; 1481 1482 1483 1484 /* css3 */ 1485 1486 -moz-border-radius:15px; 1487 1488 -webkit-border-radius:15px; 1489 1490 border-radius:15px; 1491 1492} 1493 1494 1495 1496/* ============================================================================================================================ 1497 1498== OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3) 1499 1500** ============================================================================================================================ */ 1501 1502 1503 1504.oval-quotes { 1505 1506 position:relative; 1507 1508 width:400px; 1509 1510 height:350px; 1511 1512 margin:2em auto 10px; 1513 1514 color:#000; 1515 1516 background:#ffed26; 1517 1518 1519 1520 /* css3 */ 1521 1522 /* 1523 1524 NOTES: 1525 1526 -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4 1527 1528 -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4 1529 1530 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this 1531 1532 */ 1533 1534 -webkit-border-top-left-radius:400px 350px; 1535 1536 -webkit-border-top-right-radius:400px 350px; 1537 1538 -webkit-border-bottom-right-radius:400px 350px; 1539 1540 -webkit-border-bottom-left-radius:400px 350px; 1541 1542 -moz-border-radius:400px / 350px; 1543 1544 border-radius:400px / 350px; 1545 1546} 1547 1548 1549 1550/* creates opening quotation mark */ 1551 1552.oval-quotes:before { 1553 1554 content:"\201C"; 1555 1556 position:absolute; 1557 1558 z-index:1; 1559 1560 top:20px; 1561 1562 left:20px; 1563 1564 font:80px/1 Georgia; 1565 1566 color:#ffed26; 1567 1568} 1569 1570 1571 1572/* creates closing quotation mark */ 1573 1574.oval-quotes:after { 1575 1576 content:"\201D"; 1577 1578 position:absolute; 1579 1580 z-index:1; 1581 1582 bottom:0; 1583 1584 right:20px; 1585 1586 font:80px/0.25 Georgia; 1587 1588 color:#ffed26; 1589 1590} 1591 1592 1593 1594.oval-quotes p { 1595 1596 width:250px; 1597 1598 height:250px; 1599 1600 padding:50px 0 0; 1601 1602 margin:0 auto; 1603 1604 text-align:center; 1605 1606 font-size:35px; 1607 1608} 1609 1610 1611 1612/* creates larger curve */ 1613 1614.oval-quotes p:before { 1615 1616 content:""; 1617 1618 position:absolute; 1619 1620 z-index:-1; 1621 1622 bottom:-30px; 1623 1624 right:25%; 1625 1626 width:0; 1627 1628 height:80px; 1629 1630 border-right:200px solid #ffed26; 1631 1632 background:#ffed26; /* need this for webkit - bug in handling of border-radius */ 1633 1634 1635 1636 /* css3 */ 1637 1638 -moz-border-radius-bottomright:200px 100px; 1639 1640 -webkit-border-bottom-right-radius:200px 100px; 1641 1642 border-bottom-right-radius:200px 100px; 1643 1644 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */ 1645 1646 -moz-transform:translate(0, -2px); 1647 1648 -webkit-transform:translate(0, -2px); 1649 1650 -o-transform:translate(0, -2px); 1651 1652 transform:translate(0, -2px); 1653 1654} 1655 1656 1657 1658/* creates smaller curve */ 1659 1660.oval-quotes p:after { 1661 1662 content:""; 1663 1664 position:absolute; 1665 1666 z-index:-1; 1667 1668 bottom:-30px; 1669 1670 right:55%; 1671 1672 width:180px; /* wider than necessary to make it look a bit better in IE8 */ 1673 1674 height:60px; 1675 1676 background:#fff; /* need this for webkit - bug in handling of border-radius */ 1677 1678 1679 1680 /* css3 */ 1681 1682 -moz-border-radius-bottomright:40px 50px; 1683 1684 -webkit-border-bottom-right-radius:40px 50px; 1685 1686 border-bottom-right-radius:40px 50px; 1687 1688 /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */ 1689 1690 -moz-transform:translate(-30px, -2px); 1691 1692 -webkit-transform:translate(-30px, -2px); 1693 1694 -o-transform:translate(-30px, -2px); 1695 1696 transform:translate(-30px, -2px); 1697 1698} 1699 1700 1701 1702.oval-quotes + p { 1703 1704 position:relative; /* part of the IE8 width compromise */ 1705 1706 width:150px; 1707 1708 margin:0 0 2em; 1709 1710 font-size:18px; 1711 1712 font-weight:bold; 1713 1714} 1715 1716 1717 1718 1719 1720/* ============================================================================================================================ 1721 1722== RECTANGLE-BORDER STYLE WITH CURVE 1723 1724** ============================================================================================================================ */ 1725 1726 1727 1728.rectangle-speech-border { 1729 1730 position:relative; 1731 1732 padding:50px 15px; 1733 1734 margin:1em 0 3em; 1735 1736 border:10px solid #5a8f00; 1737 1738 text-align:center; 1739 1740 color:#333; 1741 1742 background:#fff; 1743 1744 1745 1746 /* css3 */ 1747 1748 -moz-border-radius:20px; 1749 1750 -webkit-border-radius:20px; 1751 1752 border-radius:20px; 1753 1754} 1755 1756 1757 1758/* creates larger curve */ 1759 1760.rectangle-speech-border:before { 1761 1762 content:""; 1763 1764 position:absolute; 1765 1766 z-index:10; 1767 1768 bottom:-40px; 1769 1770 left:50px; 1771 1772 width:50px; 1773 1774 height:30px; 1775 1776 border-style:solid; 1777 1778 border-width:0 10px 10px 0; 1779 1780 border-color:#5a8f00; 1781 1782 background:transparent; 1783 1784 1785 1786 /* css3 */ 1787 1788 -moz-border-radius-bottomright:80px 50px; 1789 1790 -webkit-border-bottom-right-radius:80px 50px; 1791 1792 border-bottom-right-radius:80px 50px; 1793 1794} 1795 1796 1797 1798/* creates smaller curve */ 1799 1800.rectangle-speech-border:after { 1801 1802 content:""; 1803 1804 position:absolute; 1805 1806 z-index:10; 1807 1808 bottom:-40px; 1809 1810 left:50px; 1811 1812 width:20px; 1813 1814 height:30px; 1815 1816 border-style:solid; 1817 1818 border-width:0 10px 10px 0; 1819 1820 border-color:#5a8f00; 1821 1822 background:transparent; 1823 1824 1825 1826 /* css3 */ 1827 1828 -moz-border-radius-bottomright:40px 50px; 1829 1830 -webkit-border-bottom-right-radius:40px 50px; 1831 1832 border-bottom-right-radius:40px 50px; 1833 1834} 1835 1836 1837 1838/* creates a small circle to produce a rounded point where the two curves meet */ 1839 1840.rectangle-speech-border>:first-child:before { 1841 1842 content:""; 1843 1844 position:absolute; 1845 1846 bottom:-40px; 1847 1848 left:45px; 1849 1850 width:10px; 1851 1852 height:10px; 1853 1854 background:#5a8f00; 1855 1856 1857 1858 /* css3 */ 1859 1860 -moz-border-radius:10px; 1861 1862 -webkit-border-radius:10px; 1863 1864 border-radius:10px; 1865 1866} 1867 1868 1869 1870/* creates a white rectangle to cover part of the oval border*/ 1871 1872.rectangle-speech-border>:first-child:after { 1873 1874 content:""; 1875 1876 position:absolute; 1877 1878 bottom:-10px; 1879 1880 left:76px; 1881 1882 width:24px; 1883 1884 height:15px; 1885 1886 background:#fff; 1887 1888} 1889 1890 1891 1892/* ============================================================================================================================ 1893 1894== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3) 1895 1896** ============================================================================================================================ */ 1897 1898 1899 1900.oval-speech-border { 1901 1902 position:relative; 1903 1904 padding:70px 30px; 1905 1906 margin:1em auto 60px; 1907 1908 border:10px solid #f3961c; 1909 1910 text-align:center; 1911 1912 color:#333; 1913 1914 background:#fff; 1915 1916 1917 1918 /* css3 */ 1919 1920 /* 1921 1922 NOTES: 1923 1924 -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4 1925 1926 -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4 1927 1928 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this 1929 1930 */ 1931 1932 -webkit-border-top-left-radius:240px 140px; 1933 1934 -webkit-border-top-right-radius:240px 140px; 1935 1936 -webkit-border-bottom-right-radius:240px 140px; 1937 1938 -webkit-border-bottom-left-radius:240px 140px; 1939 1940 -moz-border-radius:240px / 140px; 1941 1942 border-radius:240px / 140px; 1943 1944} 1945 1946 1947 1948/* creates larger curve */ 1949 1950.oval-speech-border:before { 1951 1952 content:""; 1953 1954 position:absolute; 1955 1956 z-index:2; 1957 1958 bottom:-40px; 1959 1960 right:50%; 1961 1962 width:50px; 1963 1964 height:30px; 1965 1966 border-style:solid; 1967 1968 border-width:0 10px 10px 0; 1969 1970 border-color:#f3961c; 1971 1972 margin-right:-10px; 1973 1974 background:transparent; 1975 1976 1977 1978 /* css3 */ 1979 1980 -moz-border-radius-bottomright:80px 50px; 1981 1982 -webkit-border-bottom-right-radius:80px 50px; 1983 1984 border-bottom-right-radius:80px 50px; 1985 1986} 1987 1988 1989 1990/* creates smaller curve */ 1991 1992.oval-speech-border:after { 1993 1994 content:""; 1995 1996 position:absolute; 1997 1998 z-index:2; 1999 2000 bottom:-40px; 2001 2002 right:50%; 2003 2004 width:20px; 2005 2006 height:31px; 2007 2008 border-style:solid; 2009 2010 border-width:0 10px 10px 0; 2011 2012 border-color:#f3961c; 2013 2014 margin-right:20px; 2015 2016 background:transparent; 2017 2018 2019 2020 /* css3 */ 2021 2022 -moz-border-radius-bottomright:40px 50px; 2023 2024 -webkit-border-bottom-right-radius:40px 50px; 2025 2026 border-bottom-right-radius:40px 50px; 2027 2028} 2029 2030 2031 2032/* creates a small circle to produce a rounded point where the two curves meet */ 2033 2034.oval-speech-border>:first-child:before { 2035 2036 content:""; 2037 2038 position:absolute; 2039 2040 z-index:1; 2041 2042 bottom:-40px; 2043 2044 right:50%; 2045 2046 width:10px; 2047 2048 height:10px; 2049 2050 margin-right:45px; 2051 2052 background:#f3961c; 2053 2054 2055 2056 /* css3 */ 2057 2058 -moz-border-radius:10px; 2059 2060 -webkit-border-radius:10px; 2061 2062 border-radius:10px; 2063 2064} 2065 2066 2067 2068/* creates a white rectangle to cover part of the oval border*/ 2069 2070.oval-speech-border>:first-child:after { 2071 2072 content:""; 2073 2074 position:absolute; 2075 2076 z-index:1; 2077 2078 bottom:-10px; 2079 2080 right:50%; 2081 2082 width:30px; 2083 2084 height:15px; 2085 2086 background:#fff; 2087 2088} 2089 2090 2091 2092/* ============================================================================================================================ 2093 2094== OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3) 2095 2096** ============================================================================================================================ */ 2097 2098 2099 2100.oval-thought-border { 2101 2102 position:relative; 2103 2104 padding:70px 30px; 2105 2106 margin:1em auto 80px; 2107 2108 border:10px solid #c81e2b; 2109 2110 text-align:center; 2111 2112 color:#333; 2113 2114 background:#fff; 2115 2116 2117 2118 /* css3 */ 2119 2120 /* 2121 2122 NOTES: 2123 2124 -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4 2125 2126 -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4 2127 2128 Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this 2129 2130 */ 2131 2132 -webkit-border-top-left-radius:240px 140px; 2133 2134 -webkit-border-top-right-radius:240px 140px; 2135 2136 -webkit-border-bottom-right-radius:240px 140px; 2137 2138 -webkit-border-bottom-left-radius:240px 140px; 2139 2140 -moz-border-radius:240px / 140px; 2141 2142 border-radius:240px / 140px; 2143 2144} 2145 2146 2147 2148/* creates the larger circle */ 2149 2150.oval-thought-border:before { 2151 2152 content:""; 2153 2154 position:absolute; 2155 2156 z-index:10; 2157 2158 bottom:-40px; 2159 2160 right:100px; 2161 2162 width:50px; 2163 2164 height:50px; 2165 2166 border:10px solid #c81e2b; 2167 2168 background:#fff; 2169 2170 2171 2172 /* css3 */ 2173 2174 -moz-border-radius:50px; 2175 2176 -webkit-border-radius:50px; 2177 2178 border-radius:50px; 2179 2180} 2181 2182 2183 2184/* creates the smaller circle */ 2185 2186.oval-thought-border:after { 2187 2188 content:""; 2189 2190 position:absolute; 2191 2192 z-index:10; 2193 2194 bottom:-60px; 2195 2196 right:50px; 2197 2198 width:25px; 2199 2200 height:25px; 2201 2202 border:10px solid #c81e2b; 2203 2204 background:#fff; 2205 2206 2207 2208 /* css3 */ 2209 2210 -moz-border-radius:25px; 2211 2212 -webkit-border-radius:25px; 2213 2214 border-radius:25px; 2215 2216}
