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 Typography Effekt
Kategorie: CSS
PHP-Fusion Version: Keine
Quelle: http://nicolasgallagher.com/css-typography-experiment/
Schwierigkeitsgrad:
Ein Typografie Effekt, der den text schräg stellt und u.a. durch css ein Herz darin erstellt.

Faq

HTML-Code

GeSHi: HTML


  1. <p>Ich Liebe <strong>PHP-FUSION</strong> <em>.AT</em></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. }
  50.  
  51. .oval-speech-border {
  52. position:relative;
  53. padding:70px 30px;
  54. margin:1em auto 60px;
  55. border:10px solid #f3961c;
  56. text-align:center;
  57. color:#333;
  58. font-size: 20px;
  59. background:#fff;
  60. width:300px;
  61. -webkit-border-top-left-radius:240px 140px;
  62. -webkit-border-top-right-radius:240px 140px;
  63. -webkit-border-bottom-right-radius:240px 140px;
  64. -webkit-border-bottom-left-radius:240px 140px;
  65. -moz-border-radius:240px / 140px;
  66. border-radius:240px / 140px;
  67. }
  68.  
  69. .oval-speech-border:before {
  70. content:"";
  71. position:absolute;
  72. z-index:2;
  73. bottom:-40px;
  74. right:50%;
  75. width:50px;
  76. height:30px;
  77. border-style:solid;
  78. border-width:0 10px 10px 0;
  79. border-color:#f3961c;
  80. margin-right:-10px;
  81. background:transparent;
  82. -webkit-border-bottom-right-radius:80px 50px;
  83. -moz-border-radius-bottomright:80px 50px;
  84. border-bottom-right-radius:80px 50px;
  85. display:block;
  86. }
  87.  
  88. .oval-speech-border:after {
  89. content:"";
  90. position:absolute;
  91. z-index:2;
  92. bottom:-40px;
  93. right:50%;
  94. width:20px;
  95. height:31px;
  96. border-style:solid;
  97. border-width:0 10px 10px 0;
  98. border-color:#f3961c;
  99. margin-right:20px;
  100. background:transparent;
  101. -webkit-border-bottom-right-radius:40px 50px;
  102. -moz-border-radius-bottomright:40px 50px;
  103. border-bottom-right-radius:40px 50px;
  104. display:block;
  105. }
  106.  
  107. .oval-speech-border > :first-child:before {
  108. content:"";
  109. position:absolute;
  110. z-index:1;
  111. bottom:-40px;
  112. right:50%;
  113. width:10px;
  114. height:10px;
  115. margin-right:45px;
  116. background:#f3961c;
  117. -webkit-border-radius:10px;
  118. -moz-border-radius:10px;
  119. border-radius:10px;
  120. }
  121.  
  122. .oval-speech-border > :first-child:after {
  123. content:"";
  124. position:absolute;
  125. z-index:1;
  126. bottom:-10px;
  127. right:50%;
  128. width:30px;
  129. height:15px;
  130. background:#fff;
  131. }
gewandelt in 0.008 Sekunden, benutzt wurde GeSHi 1.0.8.10




Demo ansehen

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.