Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise-SVG Grafik einbinden
#1
Moin.
Ich greife meine Frage aus diesem Thema
https://www.nof-schule.de/forum/t-blubbernde-blasen
nochmal alleine auf.

Die Blasen habe ich ja hinbekommen. (Testseite)
https://codepen.io/Mark_Bowley/pen/mEtqj

Wenn ich aber statt Blasen z.B. Ballons haben möchte, wie bekomme ich das hin.
Klar. SVG Grafik erstellen.
Nur wie einbinden?  :confused:
Gruß
Thomas

Mobirise 4.9.7 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin Thomas,

Ich glaube, das ist alles reines CSS, nix Grafik.

Code:
.bubble {
   -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

   -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

   height: 200px;
position: absolute;
width: 200px;
}

.bubble:after {
   background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
   background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
   background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
   background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
   background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

   -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

content: "";
   height: 180px;
left: 10px;
position: absolute;
width: 180px;
}

Spiele mal ein bisschen mit der CSS und du siehst die Veränderungen, Beispiel Größe der Blasen.
Code:
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
... die 0.8 auf 1.8 ändern.
mfg.
|---------------------------------
|Glück ist ... kein Pech zu haben.
|---------------------------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin,

... ja natürlich ist das reine CSS (ohne Grafik).

Ich habe das mal hier getestet und in Mobirise eingebaut.

http://www.mobirise-tutorials.com/Busine...bbles.html

... hier ist was mit Ballons:

https://codepen.io/JeffreyTaylor/pen/jzohC
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Moin,

technisch sicherlich eine gute Leistung, wohl dem, der so etwas umsetzen kann
(Tommy kann das ja Kussmund )

Ich frage mich allerdings:
"Wer braucht den solch einen Blödsinn? - Wofür soll das denn gut sein?"

Claus
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
... wer das braucht - niemand :D

Du könntest aber so auch alles andere in Frage stellen, wie z.B. Slider oder animiertes Scrollen oder eine ausklappbare Navi - oder vielleicht auch das gesamte Internet :D

Interessant ist eben, dass das reine CSS ist. Früher hätte man so etwas ohne JavaScript niemals hin bekommen ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Ich.
Claus du hast ja gesehen was ich vorhabe. Geburtstag.
Das ist eine nicht ernst zunehmende, private Seite, die zu gegebener Zeit drei Monate im Netz ist und dann verschwindet.
Das ganze ist zwar noch sehr lange hin.
Aber immer wenn so ein paar Gimmicks auftauchen, gucke ich mal ob ich es gebrauchen kann.
Und vor allem: Ich kann dann nebenbei auch noch üben.  :D

Reines CSS. Ok. Deswegen habe ich nirgends 'ne Grafik im Code gefunden.  :headbash:
Gruß
Thomas

Mobirise 4.9.7 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
So. Danke Tommy.
Hab's mal eingebaut.

http://tsad17.de/

Einbau natürlich kein Problem. Dass das ganze responsive auf dem Phone den Bach runtergeht.
Erstmal auch ok.
Aber warum hängen die Schnüre der Ballons neben den Ballons? Huh
Gruß
Thomas

Mobirise 4.9.7 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
(09.02.2019, 10:39)Thomas Saake schrieb: Ich.
Claus du hast ja gesehen was ich vorhabe. Geburtstag.
Das ist eine nicht ernst zunehmende, private Seite, die zu gegebener Zeit drei Monate im Netz ist und dann verschwindet.

Moin Thomas,

das weis ich, ich weis auch wofür du das haben willst.
Dich meinte ich auch nicht persönlich...ich weisß ja, das du das sehr genau unterscheiden kannst.
Ich meinte eigntlich denjenigen, der so etwas konstruiert, baut.
Das ist genauso überflüssig wie: "Dschungelkamp-holt mich hier raus"
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Konstrukteure wird es wohl immer geben.
Aber das Dschungelcamp muss weg.  thumbs up  :D
Gruß
Thomas

Mobirise 4.9.7 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
@Thomas,

war gerade unterwegs. Ich erstelle Dir das gleich mal mit den Ballons ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
... hier sind die Ballons Smiling

http://www.mobirise-tutorials.com/Busine...llons.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Alles so gemacht. Denke ich mal.
Aber: Die Ballonschnüre hängen neben den Ballons....

http://tsad17.de/
Gruß
Thomas

Mobirise 4.9.7 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
... jetzt scheint es ja zu klappen thumbs up


.jpg  Ballons.JPG (Größe: 40,37 KB / Downloads: 7)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Warum die Schnüre jetzt auf einmal drunter sind.... Huh  Huh  Huh
Egal wie.
Eine Frage noch zu den CSS Schnüren.
Die sind ja kerzengerade. Kann man denen per CSS auch eine Wellenform verpassen? Oder so ähnlich.
Gruß
Thomas

Mobirise 4.9.7 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
... wahrscheinlich schon - ich aber nicht :D

Keine Ahnung wie :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Cookie in Mobirise Seite gefunden - kein Cookie-Alert verwendet mina7 7 91 21.04.2019, 13:13
Letzter Beitrag: barbara0701
  Mobirise-Im Modal Textlink zum Footer Thomas Saake 1 52 17.04.2019, 13:02
Letzter Beitrag: Thomas Saake
  Mobirise site übernehmen nof15us 7 131 13.04.2019, 17:48
Letzter Beitrag: nof15us
  Mobirise Forum tot? nof15us 6 172 09.04.2019, 08:27
Letzter Beitrag: nof15us
  Datenbank und Mobirise Davoud Kanani 7 231 08.04.2019, 10:45
Letzter Beitrag: Davoud Kanani
  Mobirise Anzahl blocks nof15us 2 94 07.04.2019, 16:11
Letzter Beitrag: nof15us
  Auflösung für Mobirise Seiten nof15us 2 149 06.04.2019, 09:56
Letzter Beitrag: Martin73
  Mobirise-Forms>Subscribe Form Thomas Saake 4 135 02.04.2019, 18:47
Letzter Beitrag: Thomas Saake
  Fehler in der mobirise obboard-Galerie magfly78 3 110 28.03.2019, 11:12
Letzter Beitrag: magfly78
  Mobirise-Hintergrund Farbe Text Link zum Modal Thomas Saake 3 105 25.03.2019, 16:31
Letzter Beitrag: Thomas Saake



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!