Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

CSS Bubbles
Kategorie: CSS
PHP-Fusion Version: Keine
Quelle: themes.lewitzgalerie.de
Schwierigkeitsgrad:
Zwei schöne Sprechblasen nur mittels etwas html und CSS-Code

Faq

Bubble 1

html-code

GeSHi: HTML


  1. <blockquote class="oval-thought-border">
  2. <p>PHP-FUSION.AT</p>
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10



CSS

GeSHi: CSS


  1. .oval-thought-border {
  2. position:relative;
  3. padding:70px 30px;
  4. margin:1em auto 80px;
  5. border:10px solid #c81e2b;
  6. text-align:center;
  7. color:#333;
  8. font-size: 20px;
  9. background:#fff;
  10. width:300px;
  11. -webkit-border-top-left-radius:240px 140px;
  12. -webkit-border-top-right-radius:240px 140px;
  13. -webkit-border-bottom-right-radius:240px 140px;
  14. -webkit-border-bottom-left-radius:240px 140px;
  15. -moz-border-radius:240px / 140px;
  16. border-radius:240px / 140px;
  17. }
  18.  
  19. .oval-thought-border:before {
  20. content:"";
  21. position:absolute;
  22. z-index:10;
  23. bottom:-40px;
  24. right:100px;
  25. width:50px;
  26. height:50px;
  27. border:10px solid #c81e2b;
  28. background:#fff;
  29. -webkit-border-radius:50px;
  30. -moz-border-radius:50px;
  31. border-radius:50px;
  32. display:block;
  33. }
  34.  
  35. .oval-thought-border:after {
  36. content:"";
  37. position:absolute;
  38. z-index:10;
  39. bottom:-60px;
  40. right:50px;
  41. width:25px;
  42. height:25px;
  43. border:10px solid #c81e2b;
  44. background:#fff;
  45. -webkit-border-radius:25px;
  46. -moz-border-radius:25px;
  47. border-radius:25px;
  48. display:block;
  49. }
gewandelt in 0.004 Sekunden, benutzt wurde GeSHi 1.0.8.10




Bubble 2

html-code

GeSHi: HTML


  1. <blockquote class="oval-speech-border">
  2. <p>PHP-FUSION.AT</p>
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10



CSS

GeSHi: CSS


  1. .oval-speech-border {
  2. position:relative;
  3. padding:70px 30px;
  4. margin:1em auto 60px;
  5. border:10px solid #f3961c;
  6. text-align:center;
  7. color:#333;
  8. font-size: 20px;
  9. background:#fff;
  10. width:300px;
  11. -webkit-border-top-left-radius:240px 140px;
  12. -webkit-border-top-right-radius:240px 140px;
  13. -webkit-border-bottom-right-radius:240px 140px;
  14. -webkit-border-bottom-left-radius:240px 140px;
  15. -moz-border-radius:240px / 140px;
  16. border-radius:240px / 140px;
  17. }
  18.  
  19. .oval-speech-border:before {
  20. content:"";
  21. position:absolute;
  22. z-index:2;
  23. bottom:-40px;
  24. right:50%;
  25. width:50px;
  26. height:30px;
  27. border-style:solid;
  28. border-width:0 10px 10px 0;
  29. border-color:#f3961c;
  30. margin-right:-10px;
  31. background:transparent;
  32. -webkit-border-bottom-right-radius:80px 50px;
  33. -moz-border-radius-bottomright:80px 50px;
  34. border-bottom-right-radius:80px 50px;
  35. display:block;
  36. }
  37.  
  38. .oval-speech-border:after {
  39. content:"";
  40. position:absolute;
  41. z-index:2;
  42. bottom:-40px;
  43. right:50%;
  44. width:20px;
  45. height:31px;
  46. border-style:solid;
  47. border-width:0 10px 10px 0;
  48. border-color:#f3961c;
  49. margin-right:20px;
  50. background:transparent;
  51. -webkit-border-bottom-right-radius:40px 50px;
  52. -moz-border-radius-bottomright:40px 50px;
  53. border-bottom-right-radius:40px 50px;
  54. display:block;
  55. }
  56.  
  57. .oval-speech-border > :first-child:before {
  58. content:"";
  59. position:absolute;
  60. z-index:1;
  61. bottom:-40px;
  62. right:50%;
  63. width:10px;
  64. height:10px;
  65. margin-right:45px;
  66. background:#f3961c;
  67. -webkit-border-radius:10px;
  68. -moz-border-radius:10px;
  69. border-radius:10px;
  70. }
  71.  
  72. .oval-speech-border > :first-child:after {
  73. content:"";
  74. position:absolute;
  75. z-index:1;
  76. bottom:-10px;
  77. right:50%;
  78. width:30px;
  79. height:15px;
  80. background:#fff;
  81. }
gewandelt in 0.005 Sekunden, benutzt wurde GeSHi 1.0.8.10




Demo ansehen

Demo

Demo 1

PHP-FUSION.AT

Demo 2

PHP-FUSION.AT


Tutorial Verlinken

URL: 
BBCode: 
HTML-Code: 
Kommentare
Es wurden noch keine Kommentare verfasst.
Kommentar schreiben
Bitte logge dich ein, um einen Kommentar zu verfassen.
Anzeige


© 2016 Real Space. All rights reserved | Design by W3layouts
Powered by PHP-Fusion copyright © 2002 - 2017 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.