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.10.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
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
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.10.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.10.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"
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
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.10.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.10.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.10.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
  Mehrsprachige Website mit Mobirise möglich? Quelle75 1 44 20.08.2019, 16:24
Letzter Beitrag: barbara0701
  Mobirise Publizierung Utz29 15 258 18.08.2019, 18:52
Letzter Beitrag: Utz29
  Mobirise-Transparenter Rahmen um Modal PopUp Thomas Saake 3 52 18.08.2019, 11:56
Letzter Beitrag: Thomas Saake
  Mobirise-Fotos werden nicht eingefügt Thomas Saake 65 4.104 13.08.2019, 19:36
Letzter Beitrag: dasdrandre
  Mobirise- HTML (Pug) CSS (SCSS) Thomas Saake 0 38 10.08.2019, 15:44
Letzter Beitrag: Thomas Saake
  Mobirise-Formular Generator Thomas Saake 29 576 10.08.2019, 10:50
Letzter Beitrag: Tommy Herrmann
  Mobirise Sparachumschaltung ? stobi_de 30 2.301 05.08.2019, 10:54
Letzter Beitrag: Berdie
  Mobirise-PopUp Formatierung Thomas Saake 2 106 30.07.2019, 18:36
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Countdown einfügen Thomas Saake 4 163 24.07.2019, 13:21
Letzter Beitrag: Tommy Herrmann
  Mobirise-Kann man die Timeline Linie ändern Thomas Saake 10 253 19.07.2019, 18:01
Letzter Beitrag: Tommy Herrmann



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!