Hallo zusammen,
wie kann ich so einen Effekt unter Wordpress erreichen?
So das die Schriftgröße immer an Fenstergröße auto. angepasst wird.
Vielen Dank im Voraus!
Schriftgröße auto. anpassen, ohne line break
-
- Gerade eben
- Anzeige
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
- ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
- ✔️ Deutsche Server & DSGVO-konform
- ✔️ Persönlicher Support (kein 0815-Ticket-System)
-
Das ist mir Flash gemacht.
Webseiten die nur mit Flash funktionieren, kann man heutzutage vergessen. Diese Flash-Seiten waren vor 10 Jahren mal angesagt, heute sollte man aber darauf verzichten.Ob man das mit HTML/CSS/Javascript hinbekommt, kann ich nicht sagen. Ich konnte ja nich mal sehen, wie es aussehen soll. :-)
Gruß
Ingo -
Das ist mir Flash gemacht.
Webseiten die nur mit Flash funktionieren, kann man heutzutage vergessen. Diese Flash-Seiten waren vor 10 Jahren mal angesagt, heute sollte man aber darauf verzichten.Ob man das mit HTML/CSS/Javascript hinbekommt, kann ich nicht sagen. Ich konnte ja nich mal sehen, wie es aussehen soll. :-)
Gruß
IngoEinfach die Breite des Fensters verändern, dann sieht mann es.
Vielen Dank im Voraus!
-
Einfach die Breite des Fensters verändern, dann sieht mann es.
Vielen Dank im Voraus!
du hast das "ich kann das nicht mal sehen" falsch verstanden ;-)
denn auch ich "Kann es nicht sehen"; weil ich kein Flash Plugin mehr auf meinem PC habe ;-)
und bei mobilen Geräten kann man das sowieso nicht sehen, weil die alle Flash nicht anzeigen -
Ist eigentlich keine WordPress-Frage.
Es könnte über CSS gehen. Mit einer relativen Schriftgröße, bezogen auf die Breite des Viewports.Oder mit JavaScript.
Oder – duck und weg – binde doch eine Grafik ein, die sich responsive skaliert. Schlechter als Flash ist das auch nicht …
Gruß
helix -
... binde doch eine Grafik ein, die sich responsive skaliert. Schlechter als Flash ist das auch nicht …
Die Idee ist gar nicht mal schlecht.
Den Text z.B. als PNG-Bild einbinden und dann mit CSS width=100% und maxwidth=[Breite des Bildes in Pixel] skalieren.Eine stufenlos Anpassung der Font-Size dürfte mit CSS und auch mit Javascript kaum möglich sein.
Bestenfalls könnte man noch mit einem Canvas arbeiten und dann wie oben das Bild per CSS skalieren. Aber dann kann man auch gleich ein Bild nehmen.Gruß
Ingo -
Ich würde den Text dann lieber noch als svg einbinden. Hat den Vorteil, dass er durch Suchmaschinen gefunden wird.
Teste mal das in einem neuen Dokument, nicht in Wordpress:HTML
Alles anzeigen<!DOCTYPE html> <html> <body> <svg viewbox="0 0 80 125"> <text x="0" y="15" fill="red">Hier steht Text.</text> <text x="0" y="30" fill="red">Hier könnte weiterer Text stehen.</text> Sorry, your browser does not support inline SVG. </svg> </body> </html>
Jetzt brauchst du nur noch ein Plugin für Wordpress, welches SVG unterstützt, oder du bastelst dir ein Plugin oder Shortcode. -
Oder, falls du doch ne reine css lösung willst, dann arbeite mit vw Angaben.
Kurz getestet, tut genau das was du suchst.
HTML
Alles anzeigen<!DOCTYPE html><html> <head> <style> div { font-size: 5vw; width: 80vw; float: right;} div p { text-align: right;} </style> </head> <body> <div> <p>Lorem ipsum dolor sit amet.</p> <p>consetetur sadipscing elitr.</p> <p>sed diam nonumy eirmod tempor.</p> <p>invidunt ut labore et dolore.</p></div> </body></html> -
Oder, falls du doch ne reine css lösung willst, dann arbeite mit vw Angaben.
Kurz getestet, tut genau das was du suchst.
(...)Ja, das tut es als einfache HTML-Seite, aber nicht innerhalb von WP (ja, auch nicht entsprechend angepasst).
Das hier (einfach genau so in einen Beitrag oder eine Seite einfügen, es widersteht auch dem visuellen Editor)
[COLOR=#006400]<div style="text-align: right;"><span style="white-space: nowrap; line-height: 1.5; font-size: calc(2px + 2vw);">
Wort Wort Wort Wort Wort
Wort Wort Wort Wort Wort Wort Wort
Wort Wort Wort Wort WortWort Wort Wort Wort Wort
Wort Wort Wort Wort Wort Wort Wort Wort Wort Wort Wort
Wort Wort Wort Wort Wort Wort Wort Wort Wort
Wort Wort Wort Wort Wort Wort Wort
Wort Wort Wort Wort Wort
</span></div>[/COLOR]funktioniert auch innerhalb von WP, allerdings nur bis zu einer Devicebreite von etwas über FHD, dann wuchert der Text über die Ränder des Contentbereiches überlicher Themes...
-
Zitat
[COLOR=#333333]Ja, das tut es als einfache HTML-Seite, aber nicht innerhalb von WP (ja, auch nicht entsprechend angepasst)[/COLOR]
Warum sollte das entsprechend angepasst nicht gehen?
Eigenes Seitentemplate, im css das entsprechend ausgezeichnete, umschließende Element und p anpassen und gut ist?
Sonst auch mit ACF, noch schneller.
Ich sehe hier nicht den Unterschied zwischen WP und ner HTML Seite.Auch halte inline-html nicht für geschickter.
Aber wie es immer ist – es gibt viele Wege sowas zu lösen.Grüße
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!