AGB  ·  Datenschutz  ·  Impressum  







Anmelden
Nützliche Links
Registrieren
Zurück Delphi-PRAXiS Programmierung allgemein Programmieren allgemein HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

Ein Thema von Phoenix · begonnen am 4. Mär 2011 · letzter Beitrag vom 5. Mär 2011
Antwort Antwort
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.619 Beiträge
 
#1

HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 4. Mär 2011, 18:09
Hi,

sind irgendwelche HTML&CSS Guru's hier?

Ich würde gerne mit Html5 und CSS3 den vorderen Hintergrund (ja, gleich weiter ) einer Webseite (eigentlich lediglich ein einfarbiges DIV) um ein paar Grad rotieren lassen, der Text im Vordergrund soll aber nicht rotieren, sondern normal ausgerichtet sein.

Konkreter:Man stelle sich eine komplett schwarze Webseite vor (hintergrund).
Auf dieser Webseite wird ein weisses Blatt papier im Querformat (der vordere Hintergrund ) mit Text angezeigt.

Nun wird dieses Blatt Papier um ein paar Grad gegen den Uhrzeigersinn gedreht, der Text darauf soll aber gerade ausgerichtet bleiben (als ob das Blatt schief bedruckt wurde, der text gerade lesbar ist und das blatt eben schief liegt).

Idealerweise würde das Blatt im korrekten Seitenverhältnis bis zu einer bestimmten größe mit skalieren, wenn das Browserfenster seine Größe ändert.

Ich kann zwar Div's rotieren lassen, dann aber nur komplett mit Inhalt und das skalieren ist auch nicht so ganz trivial. Anscheinend sollte sowas mit HTML5 aber gehen. Achja: Muss nur in den jeweils aktuellen Versionen von IE, Chrome, Safari und Firefox laufen. Also IE8+. Ältere Versionen sind nicht die Zielgruppe und wer seine Browser nicht up-to-date hält wird die Seite halt nicht zu Gesicht bekommen.
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Ruio

Registriert seit: 6. Nov 2008
89 Beiträge
 
Delphi 2005 Personal
 
#2

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 4. Mär 2011, 19:04
Und wenn du für den Inhalt einen inneren Container nimmst und dort wieder zurückrotierst?
  Mit Zitat antworten Zitat
Benutzerbild von S2B
S2B

Registriert seit: 1. Feb 2004
Ort: Aachen
1.268 Beiträge
 
#3

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 4. Mär 2011, 21:39
Mir würde spontan einfallen, den Inhalt auf dem Papier in ein separates Div (Geschwister-Element) zu packen und beides absolut zu positionieren (evtl. mit overflow: auto für den Textüberlauf). Aber keine Ahnung, ob das für deinen Fall in Frage kommt.
Simon Praetorius
Gruß
S2B
  Mit Zitat antworten Zitat
Florian Hämmerle
(Gast)

n/a Beiträge
 
#4

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 5. Mär 2011, 07:05
Meine erste Idee wäre auch die gewesen, dass ich den Hintergrund in ein div packe und drehe. Den Text in ein weiteres div und dieses wieder zurückdrehe.
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.619 Beiträge
 
#5

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 5. Mär 2011, 08:39
Das Problem wäre in beiden Fällen die Skalierung, aber ich werde das mit dem hin- und herrotieren mal ausprobieren heut Nachmittag. Melde mich dann mal mit dem Ergebnis wieder
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.619 Beiträge
 
#6

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 5. Mär 2011, 14:11
Mir würde spontan einfallen, den Inhalt auf dem Papier in ein separates Div (Geschwister-Element) zu packen und beides absolut zu positionieren (evtl. mit overflow: auto für den Textüberlauf). Aber keine Ahnung, ob das für deinen Fall in Frage kommt.
Leider nein. Wenn ich absolut positioniere kann ich ja nicht relativ zur gesamten aktuellen Seiten/Browsergröße mitskalieren. Das fällt leider komplett raus. Der Abstand z.B. von links oben (0,0) kann nie absolut sein, da die Seite, je größer sie ist, auch weiter links starten muss um einen relativ gleich breiten Content zu bieten der rechts genauso weit rausragt als links.

Auch die sich mit bewegende Positionierung des divs wäre da ein Problem.

Meine erste Idee wäre auch die gewesen, dass ich den Hintergrund in ein div packe und drehe. Den Text in ein weiteres div und dieses wieder zurückdrehe.
Aus oben genannten Gründen geht das auch nicht. Das Problem ist konkret mathematischer Natur. Die Rotation ist eine Matrix-Tranformation (und als solche muss sie auch im IE angegeben werden).

Durch die Verschiebung während der Transformation (alle Browser drehen um den Mittelpunkt, nur der IE tanzt (mal wieder) aus der Reihe und dreht um den Ursprung, das heisst da muss noch eine Verschiebung rein) ändert sich auch die Position der enthaltenen Elemente.

Das heisst beim zurückdrehen des inneren Elementes müsste ich die Verschiebung kennen um sie in die Matrix einzurechnen. Und an die komme ich a) nicht und selbst wenn ich da gut schätzen würde ändert sie sich b) ständig durch die Größenänderung des Browserfensters und c) kann man keine Variablen in CSS packen.

Fazit
Ich habe keine Ahnung wie ich den Text unrotiert über den rotierten Hintergrund bekommen soll.

Anbei mal den rotierten Hintergrund bis jetzt...
Angehängte Dateien
Dateityp: zip hp-template.zip (33,0 KB, 5x aufgerufen)
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Benutzerbild von Matze
Matze
(Co-Admin)

Registriert seit: 7. Jul 2003
Ort: Schwabenländle
14.929 Beiträge
 
Turbo Delphi für Win32
 
#7

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 5. Mär 2011, 16:31
Wenn ich absolut positioniere kann ich ja nicht relativ zur gesamten aktuellen Seiten/Browsergröße mitskalieren. Das fällt leider komplett raus. Der Abstand z.B. von links oben (0,0) kann nie absolut sein, da die Seite, je größer sie ist, auch weiter links starten muss um einen relativ gleich breiten Content zu bieten der rechts genauso weit rausragt als links.
Das habe ich noch nicht genaz verstanden. Wie meinst du das?

Ich habe es mal absolut positioniert angehängt. Und was genau hättest du da gerne anders?
Achja, die CSS-Eigenschaft "font-color" gibt es nicht. Das muss "color" heißen.

Grüße
Matze
Angehängte Dateien
Dateityp: zip test.zip (34,0 KB, 0x aufgerufen)
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.619 Beiträge
 
#8

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 5. Mär 2011, 16:46
Schau Dir das mal in einem anständigen Browser an, und dann im IE:
http://jsfiddle.net/bEu4K/3/
Und dann resize mal den Browser
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Ansicht

Forumregeln

Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Gehe zu:

Impressum · AGB · Datenschutz · Nach oben
Alle Zeitangaben in WEZ +1. Es ist jetzt 19:38 Uhr.
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz