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 1html-code
GeSHi: HTML
- <blockquote class="oval-thought-border">
- </blockquote>
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10
CSS
GeSHi: CSS
- .oval-thought-border {
- position:relative;
- padding:70px 30px;
- margin:1em auto 80px;
- border:10px solid #c81e2b;
- text-align:center;
- color:#333;
- font-size: 20px;
- background:#fff;
- width:300px;
- -webkit-border-top-left-radius:240px 140px;
- -webkit-border-top-right-radius:240px 140px;
- -webkit-border-bottom-right-radius:240px 140px;
- -webkit-border-bottom-left-radius:240px 140px;
- -moz-border-radius:240px / 140px;
- border-radius:240px / 140px;
- }
-
- .oval-thought-border:before {
- content:"";
- position:absolute;
- z-index:10;
- bottom:-40px;
- right:100px;
- width:50px;
- height:50px;
- border:10px solid #c81e2b;
- background:#fff;
- -webkit-border-radius:50px;
- -moz-border-radius:50px;
- border-radius:50px;
- display:block;
- }
-
- .oval-thought-border:after {
- content:"";
- position:absolute;
- z-index:10;
- bottom:-60px;
- right:50px;
- width:25px;
- height:25px;
- border:10px solid #c81e2b;
- background:#fff;
- -webkit-border-radius:25px;
- -moz-border-radius:25px;
- border-radius:25px;
- display:block;
- }
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10
Bubble 2
html-code
GeSHi: HTML
- <blockquote class="oval-speech-border">
- </blockquote>
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10
CSS
GeSHi: CSS
- .oval-speech-border {
- position:relative;
- padding:70px 30px;
- margin:1em auto 60px;
- border:10px solid #f3961c;
- text-align:center;
- color:#333;
- font-size: 20px;
- background:#fff;
- width:300px;
- -webkit-border-top-left-radius:240px 140px;
- -webkit-border-top-right-radius:240px 140px;
- -webkit-border-bottom-right-radius:240px 140px;
- -webkit-border-bottom-left-radius:240px 140px;
- -moz-border-radius:240px / 140px;
- border-radius:240px / 140px;
- }
-
- .oval-speech-border:before {
- content:"";
- position:absolute;
- z-index:2;
- bottom:-40px;
- right:50%;
- width:50px;
- height:30px;
- border-style:solid;
- border-width:0 10px 10px 0;
- border-color:#f3961c;
- margin-right:-10px;
- background:transparent;
- -webkit-border-bottom-right-radius:80px 50px;
- -moz-border-radius-bottomright:80px 50px;
- border-bottom-right-radius:80px 50px;
- display:block;
- }
-
- .oval-speech-border:after {
- content:"";
- position:absolute;
- z-index:2;
- bottom:-40px;
- right:50%;
- width:20px;
- height:31px;
- border-style:solid;
- border-width:0 10px 10px 0;
- border-color:#f3961c;
- margin-right:20px;
- background:transparent;
- -webkit-border-bottom-right-radius:40px 50px;
- -moz-border-radius-bottomright:40px 50px;
- border-bottom-right-radius:40px 50px;
- display:block;
- }
-
- .oval-speech-border > :first-child:before {
- content:"";
- position:absolute;
- z-index:1;
- bottom:-40px;
- right:50%;
- width:10px;
- height:10px;
- margin-right:45px;
- background:#f3961c;
- -webkit-border-radius:10px;
- -moz-border-radius:10px;
- border-radius:10px;
- }
-
- .oval-speech-border > :first-child:after {
- content:"";
- position:absolute;
- z-index:1;
- bottom:-10px;
- right:50%;
- width:30px;
- height:15px;
- background:#fff;
- }
gewandelt in 0.002 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
Anmelden
Anzeige