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.3 + 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.3 + 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.3 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
(09.02.2019, 09: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.3 + 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.3 + 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.3 + 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
  Mobirise-Tab Slideout Thomas Saake 29 468 18.02.2019, 13:25
Letzter Beitrag: Doris Rehhausen
  Mobirise AMP - eigene amp-sidebar nicht valide Sassnitzer 18 282 12.02.2019, 19:55
Letzter Beitrag: Tommy Herrmann
  Mobirise-Interessante vor/zurück/Full Size Bilder Variante Thomas Saake 1 49 11.02.2019, 17:35
Letzter Beitrag: c-laus
  Mobirise-Modal Button einfügen Thomas Saake 10 186 07.02.2019, 14:14
Letzter Beitrag: Thomas Saake
  Mobirise links entfernen nof15us 11 231 03.02.2019, 10:32
Letzter Beitrag: c-laus
  Mobirise Verständnisproblem nof15us 3 96 02.02.2019, 16:24
Letzter Beitrag: Rancher
  Mobirise Programm sehr sehr langsam Redwood_ch 3 105 01.02.2019, 15:23
Letzter Beitrag: Redwood_ch
  Mobirise-Verschiedenfarbige Rahmen um Bild Thomas Saake 6 95 31.01.2019, 16:18
Letzter Beitrag: c-laus
  Datenschutzleiste in Mobirise hansra 1 145 17.01.2019, 22:15
Letzter Beitrag: Rancher
  Facebook - Timeline einbinden Rancher 36 533 12.01.2019, 14:26
Letzter Beitrag: Rancher



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!