源于生活

标题: CSS3圆角气泡框，评论对话框 [打印本页]
作者: kevin-ying    时间: 2014-2-19 02:49
标题: CSS3圆角气泡框，评论对话框
  1. <title>CSS3圆角气泡框，评论对话框</title>
  2. <style>
  3. body {
  4.     padding:0;
  5.     margin:0;
  6.     font:1em/1.4 Cambria, Georgia, sans-serif;
  7.     color:#333;
  8.     background:#fff;
  9. }
  10. a:link,
  11. a:visited {
  12.     border-bottom:1px solid #c55500;
  13.     text-decoration:none;
  14.     color:#c55500;
  15. }
  16. a:visited {
  17.     border-bottom:1px solid #730800;
  18.     color:#730800;
  19. }
  20. a:hover,
  21. a:focus,
  22. a:active {
  23.     border:0;
  24.     color:#fff;
  25.     background:#c55500;
  26. }
  27. a:visited:hover,
  28. a:visited:focus,
  29. a:visited:active {
  30.     color:#fff;
  31.     background:#730800;
  32. }
  33. #container {
  34.     width:500px;
  35.     padding:0 0 50px;
  36.     margin:0 auto;
  37. }
  38. h1 {
  39.     margin:1em 0 0;
  40.     font-size:2.5em;
  41.     font-weight:normal;
  42.     line-height:1.2;
  43.     text-align:center;
  44. }
  45. h2 {
  46.     margin:0.5em 0 1.5em;
  47.     font-size:1.25em;
  48.     font-weight:normal;
  49.     font-style:italic;
  50.     text-align:center;
  51. }
  52. p {
  53.     margin:1em 0;
  54. }
  55. .content h2 {
  56.     margin:2em 0 0.75em;
  57.     font-size:2em;
  58.     font-weight:bold;
  59.     font-style:normal;
  60.     text-align:left;
  61. }
  62. blockquote {
  63.     margin:1em 0;
  64. }
  65. blockquote p {
  66.     margin:0;
  67.     font-size:2em;
  68. }
  69. .follow {
  70.     clear:both;
  71.     margin-top:2em;
  72.     font-size:1.125em;
  73. }
  74. .follow span {
  75.     font-weight:bold;
  76. }
  77. .content {
  78.     position:relative;
  79.     z-index:1;
  80. }
  81. .triangle-isosceles {
  82.         position:relative;
  83.         padding:15px;
  84.         margin:1em 0 3em;
  85.         color:#000;
  86.         background:#f3961c; /* default background for browsers without gradient support */
  87.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  88.         background:-moz-linear-gradient(#f9d835, #f3961c);
  89.         background:-o-linear-gradient(#f9d835, #f3961c);
  90.         background:linear-gradient(#f9d835, #f3961c);
  91.         -webkit-border-radius:10px;
  92.         -moz-border-radius:10px;
  93.         border-radius:10px;
  94. }
  95. .triangle-isosceles.top {
  96.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
  97.         background:-moz-linear-gradient(#f3961c, #f9d835);
  98.         background:-o-linear-gradient(#f3961c, #f9d835);
  99.         background:linear-gradient(#f3961c, #f9d835);
  100. }
  101. .triangle-isosceles.left {
  102.         margin-left:50px;
  103.         background:#f3961c;
  104. }
  105. .triangle-isosceles.right {
  106.         margin-right:50px;
  107.         background:#f3961c;
  108. }
  109. .triangle-isosceles:after {
  110.         content:"";
  111.         position:absolute;
  112.         bottom:-15px;
  113.         left:50px;
  114.         border-width:15px 15px 0;
  115.         border-style:solid;
  116.         border-color:#f3961c transparent;
  117.     display:block;
  118.     width:0;
  119. }
  120. .triangle-isosceles.top:after {
  121.         top:-15px;
  122.         right:50px;
  123.         bottom:auto;
  124.         left:auto;
  125.         border-width:0 15px 15px;
  126.         border-color:#f3961c transparent;
  127. }
  128. .triangle-isosceles.left:after {
  129.         top:16px;
  130.         left:-50px;
  131.         bottom:auto;
  132.         border-width:10px 50px 10px 0;
  133.         border-color:transparent #f3961c;
  134. }
  135. .triangle-isosceles.right:after {
  136.         top:16px; /* controls vertical position */
  137.         right:-50px;
  138.         bottom:auto;
  139.     left:auto;
  140.         border-width:10px 0 10px 50px;
  141.         border-color:transparent #f3961c;
  142. }
  143. .triangle-right {
  144.         position:relative;
  145.         padding:15px;
  146.         margin:1em 0 3em;
  147.         color:#fff;
  148.         background:#075698;
  149.         /* css3 */
  150.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  151.         background:-moz-linear-gradient(#2e88c4, #075698);
  152.         background:-o-linear-gradient(#2e88c4, #075698);
  153.         background:linear-gradient(#2e88c4, #075698);
  154.         -webkit-border-radius:10px;
  155.         -moz-border-radius:10px;
  156.         border-radius:10px;
  157. }
  158. .triangle-right.top {
  159.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
  160.         background:-moz-linear-gradient(#075698, #2e88c4);
  161.         background:-o-linear-gradient(#075698, #2e88c4);
  162.         background:linear-gradient(#075698, #2e88c4);
  163. }
  164. .triangle-right.left {
  165.         margin-left:40px;
  166.         background:#075698;
  167. }
  168. .triangle-right.right {
  169.         margin-right:40px;
  170.         background:#075698;
  171. }
  172. .triangle-right:after {
  173.         content:"";
  174.         position:absolute;
  175.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
  176.         left:50px; /* controls horizontal position */
  177.         border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  178.         border-style:solid;
  179.         border-color:#075698 transparent;
  180.     display:block;
  181.     width:0;
  182. }
  183. .triangle-right.top:after {
  184.         top:-20px; /* value = - border-top-width - border-bottom-width */
  185.         right:50px; /* controls horizontal position */
  186.         bottom:auto;
  187.         left:auto;
  188.         border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
  189.         border-color:transparent #075698;
  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. .triangle-right.right:after {
  199.         top:16px;
  200.         right:-40px; /* value = - border-left-width - border-right-width */
  201.         bottom:auto;
  202.     left:auto;
  203.         border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
  204.         border-color:transparent #075698 ;
  205. }
  206. .triangle-obtuse {
  207.         position:relative;
  208.         padding:15px;
  209.         margin:1em 0 3em;
  210.         color:#fff;
  211.         background:#c81e2b;
  212.         /* css3 */
  213.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
  214.         background:-moz-linear-gradient(#f04349, #c81e2b);
  215.         background:-o-linear-gradient(#f04349, #c81e2b);
  216.         background:linear-gradient(#f04349, #c81e2b);
  217.         -webkit-border-radius:10px;
  218.         -moz-border-radius:10px;
  219.         border-radius:10px;
  220. }
  221. .triangle-obtuse.top {
  222.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#c81e2b), to(#f04349));
  223.         background:-moz-linear-gradient(#c81e2b, #f04349);
  224.         background:-o-linear-gradient(#c81e2b, #f04349);
  225.         background:linear-gradient(#c81e2b, #f04349);
  226. }
  227. .triangle-obtuse.left {
  228.         margin-left:50px;
  229.         background:#c81e2b;
  230. }
  231. .triangle-obtuse.right {
  232.         margin-right:50px;
  233.         background:#c81e2b;
  234. }
  235. .triangle-obtuse:before {
  236.         content:"";
  237.         position:absolute;
  238.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
  239.         left:60px; /* controls horizontal position */
  240.         border:0;
  241.         border-right-width:30px; /* vary this value to change the angle of the vertex */
  242.         border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
  243.         border-style:solid;
  244.         border-color:transparent #c81e2b;
  245.     /* reduce the damage in FF3.0 */
  246.     display:block;
  247.     width:0;
  248. }
  249. .triangle-obtuse:after {
  250.         content:"";
  251.         position:absolute;
  252.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
  253.         left:80px; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
  254.         border:0;
  255.         border-right-width:10px; /* vary this value to change the angle of the vertex */
  256.         border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
  257.         border-style:solid;
  258.         border-color:transparent #fff;
  259.     /* reduce the damage in FF3.0 */
  260.     display:block;
  261.     width:0;
  262. }
  263. .triangle-obtuse.top:before {
  264.         top:-20px; /* value = - border-top-width - border-bottom-width */
  265.         bottom:auto;
  266.         left:auto;
  267.         right:60px; /* controls horizontal position */
  268.         border:0;
  269.         border-left-width:30px; /* vary this value to change the width of the triangle */
  270.         border-top-width:20px;
  271.         border-color:transparent #c81e2b;
  272. }
  273. .triangle-obtuse.top:after {
  274.         top:-20px; /* value = - border-top-width - border-bottom-width */
  275.         bottom:auto;
  276.         left:auto;
  277.         right:80px; /* value = (:before's right) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
  278.         border-width:0;
  279.         border-left-width:10px;
  280.         border-top-width:20px;
  281.         border-color:transparent #fff;
  282. }
  283. .triangle-obtuse.left:before {
  284.         top:15px; /* controls vertical position */
  285.         bottom:auto;
  286.         left:-50px;
  287.         border:0;
  288.         border-bottom-width:30px;
  289.         border-left-width:50px;
  290.         border-color:#c81e2b transparent;
  291. }
  292. .triangle-obtuse.left:after {
  293.         top:35px;
  294.         bottom:auto;
  295.         left:-50px;
  296.         border:0;
  297.         border-bottom-width:10px;
  298.         border-left-width:50px;
  299.         border-color:#fff transparent;
  300. }
  301. .triangle-obtuse.right:before {
  302.         top:15px;
  303.         bottom:auto;
  304.     left:auto;
  305.         right:-50px;
  306.         border:0;
  307.         border-bottom-width:30px; /* vary this value to change the height of the triangle */
  308.         border-right-width:50px;
  309.         border-color:#c81e2b transparent;
  310. }
  311. .triangle-obtuse.right:after {
  312.         top:35px;
  313.         bottom:auto;
  314.         right:-50px; /* value = - border-left-width - border-right-width */
  315.     left:auto;
  316.         border:0;
  317.         border-bottom-width:10px; /* vary this value to change the height of the triangle */
  318.         border-right-width:50px;
  319.         border-color:#fff transparent;
  320. }
  321. .triangle-border {
  322.         position:relative;
  323.         padding:15px;
  324.         margin:1em 0 3em;
  325.         border:5px solid #5a8f00;
  326.         color:#333;
  327.         background:#fff;
  328.         /* css3 */
  329.         -webkit-border-radius:10px;
  330.         -moz-border-radius:10px;
  331.         border-radius:10px;
  332. }
  333. .triangle-border.left {
  334.         margin-left:30px;
  335. }
  336. .triangle-border.right {
  337.         margin-right:30px;
  338. }
  339. .triangle-border:before {
  340.         content:"";
  341.         position:absolute;
  342.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
  343.         left:40px; /* controls horizontal position */
  344.     border-width:20px 20px 0;
  345.         border-style:solid;
  346.     border-color:#5a8f00 transparent;
  347.     display:block;
  348.     width:0;
  349. }
  350. /* creates the smaller  triangle */
  351. .triangle-border:after {
  352.         content:"";
  353.         position:absolute;
  354.         bottom:-13px; /* value = - border-top-width - border-bottom-width */
  355.         left:47px;
  356.         border-width:13px 13px 0;
  357.         border-style:solid;
  358.         border-color:#fff transparent;
  359.     display:block;
  360.     width:0;
  361. }
  362. .triangle-border.top:before {
  363.         top:-20px; /* value = - border-top-width - border-bottom-width */
  364.         bottom:auto;
  365.         left:auto;
  366.         right:40px; /* controls horizontal position */
  367.     border-width:0 20px 20px;
  368. }
  369. /* creates the smaller  triangle */
  370. .triangle-border.top:after {
  371.         top:-13px; /* value = - border-top-width - border-bottom-width */
  372.         bottom:auto;
  373.         left:auto;
  374.         right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  375.     border-width:0 13px 13px;
  376. }
  377. .triangle-border.left:before {
  378.         top:10px; /* controls vertical position */
  379.         bottom:auto;
  380.         left:-30px; /* value = - border-left-width - border-right-width */
  381.         border-width:15px 30px 15px 0;
  382.         border-color:transparent #5a8f00;
  383. }
  384. /* creates the smaller  triangle */
  385. .triangle-border.left:after {
  386.         top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  387.         bottom:auto;
  388.         left:-21px; /* value = - border-left-width - border-right-width */
  389.         border-width:9px 21px 9px 0;
  390.         border-color:transparent #fff;
  391. }
  392. /* creates the larger triangle */
  393. .triangle-border.right:before {
  394.         top:10px; /* controls vertical position */
  395.         bottom:auto;
  396.     left:auto;
  397.         right:-30px; /* value = - border-left-width - border-right-width */
  398.         border-width:15px 0 15px 30px;
  399.         border-color:transparent #5a8f00;
  400. }
  401. /* creates the smaller  triangle */
  402. .triangle-border.right:after {
  403.         top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  404.         bottom:auto;
  405.     left:auto;
  406.         right:-21px; /* value = - border-left-width - border-right-width */
  407.         border-width:9px 0 9px 21px;
  408.         border-color:transparent #fff;
  409. }
  410. .example-commentheading:before {
  411.         content:"";
  412.         position:absolute;
  413.         top:9px;
  414.         left:-25px;
  415.         width:15px;
  416.         height:10px;
  417.         background:#b513af;
  418.         /* css3 */
  419.         -webkit-border-radius:3px;
  420.         -moz-border-radius:3px;
  421.         border-radius:3px;
  422. }
  423. /* creates the triangle */
  424. .example-commentheading:after {
  425.         content:"";
  426.         position:absolute;
  427.         top:15px;
  428.         left:-19px;
  429.         border:4px solid transparent;
  430.         border-left-color:#b513af;
  431.     /* reduce the damage in FF3.0 */
  432.     display:block;
  433.     width:0;
  434. }
  435. .example-right {
  436.         position:relative;
  437.         padding:15px 30px;
  438.         margin:0;
  439.         color:#fff;
  440.         background:#5a8f00; /* default background for browsers without gradient support */
  441.         /* css3 */
  442.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
  443.         background:-moz-linear-gradient(#b8db29, #5a8f00);
  444.         background:-o-linear-gradient(#b8db29, #5a8f00);
  445.         background:linear-gradient(#b8db29, #5a8f00);
  446.         -webkit-border-radius:10px;
  447.         -moz-border-radius:10px;
  448.         border-radius:10px;
  449. }
  450. .example-right + p {margin:15px 0 2em 85px; font-style:italic;}
  451. .example-right:after {
  452.         content:"";
  453.         position:absolute;
  454.         bottom:-50px;
  455.         left:50px;
  456.         border-width:0 20px 50px 0px;
  457.         border-style:solid;
  458.         border-color:transparent #5a8f00;
  459.     /* reduce the damage in FF3.0 */
  460.     display:block;
  461.     width:0;
  462. }
  463. .example-obtuse {
  464.         position:relative;
  465.         padding:15px 30px;
  466.         margin:0;
  467.         color:#000;
  468.         background:#f3961c; /* default background for browsers without gradient support */
  469.         /* css3 */
  470.     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  471.         background:-moz-linear-gradient(#f9d835, #f3961c);
  472.         background:-o-linear-gradient(#f9d835, #f3961c);
  473.         background:linear-gradient(#f9d835, #f3961c);
  474.         /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
  475.         -webkit-border-top-left-radius:25px 50px;
  476.         -webkit-border-top-right-radius:25px 50px;
  477.         -webkit-border-bottom-right-radius:25px 50px;
  478.         -webkit-border-bottom-left-radius:25px 50px;
  479.         -moz-border-radius:25px / 50px;
  480.         border-radius:25px / 50px;
  481. }
  482. .example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}
  483. .example-obtuse:before {
  484.         content:"";
  485.         position:absolute;
  486.         bottom:-30px;
  487.         right:80px;
  488.         border-width:0 0 30px 50px;
  489.         border-style:solid;
  490.         border-color:transparent #f3961c;
  491.     /* reduce the damage in FF3.0 */
  492.     display:block;
  493.     width:0;
  494. }
  495. /* creates the smaller triangle */
  496. .example-obtuse:after {
  497.         content:"";
  498.         position:absolute;
  499.         bottom:-30px;
  500.         right:110px;
  501.         border-width:0 0 30px 20px;
  502.         border-style:solid;
  503.         border-color:transparent #fff;
  504.     /* reduce the damage in FF3.0 */
  505.     display:block;
  506.     width:0;
  507. }
  508. .example-twitter {
  509.         position:relative;
  510.         padding:15px;
  511.         margin:100px 0 0.5em;
  512.         color:#333;
  513.         background:#eee;
  514.         /* css3 */
  515.         -webkit-border-radius:10px;
  516.         -moz-border-radius:10px;
  517.         border-radius:10px;
  518. }
  519. .example-twitter p {font-size:28px; line-height:1.25em;}
  520. .example-twitter:before {
  521.         content:url(twitter-logo.gif);
  522.         position:absolute;
  523.         top:-60px;
  524.         left:0;
  525.         width:155px;
  526.         height:36px;
  527.     /* reduce the damage in FF3.0 */
  528.     display:block;
  529. }
  530. .example-twitter:after {
  531.         content:"";
  532.         position:absolute;
  533.         top:-30px;
  534.         left:50px;
  535.         border:15px solid transparent;
  536.         border-bottom-color:#eee;
  537.     /* reduce the damage in FF3.0 */
  538.     display:block;
  539.     width:0;
  540. }
  541. .example-twitter + p {padding-left:15px; font:14px Arial, sans-serif;}
  542. .example-number {
  543.         position:relative;
  544.         width:200px;
  545.         height:200px;
  546.         margin:50px 0 200px;
  547.         text-align:center;
  548.         font:140px/200px Arial, sans-serif;
  549.         color:#fff;
  550.         background:#C91F2C;
  551. }
  552. .example-number:before {
  553.         content:"";
  554.         position:absolute;
  555.         bottom:-140px;
  556.         right:0;
  557.         border-width:0 0 140px 140px;
  558.         border-style:solid;
  559.         border-color:transparent #C91F2C;
  560. }
  561. .example-number:after {
  562.         content:"";
  563.         position:absolute;
  564.         bottom:-140px;
  565.         right:85px;
  566.         border-width:0 0 140px 55px;
  567.         border-style:solid;
  568.         border-color:transparent #fff;
  569. }
  570. .pinched {
  571.         position:relative;
  572.         padding:15px;
  573.         margin:50px 0 3em;
  574.         text-align:center;
  575.         color:#fff;
  576.         background:#333;
  577.         /* css3 */
  578.         -webkit-border-radius:10px;
  579.         -moz-border-radius:10px;
  580.         border-radius:10px;
  581. }
  582. .pinched:before {
  583.         content:"";
  584.         position:absolute;
  585.         top:-20px;
  586.         left:50%;
  587.         width:100px;
  588.         height:20px;
  589.         margin:0 0 0 -50px;
  590.         background:#333;
  591. }
  592. .pinched:after {
  593.         content:"";
  594.         position:absolute;
  595.         top:-20px;
  596.         left:0;
  597.         width:50%;
  598.         height:20px;
  599.         background:#fff;
  600.         /* css3 */
  601.         -webkit-border-bottom-right-radius:15px;
  602.         -moz-border-radius-bottomright:15px;
  603.         border-bottom-right-radius:15px;
  604. }
  605. .pinched > :first-child:before {
  606.         content:"";
  607.         position:absolute;
  608.         top:-20px;
  609.         right:0;
  610.         width:50%;
  611.         height:20px;
  612.         background:#fff;
  613.         /* css3 */
  614.         -webkit-border-bottom-left-radius:15px;
  615.         -moz-border-radius-bottomleft:15px;
  616.         border-bottom-left-radius:15px;
  617. }
  618. .oval-speech {
  619.         position:relative;
  620.         width:270px;
  621.         padding:50px 40px;
  622.         margin:1em auto 50px;
  623.         text-align:center;
  624.         color:#fff;
  625.         background:#5a8f00;
  626.         /* css3 */
  627.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
  628.         background:-moz-linear-gradient(#b8db29, #5a8f00);
  629.         background:-o-linear-gradient(#b8db29, #5a8f00);
  630.         background:linear-gradient(#b8db29, #5a8f00);
  631.         -webkit-border-top-left-radius:220px 120px;
  632.         -webkit-border-top-right-radius:220px 120px;
  633.         -webkit-border-bottom-right-radius:220px 120px;
  634.         -webkit-border-bottom-left-radius:220px 120px;
  635.         -moz-border-radius:220px / 120px;
  636.         border-radius:220px / 120px;
  637. }
  638. .oval-speech p {font-size:1.25em;}
  639. .oval-speech:before {
  640.         content:"";
  641.         position:absolute;
  642.         z-index:-1;
  643.         bottom:-30px;
  644.         right:50%;
  645.         height:30px;
  646.         border-right:60px solid #5a8f00;
  647.         background:#5a8f00; /* need this for webkit - bug in handling of border-radius */
  648.         /* css3 */
  649.         -webkit-border-bottom-right-radius:80px 50px;
  650.         -moz-border-radius-bottomright:80px 50px;
  651.         border-bottom-right-radius:80px 50px;
  652.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  653.         -webkit-transform:translate(0, -2px);
  654.         -moz-transform:translate(0, -2px);
  655.         -ms-transform:translate(0, -2px);
  656.         -o-transform:translate(0, -2px);
  657.         transform:translate(0, -2px);
  658. }
  659. /* creates part of the curved pointy bit */
  660. .oval-speech:after {
  661.         content:"";
  662.         position:absolute;
  663.         z-index:-1;
  664.         bottom:-30px;
  665.         right:50%;
  666.         width:60px;
  667.         height:30px;
  668.         background:#fff;
  669.         /* css3 */
  670.         -webkit-border-bottom-right-radius:40px 50px;
  671.         -moz-border-radius-bottomright:40px 50px;
  672.         border-bottom-right-radius:40px 50px;
  673.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  674.         -webkit-transform:translate(-30px, -2px);
  675.         -moz-transform:translate(-30px, -2px);
  676.         -ms-transform:translate(-30px, -2px);
  677.         -o-transform:translate(-30px, -2px);
  678.         transform:translate(-30px, -2px);
  679. }
  680. .oval-thought {
  681.         position:relative;
  682.         width:270px;
  683.         padding:50px 40px;
  684.         margin:1em auto 80px;
  685.         text-align:center;
  686.         color:#fff;
  687.         background:#075698;
  688.         /* css3 */
  689.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  690.         background:-moz-linear-gradient(#2e88c4, #075698);
  691.         background:-o-linear-gradient(#2e88c4, #075698);
  692.         background:linear-gradient(#2e88c4, #075698);
  693.         /*
  694.         NOTES:
  695.         -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
  696.         -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
  697.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  698.         */
  699.         -webkit-border-top-left-radius:220px 120px;
  700.         -webkit-border-top-right-radius:220px 120px;
  701.         -webkit-border-bottom-right-radius:220px 120px;
  702.         -webkit-border-bottom-left-radius:220px 120px;
  703.         -moz-border-radius:220px / 120px;
  704.         border-radius:220px / 120px;
  705. }
  706. .oval-thought p {font-size:1.25em;}
  707. /* creates the larger circle */
  708. .oval-thought:before {
  709.         content:"";
  710.         position:absolute;
  711.         bottom:-20px;
  712.         left:50px;
  713.         width:30px;
  714.         height:30px;
  715.         background:#075698;
  716.         /* css3 */
  717.         -webkit-border-radius:30px;
  718.         -moz-border-radius:30px;
  719.         border-radius:30px;
  720. }
  721. /* creates the smaller circle */
  722. .oval-thought:after {
  723.         content:"";
  724.         position:absolute;
  725.         bottom:-30px;
  726.         left:30px;
  727.         width:15px;
  728.         height:15px;
  729.         background:#075698;
  730.         /* css3 */
  731.         -webkit-border-radius:15px;
  732.         -moz-border-radius:15px;
  733.         border-radius:15px;
  734. }
  735. .oval-quotes {
  736.         position:relative;
  737.         width:400px;
  738.         height:350px;
  739.         margin:2em auto 10px;
  740.         color:#000;
  741.         background:#ffed26;
  742.         /* css3 */
  743.         /*
  744.         NOTES:
  745.         -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
  746.         -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
  747.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  748.         */
  749.         -webkit-border-top-left-radius:400px 350px;
  750.         -webkit-border-top-right-radius:400px 350px;
  751.         -webkit-border-bottom-right-radius:400px 350px;
  752.         -webkit-border-bottom-left-radius:400px 350px;
  753.         -moz-border-radius:400px / 350px;
  754.         border-radius:400px / 350px;
  755. }
  756. /* creates opening quotation mark */
  757. .oval-quotes:before {
  758.         content:"\201C";
  759.         position:absolute;
  760.         z-index:1;
  761.         top:20px;
  762.         left:20px;
  763.         font:80px/1 Georgia, serif;
  764.         color:#ffed26;
  765. }
  766. /* creates closing quotation mark */
  767. .oval-quotes:after {
  768.         content:"\201D";
  769.         position:absolute;
  770.         z-index:1;
  771.         bottom:0;
  772.         right:20px;
  773.         font:80px/0.25 Georgia, serif;
  774.         color:#ffed26;
  775. }
  776. .oval-quotes p {
  777.         width:250px;
  778.         height:250px;
  779.         padding:50px 0 0;
  780.         margin:0 auto;
  781.         text-align:center;
  782.         font-size:35px;
  783. }
  784. /* creates smaller curve */
  785. .oval-quotes p:before {
  786.         content:"";
  787.         position:absolute;
  788.         z-index:-1;
  789.         bottom:-30px;
  790.         right:55%;
  791.         width:180px; /* wider than necessary to make it look a bit better in IE8 */
  792.         height:60px;
  793.         background:#fff; /* need this for webkit - bug in handling of border-radius */
  794.         /* css3 */
  795.         -webkit-border-bottom-right-radius:40px 50px;
  796.         -moz-border-radius-bottomright:40px 50px;
  797.         border-bottom-right-radius:40px 50px;
  798.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  799.         -webkit-transform:translate(-30px, -2px);
  800.         -moz-transform:translate(-30px, -2px);
  801.         -ms-transform:translate(-30px, -2px);
  802.         -o-transform:translate(-30px, -2px);
  803.         transform:translate(-30px, -2px);
  804. }
  805. /* creates larger curve */
  806. .oval-quotes p:after {
  807.         content:"";
  808.         position:absolute;
  809.         z-index:-2;
  810.         bottom:-30px;
  811.         right:25%;
  812.         height:80px;
  813.         border-right:200px solid #ffed26;
  814.         background:#ffed26; /* need this for webkit - bug in handling of border-radius */
  815.         /* css3 */
  816.         -webkit-border-bottom-right-radius:200px 100px;
  817.         -moz-border-radius-bottomright:200px 100px;
  818.         border-bottom-right-radius:200px 100px;
  819.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  820.         -webkit-transform:translate(0, -2px);
  821.         -moz-transform:translate(0, -2px);
  822.         -ms-transform:translate(0, -2px);
  823.         -o-transform:translate(0, -2px);
  824.         transform:translate(0, -2px);
  825.     /* reduce the damage in FF3.0 */
  826.     display:block;
  827.     width:0;
  828. }
  829. .oval-quotes + p {
  830.         position:relative; /* part of the IE8 width compromise */
  831.         width:150px;
  832.         margin:0 0 2em;
  833.         font-size:18px;
  834.         font-weight:bold;
  835. }
  836. .rectangle-speech-border {
  837.         position:relative;
  838.         padding:50px 15px;
  839.         margin:1em 0 3em;
  840.         border:10px solid #5a8f00;
  841.         text-align:center;
  842.         color:#333;
  843.         background:#fff;
  844.         /* css3 */
  845.         -webkit-border-radius:20px;
  846.         -moz-border-radius:20px;
  847.         border-radius:20px;
  848. }
  849. /* creates larger curve */
  850. .rectangle-speech-border:before {
  851.         content:"";
  852.         position:absolute;
  853.         z-index:10;
  854.         bottom:-40px;
  855.         left:50px;
  856.         width:50px;
  857.         height:30px;
  858.         border-style:solid;
  859.         border-width:0 10px 10px 0;
  860.         border-color:#5a8f00;
  861.         background:transparent;
  862.         /* css3 */
  863.         -webkit-border-bottom-right-radius:80px 50px;
  864.         -moz-border-radius-bottomright:80px 50px;
  865.         border-bottom-right-radius:80px 50px;
  866.     /* reduce the damage in FF3.0 */
  867.     display:block;
  868. }
  869. /* creates smaller curve */
  870. .rectangle-speech-border:after {
  871.         content:"";
  872.         position:absolute;
  873.         z-index:10;
  874.         bottom:-40px;
  875.         left:50px;
  876.         width:20px;
  877.         height:30px;
  878.         border-style:solid;
  879.         border-width:0 10px 10px 0;
  880.         border-color:#5a8f00;
  881.         background:transparent;
  882.         /* css3 */
  883.         -webkit-border-bottom-right-radius:40px 50px;
  884.         -moz-border-radius-bottomright:40px 50px;
  885.         border-bottom-right-radius:40px 50px;
  886.     /* reduce the damage in FF3.0 */
  887.     display:block;
  888. }
  889. /* creates a small circle to produce a rounded point where the two curves meet */
  890. .rectangle-speech-border > :first-child:before {
  891.         content:"";
  892.         position:absolute;
  893.         bottom:-40px;
  894.         left:45px;
  895.         width:10px;
  896.         height:10px;
  897.         background:#5a8f00;
  898.         /* css3 */
  899.         -webkit-border-radius:10px;
  900.         -moz-border-radius:10px;
  901.         border-radius:10px;
  902. }
  903. /* creates a white rectangle to cover part of the oval border*/
  904. .rectangle-speech-border > :first-child:after {
  905.         content:"";
  906.         position:absolute;
  907.         bottom:-10px;
  908.         left:76px;
  909.         width:24px;
  910.         height:15px;
  911.         background:#fff;
  912. }
  913. .oval-speech-border {
  914.         position:relative;
  915.         padding:70px 30px;
  916.         margin:1em auto 60px;
  917.         border:10px solid #f3961c;
  918.         text-align:center;
  919.         color:#333;
  920.         background:#fff;
  921.         /* css3 */
  922.         /*
  923.         NOTES:
  924.         -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
  925.         -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
  926.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  927.         */
  928.         -webkit-border-top-left-radius:240px 140px;
  929.         -webkit-border-top-right-radius:240px 140px;
  930.         -webkit-border-bottom-right-radius:240px 140px;
  931.         -webkit-border-bottom-left-radius:240px 140px;
  932.         -moz-border-radius:240px / 140px;
  933.         border-radius:240px / 140px;
  934. }
  935. /* creates larger curve */
  936. .oval-speech-border:before {
  937.         content:"";
  938.         position:absolute;
  939.         z-index:2;
  940.         bottom:-40px;
  941.         right:50%;
  942.         width:50px;
  943.         height:30px;
  944.         border-style:solid;
  945.         border-width:0 10px 10px 0;
  946.         border-color:#f3961c;
  947.         margin-right:-10px;
  948.         background:transparent;
  949.         /* css3 */
  950.         -webkit-border-bottom-right-radius:80px 50px;
  951.         -moz-border-radius-bottomright:80px 50px;
  952.         border-bottom-right-radius:80px 50px;
  953.     /* reduce the damage in FF3.0 */
  954.     display:block;
  955. }
  956. /* creates smaller curve */
  957. .oval-speech-border:after {
  958.         content:"";
  959.         position:absolute;
  960.         z-index:2;
  961.         bottom:-40px;
  962.         right:50%;
  963.         width:20px;
  964.         height:31px;
  965.         border-style:solid;
  966.         border-width:0 10px 10px 0;
  967.         border-color:#f3961c;
  968.         margin-right:20px;
  969.         background:transparent;
  970.         /* css3 */
  971.         -webkit-border-bottom-right-radius:40px 50px;
  972.         -moz-border-radius-bottomright:40px 50px;
  973.         border-bottom-right-radius:40px 50px;
  974.     /* reduce the damage in FF3.0 */
  975.     display:block;
  976. }
  977. /* creates a small circle to produce a rounded point where the two curves meet */
  978. .oval-speech-border > :first-child:before {
  979.         content:"";
  980.         position:absolute;
  981.         z-index:1;
  982.         bottom:-40px;
  983.         right:50%;
  984.         width:10px;
  985.         height:10px;
  986.         margin-right:45px;
  987.         background:#f3961c;
  988.         /* css3 */
  989.         -webkit-border-radius:10px;
  990.         -moz-border-radius:10px;
  991.         border-radius:10px;
  992. }
  993. /* creates a white rectangle to cover part of the oval border*/
  994. .oval-speech-border > :first-child:after {
  995.         content:"";
  996.         position:absolute;
  997.         z-index:1;
  998.         bottom:-10px;
  999.         right:50%;
  1000.         width:30px;
  1001.         height:15px;
  1002.         background:#fff;
  1003. }
  1004. .oval-thought-border {
  1005.         position:relative;
  1006.         padding:70px 30px;
  1007.         margin:1em auto 80px;
  1008.         border:10px solid #c81e2b;
  1009.         text-align:center;
  1010.         color:#333;
  1011.         background:#fff;
  1012.         /* css3 */
  1013.         /*
  1014.         NOTES:
  1015.         -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
  1016.         -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
  1017.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  1018.         */
  1019.         -webkit-border-top-left-radius:240px 140px;
  1020.         -webkit-border-top-right-radius:240px 140px;
  1021.         -webkit-border-bottom-right-radius:240px 140px;
  1022.         -webkit-border-bottom-left-radius:240px 140px;
  1023.         -moz-border-radius:240px / 140px;
  1024.         border-radius:240px / 140px;
  1025. }
  1026. /* creates the larger circle */
  1027. .oval-thought-border:before {
  1028.         content:"";
  1029.         position:absolute;
  1030.         z-index:10;
  1031.         bottom:-40px;
  1032.         right:100px;
  1033.         width:50px;
  1034.         height:50px;
  1035.         border:10px solid #c81e2b;
  1036.         background:#fff;
  1037.         /* css3 */
  1038.         -webkit-border-radius:50px;
  1039.         -moz-border-radius:50px;
  1040.         border-radius:50px;
  1041.     /* reduce the damage in FF3.0 */
  1042.     display:block;
  1043. }
  1044. /* creates the smaller circle */
  1045. .oval-thought-border:after {
  1046.         content:"";
  1047.         position:absolute;
  1048.         z-index:10;
  1049.         bottom:-60px;
  1050.         right:50px;
  1051.         width:25px;
  1052.         height:25px;
  1053.         border:10px solid #c81e2b;
  1054.         background:#fff;
  1055.         /* css3 */
  1056.         -webkit-border-radius:25px;
  1057.         -moz-border-radius:25px;
  1058.         border-radius:25px;
  1059.     /* reduce the damage in FF3.0 */
  1060.     display:block;
  1061. }
  1062.     </style>
  1063.         <script>       
  1064.                 var _gaq = _gaq || [];         _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);
  1065.                 (function() {
  1066.                         var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';
  1067.                         var s = document.getElementsByTagName('script')[0];
  1068.                         s.parentNode.insertBefore(ga, s);
  1069.                 })();
  1070.         </script>
  1071. </head>
  1072. <body>
  1073.         <div id="container">
  1074.                 <div class="content">
  1075.                         <p class="triangle-isosceles">This only needs one HTML element.</p>
  1076.                         <p class="triangle-isosceles top">For example, <code><p>[text]</p></code>.</p>
  1077.                         <p class="triangle-isosceles left">But it could be any element you want.</p>
  1078.                         <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
  1079.                         <p class="triangle-right">This only needs one HTML element.</p>
  1080.                         <p class="triangle-right top">For example, <code><p>[text]</p></code>.</p>
  1081.                         <p class="triangle-right left">But it could be any element you want.</p>
  1082.                         <p class="triangle-right right">The entire appearance is created only with CSS.</p>
  1083.                         <p class="triangle-obtuse">This only needs one HTML element.</p>
  1084.                         <p class="triangle-obtuse top">For example, <code><p>[text]</p></code>.</p>
  1085.                         <p class="triangle-obtuse left">But it could be any element you want.</p>
  1086.                         <p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>
  1087.                         <p class="triangle-border">This only needs one HTML element.</p>
  1088.                         <p class="triangle-border top">For example, <code><p>[text]</p></code>.</p>
  1089.                         <p class="triangle-border left">But it could be any element you want.</p>
  1090.                         <p class="triangle-border right">The entire appearance is created only with CSS.</p>
  1091.                         <h2>Simple examples</h2>
  1092.                         <h3 class="example-commentheading">125 comments</h3>
  1093.                         <blockquote class="example-right">
  1094.                                 <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
  1095.                         </blockquote>
  1096.                         <p>Ivan Chermayeff</p>
  1097.                         <blockquote class="example-obtuse">
  1098.                                 <p>It’s not what you look at that matters, it’s what you see.</p>
  1099.                         </blockquote>
  1100.                         <p>Henry David Thoreau</p>
  1101.                         <blockquote class="example-twitter" cite="http://twitter.com/necolas/status/9880187933">
  1102.                                 <p>Takes me longer to write up blog posts on experiments or projects than to create them in the first place.</p>
  1103.                         </blockquote>
  1104.                         <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>
  1105.                         <div class="example-number">57</div>
  1106.                         <h2>More complex CSS3 examples</h2>
  1107.                         <p>Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.</p>
  1108.                         <div class="pinched">
  1109.                                 <p><strong>It doesn’t matter what the first child element of this div is</strong>...but it does need a child element.</p>
  1110.                         </div>
  1111.                         <blockquote class="oval-speech">
  1112.                                 <p>This is a blockquote that is styled to look like a speech bubble</p>
  1113.                         </blockquote>
  1114.                         <blockquote class="oval-thought">
  1115.                                 <p>This is a blockquote that is styled to look like a thought bubble</p>
  1116.                         </blockquote>
  1117.                         <blockquote class="oval-quotes">
  1118.                                 <p>No, Donny, these men are nihilists, there’s nothing to be afraid of.</p>
  1119.                         </blockquote>
  1120.                         <p>Walter Sobchak</p>
  1121.                         <blockquote class="rectangle-speech-border">
  1122.                                 <p>This is a blockquote that is styled to look like a speech bubble</p>
  1123.                         </blockquote>
  1124.                         <blockquote class="oval-speech-border">
  1125.                                 <p>This is a blockquote that is styled to look like a speech bubble</p>
  1126.                         </blockquote>
  1127.                         <blockquote class="oval-thought-border">
  1128.                                 <p>This is a blockquote that is styled to look like a thought bubble</p>
  1129.                         </blockquote>
  1130.                 </div>
  1131.         </div>
  1132. </body>
  1133. </html>
复制代码






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1